00. 目錄

文章目錄

• • 00. 目錄
  • 01. 概述
  • 02. 開發環境
  • 03. 線性漸變
  • 04. 輻射漸變
  • 05. 錐形漸變
  • 06. 附錄

01. 概述

在畫刷中可以使用漸變填充。QGradient類就是用來和QBrush一起指定漸變填充的。Qt現在支持三種類型的漸變填充：

• 線性漸變（linear gradient）在開始點和結束點之間插入顏色；
• 輻射漸變（radial gradient）在焦點和環繞它的圓環間插入顏色；
• 錐形漸變（Conical）在圓心周圍插入顏色。

這三種漸變分別由QGradient的三個子類來表示，QLinearGradient表示線性漸變，QRadialGradient表示輻射漸變，QConicalGradient表示錐形漸變。

02. 開發環境

Windows系統：Windows10

Qt版本：Qt5.15或者Qt6

03. 線性漸變

對于線性漸變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()中使用，這時畫刷風格會自動設置為相對應的漸變填充。

程序示例

void Widget::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(100, 100, 90, 40);}

執行結果

04. 輻射漸變

對于輻射漸變QRadialGradient::QRadialGradient( const QPointF & center, qreal radius, const QPointF & focalPoint )需要指定圓心center和半徑radius，這樣就確定了一個圓，然后再指定一個焦點focalPoint。焦點的位置為0，圓環的位置為1，然后在焦點和圓環間插入顏色。輻射漸變也可以使用setSpread()函數設置在漸變區域以外的區域的擴散方式，三種擴散方式的效果如下圖所示。

程序示例

void Widget::paintEvent(QPaintEvent *) {//方式二：輻射漸變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));QPainter painter(this);painter.setBrush(radialGradient);painter.drawEllipse(QPointF(100, 200), 50, 50); }

執行結果

05. 錐形漸變

對于錐形漸變QConicalGradient::QConicalGradient ( const QPointF & center,qreal angle )需要指定中心點center和一個角度angle（其值在0到360之間），然后沿逆時針從給定的角度開始環繞中心點插入顏色。這里給定的角度沿逆時針方向開始的位置為0，旋轉一圈后為1。setSpread()函數對于錐形漸變沒有效果。

程序示例

void Widget::paintEvent(QPaintEvent *) {//方式三：錐形漸變QConicalGradient conicalGradient(QPointF(250, 190), 60);conicalGradient.setColorAt(0.2, Qt::cyan);conicalGradient.setColorAt(0.9, Qt::black);QPainter painter(this);painter.setBrush(conicalGradient);painter.drawEllipse(QPointF(250, 200), 200, 200);}

執行結果

06. 附錄

源碼下載：【Qt】2D繪圖之漸變填充.rar

總結

以上是生活随笔為你收集整理的【Qt】2D绘图之渐变填充的全部內容，希望文章能夠幫你解決所遇到的問題。

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