QT繪圖技術(shù)paintEvent 漸變色技術(shù)

  前面說了有關(guān)反走樣的相關(guān)知識，下面來說一下漸變。漸變是繪圖中很常見的一種功能，它是利用顏色插值使得兩個(gè)或更多顏色之間能夠平滑過渡，簡單來說就是可以把幾種顏色混合在一起，讓它們能夠自然地過渡，而不是一下子變成另一種顏色。它們常被用來創(chuàng)建二維圖形的三維效果。漸變的算法比較復(fù)雜，寫得不好的話效率會(huì)很低，好在很多繪圖系統(tǒng)都內(nèi)置了漸變的功能，Qt也不例外。漸變一般是用在填充里面的，所以，漸變的設(shè)置就是在QBrush里面。 
        Qt支持三種類型的漸變，分別是線性漸變(QLinearGradient)、輻射漸變(QRadialGradient)、錐形漸變(QConicalGradient)。 

        1、線性漸變由兩個(gè)控制點(diǎn)定義，連接這兩點(diǎn)的線上設(shè)置一系列的顏色斷點(diǎn)。這些斷點(diǎn)被鉗位到浮點(diǎn)數(shù)0和1之間，0對應(yīng)第一個(gè)控制點(diǎn)，1對應(yīng)第二個(gè)控制點(diǎn)，兩個(gè)指定斷點(diǎn)之間的顏色由線性插值得出。如代碼（以下給出 paintEvent()函數(shù)里面的代碼 ）：

void MyWidget::paintEvent(QPaintEvent *event)
{ QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); QLinearGradient linearGradient(60, 50, 200, 200); 
 linearGradient.setColorAt(0.2, Qt::white); 
 linearGradient.setColorAt(0.6, Qt::green); 
 linearGradient.setColorAt(1.0, Qt::black); 
 painter.setBrush(QBrush(linearGradient)); 
 painter.drawEllipse(50, 50, 200, 150);
}

        這里0對應(yīng)第一個(gè)控制點(diǎn)（60,50），1對應(yīng)第二個(gè)控制點(diǎn)（200,200 ），之間用了三個(gè)顏色插值，效果如下圖： 

    2、輻射漸變由一個(gè)中心點(diǎn)、半徑、一個(gè)焦點(diǎn)，以及顏色斷點(diǎn)控制。中心點(diǎn)和半徑定義一個(gè)圓。顏色從焦點(diǎn)向外擴(kuò)散，焦點(diǎn)可以是中心點(diǎn)或者圓內(nèi)的其他點(diǎn)。代碼如下： 

void MyWidget::paintEvent(QPaintEvent *event)
{ QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); 
 QRadialGradient radialGradient(130, 130, 100, 130, 130); radialGradient.setColorAt(0.0, Qt::white); radialGradient.setColorAt(0.6, Qt::black); radialGradient.setColorAt(0.8, Qt::green); painter.setBrush(QBrush(radialGradient)); painter.drawEllipse(50, 50, 200, 150);
}

        這里QRadialGradient radialGradient(130, 130, 100, 130, 130);中前兩個(gè)參數(shù)指定了中心點(diǎn)，第三個(gè)參數(shù)指定了半徑，后兩個(gè)參數(shù)指定了焦點(diǎn)，這里中心點(diǎn)和焦點(diǎn)是同一個(gè)點(diǎn)，所以看起來效果是從中心點(diǎn)向外均勻擴(kuò)散。效果如下：

        3、錐形漸變由一個(gè)中心點(diǎn)和一個(gè)角度定義，顏色從x軸正向偏轉(zhuǎn)一個(gè)角度開始，按給定顏色斷點(diǎn)旋轉(zhuǎn)擴(kuò)散。代碼如下：

void MyWidget::paintEvent(QPaintEvent *event)
{ QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); 
 QConicalGradient conicalGradient(150,150, 90); conicalGradient.setColorAt(0.2, Qt::white); conicalGradient.setColorAt(0.6, Qt::green); conicalGradient.setColorAt(0.8, Qt::black); painter.setBrush(QBrush(conicalGradient)); painter.drawEllipse(50, 50, 200, 150);
}

        這里定義（150,150 ）為中心點(diǎn)，從x軸正向開始偏轉(zhuǎn)90度，然后按白綠黑旋轉(zhuǎn)擴(kuò)撒，效果如下：

        4、那么我們?nèi)绾慰刂莆覀兊木€條也是漸變效果呢 ？ 通常我們畫線是用畫筆來完成的，但是QPen是接收QBrush做參數(shù)的，也就是說，你可以利用一個(gè)QBrush創(chuàng)建一個(gè)QPen，這樣，QBrush所有的填充效果都可以用在畫筆上了！代碼如下：

void MyWidget::paintEvent(QPaintEvent *event)
{ QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); 
 QLinearGradient linearGradient(60, 50, 200, 200); 
 linearGradient.setColorAt(0.2, Qt::white); 
 linearGradient.setColorAt(0.6, Qt::green); 
 linearGradient.setColorAt(1.0, Qt::black); 
 painter.setPen(QPen(QBrush(linearGradient),5)); 
 painter.drawEllipse(50, 50, 200, 150);
}

         下來看看我們的畫線的漸變效果吧！