QSS 之圖形漸變填充

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

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

1. QLinearGradient

對(duì)于線性漸變 QLinearGradient::QLinearGradient (const QPointF & start, constQPointF & finalStop) 需要指定開始點(diǎn) start 和結(jié)束點(diǎn) finalStop，然后將開始點(diǎn)和結(jié)束點(diǎn)之間的區(qū)域進(jìn)行等分，開始點(diǎn)的位置為 0.0，結(jié)束點(diǎn)的位置為 1.0，而它們之間的位置按照距離比例進(jìn)行設(shè)定，然后使用 QGradient::setColorAt(qreal position, const QColor & color) 函數(shù)在指定的位置 position 插入指定的顏色 color，當(dāng)然，這里的 position 的值要在 0 到 1 之間。

可以使用 setSpread() 函數(shù)來設(shè)置填充的擴(kuò)散方式，即指明在指定區(qū)域以外的區(qū)域怎樣進(jìn)行填充。擴(kuò)散方式由 QGradient::Spread 枚舉類型定義，它一共有三個(gè)值，分別是 QGradient::PadSpread：使用最接近的顏色進(jìn)行填充，這是默認(rèn)值；QGradient::RepeatSpread：在漸變區(qū)域以外的區(qū)域重復(fù)漸變；QGradient::ReflectSpread：在漸變區(qū)域以外將反射漸變。

QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); // 設(shè)置畫筆顏色、寬度 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); // 設(shè)置顯示模式 linear.setSpread(QGradient::PadSpread); // 設(shè)置畫刷填充 painter.setBrush(linear); // 繪制矩形 painter.drawRect(QRect(40, 40, 180, 180));// 線性漸變 QLinearGradient linear2(QPointF(300, 80), QPointF(400, 180)); // 設(shè)置顏色 linear2.setColorAt(0, Qt::red); linear2.setColorAt(1, Qt::white); // 設(shè)置顯示模式 linear2.setSpread(QGradient::ReflectSpread); // 設(shè)置畫刷填充 painter.setBrush(linear2); // 繪制矩形 painter.drawRect(QRect(260, 40, 180, 180));// 線性漸變 QLinearGradient linear3(QPointF(520, 80), QPointF(620, 180)); // 設(shè)置顏色 linear3.setColorAt(0, Qt::red); linear3.setColorAt(1, Qt::white); // 設(shè)置顯示模式 linear3.setSpread(QGradient::RepeatSpread); // 設(shè)置畫刷填充 painter.setBrush(linear3); // 繪制矩形 painter.drawRect(QRect(480, 40, 180, 180));

2. QRadialGradient

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

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

3. QConicalGradient

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。