QSS 之圖形漸變填充

在 Qt 中，目前支持三種漸變填充方式，這三種方式都是 QGradient 的子類，它可以與畫刷 QBrush 組合使用，來指定特定對象圖形的填充方式。這三種填充方式是：

• QLinearGradient：顯示從起點到終點的直線漸變
• QRadialGradient：顯示以圓心為中心的圓形漸變
• QConicalGradient：顯示圍繞一個中心點的錐形漸變

1. QLinearGradient

對于線性漸變 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：使用最接近的顏色進行填充，這是默認值；QGradient::RepeatSpread：在漸變區域以外的區域重復漸變；QGradient::ReflectSpread：在漸變區域以外將反射漸變。

QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); // 設置畫筆顏色、寬度 painter.setPen(QPen(QColor(0, 160, 230), 2));// 線性漸變 QLinearGradient linear(QPointF(80, 80), QPointF(180, 180)); // 插入顏色 linear.setColorAt(0, Qt::red); linear.setColorAt(1, Qt::white); // 設置顯示模式 linear.setSpread(QGradient::PadSpread); // 設置畫刷填充 painter.setBrush(linear); // 繪制矩形 painter.drawRect(QRect(40, 40, 180, 180));// 線性漸變 QLinearGradient linear2(QPointF(300, 80), QPointF(400, 180)); // 設置顏色 linear2.setColorAt(0, Qt::red); linear2.setColorAt(1, Qt::white); // 設置顯示模式 linear2.setSpread(QGradient::ReflectSpread); // 設置畫刷填充 painter.setBrush(linear2); // 繪制矩形 painter.drawRect(QRect(260, 40, 180, 180));// 線性漸變 QLinearGradient linear3(QPointF(520, 80), QPointF(620, 180)); // 設置顏色 linear3.setColorAt(0, Qt::red); linear3.setColorAt(1, Qt::white); // 設置顯示模式 linear3.setSpread(QGradient::RepeatSpread); // 設置畫刷填充 painter.setBrush(linear3); // 繪制矩形 painter.drawRect(QRect(480, 40, 180, 180));

2. QRadialGradient

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

QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); // 設置畫筆顏色、寬度 painter.setPen(QPen(QColor(0, 160, 230), 2));// 輻射漸變 QRadialGradient radialGradient(QPointF(130, 130), 70, QPointF(130, 80)); // 設置顏色 radialGradient.setColorAt(0, Qt::red); radialGradient.setColorAt(1, Qt::white); // 設置擴散樣式 radialGradient.setSpread(QGradient::PadSpread); // 設置畫刷填充 painter.setBrush(radialGradient); // 繪制矩形 painter.drawRect(QRect(40, 40, 180, 180));// 輻射漸變 QRadialGradient radialGradient2(QPointF(350, 130), 70, QPointF(350, 80)); // 設置顏色 radialGradient2.setColorAt(0, Qt::red); radialGradient2.setColorAt(1, Qt::white); // 設置擴散樣式 radialGradient2.setSpread(QGradient::ReflectSpread); // 設置畫刷填充 painter.setBrush(radialGradient2); // 繪制矩形 painter.drawRect(QRect(260, 40, 180, 180));// 輻射漸變 QRadialGradient radialGradient3(QPointF(570, 130), 70, QPointF(570, 80)); // 設置顏色 radialGradient3.setColorAt(0, Qt::red); radialGradient3.setColorAt(1, Qt::white); // 設置擴散樣式 radialGradient3.setSpread(QGradient::RepeatSpread); // 設置畫刷填充 painter.setBrush(radialGradient3); // 繪制矩形 painter.drawRect(QRect(480, 40, 180, 180));

3. QConicalGradient

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

QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); // 設置畫筆顏色、寬度 painter.setPen(QPen(QColor(0, 160, 230), 2));// 錐形漸變 QConicalGradient conicalGradient(QPointF(130, 130), 60); // 設置顏色 conicalGradient.setColorAt(0, Qt::red); conicalGradient.setColorAt(1, Qt::white); // 設置畫刷填充 painter.setBrush(conicalGradient); // 繪制矩形 painter.drawRect(QRect(40, 40, 180, 180));// 錐形漸變 QConicalGradient conicalGradient2(QPointF(350, 130), 180); // 設置顏色 conicalGradient2.setColorAt(0, Qt::red); conicalGradient2.setColorAt(1, Qt::white); // 設置畫刷填充 painter.setBrush(conicalGradient2); // 繪制矩形 painter.drawRect(QRect(260, 40, 180, 180));// 錐形漸變 QConicalGradient conicalGradient3(QPointF(570, 130), 300); // 設置顏色 conicalGradient3.setColorAt(0, Qt::red); conicalGradient3.setColorAt(1, Qt::white); // 設置畫刷填充 painter.setBrush(conicalGradient3); // 繪制矩形 painter.drawRect(QRect(480, 40, 180, 180)); 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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