[Qt教程]?第12篇 2D繪圖（二）漸變填充

樓主 ?發表于 2013-4-23 17:59:31?|?查看: 689|?回復: 1

漸變填充 版權聲明 該文章原創于Qter開源社區，作者yafeilinux，轉載請注明出處！ 導語 在前一節提到了在畫刷中可以使用漸變填充。QGradient類就是用來和QBrush一起指定漸變填充的。Qt現在支持三種類型的漸變填充： 線性漸變（linear gradient）在開始點和結束點之間插入顏色； 輻射漸變（radial gradient）在焦點和環繞它的圓環間插入顏色； 錐形漸變（Conical）在圓心周圍插入顏色。 這三種漸變分別由QGradient的三個子類來表示，QLinearGradient表示線性漸變，QRadialGradient表示輻射漸變，QConicalGradient表示錐形漸變。 環境：Windows Xp + Qt 4.8.4+Qt Creator2.6.2 目錄 一、線性漸變 二、輻射漸變 三、錐形漸變 正文 一、線性漸變 1.我們仍然在上一節創建的項目中進行講解。更改paintEvent()函數如下： void?MainWindow::paintEvent(QPaintEvent?*) { //線性漸變 QLinearGradient linearGradient(QPointF(40, 190), QPointF(70, 190)); //插入顏色 linearGradient.setColorAt(0, Qt::yellow); linearGradient.setColorAt(0.5, Qt::red); linearGradient.setColorAt(1, Qt::green); //指定漸變區域以外的區域的擴散方式 linearGradient.setSpread(QGradient::RepeatSpread); //使用漸變作為畫刷 QPainter painter(this); painter.setBrush(linearGradient); painter.drawRect(10, 20, 90, 40); } 運行程序，效果如下圖所示。 2.介紹 對于線性漸變QLinearGradient::QLinearGradient ( const QPointF & start, constQPointF & finalStop )需要指定開始點start和結束點finalStop，然后將開始點和結束點之間的區域進行等分，開始點的位置為0.0，結束點的位置為1.0，而它們之間的位置按照距離比例進行設定，然后使用QGradient::setColorAt( qreal position, const QColor & color )函數在指定的位置position插入指定的顏色color，當然，這里的position的值要在0到1之間。 這里還可以使用setSpread()函數來設置填充的擴散方式，即指明在指定區域以外的區域怎樣進行填充。擴散方式由QGradient::Spread枚舉變量定義，它一共有三個值，分別是QGradient::PadSpread，使用最接近的顏色進行填充，這是默認值，如果我們不使用setSpread()指定擴散方式，那么就會默認使用這種方式；QGradient::RepeatSpread，在漸變區域以外的區域重復漸變；QGradient::ReflectSpread，在漸變區域以外將反射漸變。在線性漸變中這三種擴散方式的效果下圖所示。要使用漸變填充，可以直接在setBrush()中使用，這時畫刷風格會自動設置為相對應的漸變填充。 二、輻射漸變 1.繼續在paintEvent()函數中添加如下代碼： //輻射漸變 QRadialGradient?radialGradient(QPointF(100,?190),50,QPointF(275,200)); radialGradient.setColorAt(0,?QColor(255,?255,?100,?150)); radialGradient.setColorAt(1,?QColor(0,?0,?0,?50)); painter.setBrush(radialGradient); painter.drawEllipse(QPointF(100,?190),?50,?50); 運行程序，效果如下圖所示。 2.介紹 對于輻射漸變QRadialGradient::QRadialGradient( const QPointF & center, qreal radius, const QPointF & focalPoint )需要指定圓心center和半徑radius，這樣就確定了一個圓，然后再指定一個焦點focalPoint。焦點的位置為0，圓環的位置為1，然后在焦點和圓環間插入顏色。輻射漸變也可以使用setSpread()函數設置漸變區域以外的區域的擴散方式，三種擴散方式的效果如下圖所示。 三、錐形漸變 1.接著在paintEvent()函數里面添加如下代碼： //錐形漸變 QConicalGradient?conicalGradient(QPointF(250,?190),?60); conicalGradient.setColorAt(0.2,?Qt::cyan); conicalGradient.setColorAt(0.9,?Qt::black); painter.setBrush(conicalGradient); painter.drawEllipse(QPointF(250,?190),?50,?50); 運行程序，效果如下圖所示。 2.介紹 對于錐形漸變QConicalGradient::QConicalGradient ( const QPointF & center,qreal angle )需要指定中心點center和一個角度angle（其值在0到360之間），然后沿逆時針從給定的角度開始環繞中心點插入顏色。這里給定的角度沿逆時針方向開始的位置為0，旋轉一圈后為1。setSpread()函數對于錐形漸變沒有效果。 結語 ? ?? ??本節在前面的基礎上，簡單介紹了一下常用的三種漸變填充。如果大家可以熟練使用這幾種填充效果，那么就可以實現非常漂亮的界面。另外，還可以給畫筆設置漸變顏色，這樣就可以繪制出特殊效果的線條和文字，這個可以參考《Qt Creator快速入門》的相關內容。

總結

以上是生活随笔為你收集整理的[Qt教程] 第12篇 2D绘图（二）渐变填充的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。