QGradient简介

QGradient类与QBrush结合使用以指定渐变填充。Qt当前支持三种类型的渐变填充：

• 线性渐变: 在起点和终点之间插入颜色。
• 简单的径向渐变: 在焦点和围绕它的圆上的端点之间插入颜色。
• 扩展的径向渐变: 可在中心和焦距之间插值颜色。
• 圆锥形渐变: 在中心点周围插入颜色。

三种渐变类型由对应的三个子类来表示，可以使用type()函数来获得所使用的渐变类型

通过使用QGradientStop类型来定义渐变颜色在停止点，使用setColorAt函数可以定义一个停止点，使用setStops()函数可以一次性定义多个停止点。如果未指定停止点，则使用0处黑色到1处白色的渐变。渐变的完整停止点集(可通过stops()函数访问)描述了渐变区域应该如何填充。下面的示例代码指定了从(100, 100)位置的黑色到(200,200)位置的白色的对角线渐变：

linearGrad = QLinearGradient(QPointF(100, 100), QPointF(200, 200))
linearGrad.setColorAt(0, Qt.black)
linearGrad.setColorAt(1, Qt.white)

渐变可以具有任意数量的停止点。下面的代码将创建一个径向渐变，从中心开始是红色，然后渐变到蓝色，最后渐变到绿色：

radialGrad = QRadialGradient(QPointF(100, 100), 100)
radialGrad.setColorAt(0, Qt.red)
radialGrad.setColorAt(0.5, Qt.blue)
radialGrad.setColorAt(1, Qt.green)

QGradient.Type枚举定义了可使用的渐变类型：

• QGradient.LinearGradient (0): 在起点和终点之间插入颜色（QLinearGradient）。
• QGradient.RadialGradient (1): 在焦点和围绕它的圆上的端点（QRadialGradient）之间插入颜色。
• QGradient.ConicalGradient (2): 在中心点（QConicalGradient）周围插入颜色。
• QGradient.NoGradient (3): 不使用渐变。

渐变有三种扩散方式，可以在其区域之外进行重复或者反射渐变扩散。使用函数setSpread()来设置扩散方式，默认设置是在最接近的停止点填充外部区域的颜色。QGradient.Spread枚举变量定义了三种不同的扩散方法：

• QGradient.PadSpread (0): 该区域将填充最接近的停止色。这是默认值。
• QGradient.ReflectSpread(1): 渐变会反射到渐变区域之外。
• QGradient.RepeatSpread (2): 在渐变区域外重复渐变。

注意：setSpread()函数仅对线性和径向渐变有效，原因是圆锥形渐变根据定义是封闭的，即圆锥形渐变从0到360度填充整个圆，而径向渐变或线性渐变的边界可以分别通过其半径或最终停止点来指定。

可以使用相对于设备坐标或者相对于对象边界框的逻辑坐标来指定梯度渐变坐标。使用函数setCoordinateMode()来设置，默认值为LogicalMode。QGradient.CoordinateMode枚举定义了可以使用的坐标模式:

• Gradient.LogicalMode (0): 这是默认模式。像对象坐标一样，梯度坐标也被指定为逻辑空间。
• QGradient.ObjectMode (3): 在此模式下，梯度坐标相对于绘制对象的边界矩形，其中（0,0）在对象的边界矩形的右上角，（1,1）在对象的边界矩形的右下角。这个值是在Qt 5.12中添加的。
• QGradient.StretchToDeviceMode (1): 在此模式下，梯度坐标相对于绘画设备的边界矩形，其中（0,0）在绘画设备的左上角，（1,1）在绘画设备的右下角。
• QGradient.ObjectBoundingMode (2): 此模式与ObjectMode相同，除了{ QBrush :: transform（）} {brush transform}（如有）相对于逻辑空间而不是对象空间应用。此枚举值已弃用。

QGradient常用函数：

• setCoordinateMode(self, coordinateMode :QGradient.Type)：设置渐变的坐标模式，默认模式为LogicalMode。
• coordinateMode(self)：获得渐变的坐标模式。
• setColorAt(self, pos : float, color :QColor)：在指定位置pos，用颜色color设置一个停止点。
• setSpread(self, spread: QGradient.Spread)：设置渐变的扩散方式。
• spread(self)：获得扩散方式。
• setStops(self, stopPoints :QGradientStops)：用给定的stopPoints替换当前的一组停止点。点的位置必须在0到1的范围内，并且必须从最低点开始排序。
• stops(self)：获得渐变的停止点集。
• type(self)：获得渐变的类型。

测试

代码分别演示水平线性渐变，水平垂直渐变，水平对角线渐变，焦点在中心的径向渐变，焦点不在中心的径向渐变和圆锥形渐变的情况， 完整代码如下:

import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt
from PyQt5.QtGui import (QPen, QPainter, QBrush, 
                         QLinearGradient, QConicalGradient, QRadialGradient)
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout, QFrame, QSizePolicy)
 
class MyFrame(QFrame):
    def __init__(self, type, parent = None):
        super(MyFrame, self).__init__(parent)
        self.setSizePolicy(QSizePolicy.Preferred, QSizePolicy.Preferred)
        self.type = type
              
    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing, True)
        
        #绘制边框线
        painter.drawRect(self.rect())
        self.setFixedSize(168, 168)
        
        if self.type == 'linear-hor':
            self.drawLinearHor(painter)
        elif self.type == 'linear-ver':
            self.drawLinearVer(painter)
        elif self.type == 'linear-dia':
            self.drawLinearDia(painter)
        elif self.type == 'qradial-a':
            self.drawQradialA(painter)
        elif self.type == 'qradial-b':
            self.drawQradialB(painter)
        elif self.type == 'conical':
            self.drawConical(painter)
        else:
            print('not supported')
        
            
    #水平线性渐变
    def drawLinearVer(self, painter):    
        lg = QLinearGradient(4, 4, 4, 160)
        lg.setColorAt(0, Qt.red)
        lg.setColorAt(1, Qt.blue)
        
        painter.setBrush(lg)
        painter.setPen(Qt.transparent)
        painter.drawRect(4, 4, 160, 160)
        
        painter.setPen(Qt.white)
        painter.drawText(60, 90, '垂直渐变')
        
    #垂直线性渐变
    def drawLinearHor(self, painter):       
        lg = QLinearGradient(4, 4, 160, 4)
        lg.setColorAt(0, Qt.red)
        lg.setColorAt(1, Qt.blue)
        
        painter.setBrush(lg)
        painter.setPen(Qt.transparent)
        painter.drawRect(4, 4, 160, 160)
        
        painter.setPen(Qt.white)
        painter.drawText(60, 90, '水平渐变')
        
    #对角线线性渐变
    def drawLinearDia(self, painter):      
        lg = QLinearGradient(4, 4, 160, 160)
        lg.setColorAt(0, Qt.red)
        lg.setColorAt(1, Qt.blue)
        
        painter.setBrush(lg)
        painter.setPen(Qt.transparent)
        painter.drawRect(4, 4, 160, 160)
        
        painter.setPen(Qt.white)
        painter.drawText(60, 90, '对角线渐变')
        
    #径向渐变1
    def drawQradialA(self, painter):
        painter.translate(self.width()/2, self.height()/2)
        rg = QRadialGradient(0, 0, 80, 0, 0) #设置圆的原点和焦点在中心,半径80
        rg.setColorAt(0, Qt.red)
        rg.setColorAt(0.5, Qt.blue)
        rg.setColorAt(1, Qt.green)
        
        painter.setBrush(rg)
        painter.setPen(Qt.transparent)
        painter.drawEllipse(-80, -80, 160, 160)
        
        painter.setPen(Qt.white)
        painter.drawText(-30, 0,  '径向渐变 A')
        
    #径向渐变2
    def drawQradialB(self, painter):
        painter.translate(self.width()/2, self.height()/2)
        rg = QRadialGradient(0, 0, 80, 0, 40) #设置焦点在(0,40),半径80
        rg.setColorAt(0, Qt.red)
        rg.setColorAt(0.5, Qt.blue)
        rg.setColorAt(1, Qt.green)
        
        painter.setBrush(rg)
        painter.setPen(Qt.transparent)
        painter.drawEllipse(-80, -80, 160, 160)
        
        painter.setPen(Qt.white)
        painter.drawText(-30, 0,  '径向渐变 B')
        
    #圆锥形渐变
    def drawConical(self, painter):
        painter.translate(self.width()/2, self.height()/2)
        rg = QConicalGradient(0, 0, 30) #设置点在中心,角度为30 
        rg.setColorAt(0, Qt.red)
        rg.setColorAt(0.5, Qt.blue)
        rg.setColorAt(1, Qt.green)
        
        painter.setBrush(rg)
        painter.setPen(Qt.transparent)
        painter.drawEllipse(-80, -80, 160, 160)
        
        painter.setPen(Qt.white)
        painter.drawText(-30, 0,  '圆锥形渐变')
        
                
        
class DemoGradient(QWidget):
    def __init__(self, parent=None):
        super(DemoGradient, self).__init__(parent)   
        
        # 设置窗口标题
        self.setWindowTitle('实战PyQt5: QGradient 渐变填充演示') 
        
        #设置尺寸
        self.resize(560, 380)    
              
        self.initUi()
        
    def initUi(self):
        layout = QGridLayout()       
        
        lhGrad = MyFrame('linear-hor') 
        lvGrad = MyFrame('linear-ver')
        ldGrad = MyFrame('linear-dia')
        qGradA = MyFrame('qradial-a')
        qGradB = MyFrame('qradial-b')
        cGrad =  MyFrame('conical')
        layout.addWidget(lhGrad, 0, 0)
        layout.addWidget(lvGrad, 0, 1)
        layout.addWidget(ldGrad, 0, 2)
        layout.addWidget(qGradA, 1, 0)
        layout.addWidget(qGradB, 1, 1)
        layout.addWidget(cGrad, 1, 2)
        
        self.setLayout(layout)
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DemoGradient()
    window.show()
    sys.exit(app.exec())

运行结果如下图：

本文知识点

• QGradient类与QBrush结合使用以指定渐变填充。
• 三种渐变方式，线性渐变，径向渐变和圆锥形渐变。
• 渐变的三种扩散方式 填充扩散(Pad Spread), 反射扩散(Reflect Spread)和重复扩散(Repeat Spread)。

前一篇： 实战PyQt5: 116-画刷类QBrush

喜欢的人，请多多关注，评论，收藏，点赞，和转发。