133-QPainter和Graphics/View绘图-QPainter绘图-新变色QGradient的用法

最新推荐文章于 2023-09-13 16:27:03 发布

士别三日，当挖目相待

最新推荐文章于 2023-09-13 16:27:03 发布

阅读量541

点赞数 1

分类专栏： # pyside6 文章标签：开发语言 python 音视频前端

本文链接：https://blog.csdn.net/qq_40597070/article/details/131543188

版权

pyside6 专栏收录该内容

162 篇文章 32 订阅

订阅专栏

新变色QGradient的用法

在用画刷进行填充时,可以设置填充颜色为渐变色。QGradient类与QBrush结合使用来指定渐变填充。

所谓渐变色是指在两个不重合的点处分别设置不同的颜色,这两个点一个是起点,另一个是终点,这两个点之间的颜色从起点的颜色逐渐过渡到终点的颜色。

定义渐变色的类是 QGradient,渐变样式分为 3 种类型分别为

线性渐变 QLinearGradient
径向渐变QRadialGradient
圆渐变QConicalGradient

它们都继承自 QGradient 类,也会继承QGradient 类的属性和方法。这3种渐变的样式如图所示。

用QLinearGradient类创建线性渐变色的方法如下所示。线性渐变需要一个线性渐变矩形区域(起始和终止位置),参数用于确定这个矩形区域

from PySide6.QtGui import QLinearGradient

QLinearGradient(self)-> None
QLinearGradient(QLinearGradient: PySide6.QtGui.QLinearGradient)-> None
QLinearGradient(start: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element],finalStop: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element])-> None
QLinearGradient(xStart: float,yStart: float,xFinalStop: float,yFinalStop: flo None

gradient=QRadialGradient(50,50,50,50,50)
gradient.setColorAt(0,QColor.fromRgbF(0,1,0,1))
gradient.setColorAt(1,QColor.fromRgbF(0,0,0,0))
brush=QBrush(gradient)

用QRadialGradient类创建径向渐变色的方法如下。径渐变需要的几何参数如图所示,需要确定圆心位置、半径、焦点位置和焦点半径。径向渐变的构造函数中,

第 1个参数是圆心位置,可以用点或坐标定义;
第 2 个参数是半径;
第 3 个参数是焦点位置,可以用点或坐标定义;
第 4 个参数是焦点半径。

如果焦点设置到圆的外面则取圆上的点作为焦点。

from PySide6.QtGui import QRadialGradient

QRadialGradient(self)-> None
QRadialGradient(QRadialGradient: PySide6.QtGui.QRadialGradient)-> None
QRadialGradient(center: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element],centerRadius: float,focalPoint: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element],focalRadius: float)-> None
QRadialGradient(center: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element],radius: float)-> None
QRadialGradient(center: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element],radius: float,focalPoint: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element])-> None
QRadialGradient(cx: float,cy: float,centerRadius: float,fx: float,fy: float,focalRadius: float)-> None
QRadialGradient(cx: float,cy: float,radius: float)-> None
QRadialGradient(cx: float,cy: float,radius: float,fx: float,fy: float)-> None

用QConicalGradient 创建圆锥渐变色的方法如下所示。如图所示圆锥渐变需要的几何参数为圆心位置和起始角度a,角度必须在0~360之间,圆心位置可以用点或坐标来定义

images/qconicalgradient.png

from PySide6.QtGui import QConicalGradient

QConicalGradient(self)-> None
QConicalGradient(QConicalGradient: PySide6.QtGui.QConicalGradient)-> None
QConicalGradient(center: Union[PySide6.QtCore.QPointF,PySide6.QtCore.QPoint,PySide6.QtGui.QPainterPath.Element],startAngle: float)-> None
QConicalGradient(cx: float,cy: float,startAngle: float)-> None

QGradient,OLinearGradient,ORadialGradient 和 OConicalGradient 的常用方法

QGradient,QLinearGradient,QRadialGradient 和 QConicalGradient 的常用方法如表所示,主要方法介绍如下。

QLinearGradient,QRadialGradient 和 QConicalGradient 继承自QGradient,因此也会继承 QGradient 的方法

QGradient渐变类的常用方法及参数类型	说明
setCoordinateMode(QGradient.CoordinateMode)	设置坐标模式
setColorAt(pos:float,Union[QColor,Qt.GlobalColor,str])	设置颜色
setStops(stops:Sequence[Tuple[float,QColor]])	设置颜色
setInterpolationMode(mode: QGradient.InterpolationMode)	设置插值模式
setSpread(QGradient.Spread)	设置扩展方式
type()->QGradient.Type	获取类型

QLinearGradient渐变类的常用方法及参数类型	说明
setStart(Union[QPointF,QPoint,QPainterPath.Element])	设置起始点
setStart(x: float,y:float)	设置起始点
start()->QPointF	获取起始点
setFinalStop(Union[QPointF,QPoint,QPainterPath.Element])	设置终止点
setFinalStop(x: float,y: float)	设置终止点
finalStop()> QPointF	获取终止点

QRadialGradient渐变类的常用方法及参数类型	说明
setCenter(Union[QPointF,QPoint])	设置圆心
setCenter(x: float,y:float)	设置圆心
setRadius(radius: float)	设置半径
setCenterRadius(radius:float)	设置半径
setFocalPoint(Union[QPointF,QPoint])	设置焦点位置
setFocalPoint(float,float)	设置焦点位置
setFocalRadius(radius:float)	设置焦点半径

QConicalGradient渐变类的常用方法及参数类型	说明
setCenter(Union[QPointF,QPoint])	设置圆心
setCenter(x: float,y: float)	设置圆心
setAngle(float)	设置起始角度

在渐变区域内,可以在多个点设置颜色值,这些点之间的颜色值根据两侧的颜色来确定
- 在定义内部点的颜色值时,通常通过逻辑坐标来定义,渐变区域内的起始点的逻辑值是 0终止点的逻辑值是 1。
- 如果要在中间位置定义颜色,可以用setColorAt()方法来定义,例如 setColorAt(0.1,Qtblue)、setColorAt(0.4,Qt.yellow)和 setColorAt(0.6,Qtred)定义了3个位置处的颜色值;
- 也可以用setStops()方法一次定义多个颜色值,例如 setStops([(0.1,Qt.red),(0.5,Qt.blue)])定义了两个点处的颜色值。

用stops()方法可以获得逻辑坐标和颜色值。

用setCoordinateMode(QGradient,CoordinateMode)方法可以设置坐标的模式,参数 QGradient.CoordinateMode 的取值如表所示

QGradient.CoordinateMode 的取值	值	说明
QGradient.LogicalMode	0	逻辑方式,起始点为0,终止点为1。这是默认值这是默认模式。梯度坐标是指定的逻辑空间,就像对象坐标一样。
QGradient.ObjectMode	3	相对于绘图区域矩形边界的逻辑坐标,左上角的坐标是(0,0),右下角的坐标是(1,1) 在这种模式下,梯度坐标相对于正在绘制的对象的边界矩形,其中(0,0)在对象边界矩形的左上角,(1,1)在对象的右下角。该数值在第5.12季度增加。
QGradient.StretchToDeviceMode	1	相对于绘图设备矩形边界的逻辑坐标,左上角的坐标是(0,0),右下角的坐标是(1,1) 在此模式下,渐变坐标相对于绘制设备的边界矩形,其中(0,0)在绘制设备的左上角,(1,1)在绘制装置的右下角。
QGradient.ObjectBoundingMode	2	该方法与QGradient.ObjectMode 基本相同,除了 QBrush.translorm()应用于逻辑空间而不是物理空间此模式与ObjectMode相同,不同之处在于｛transform()｝｛brush transform｝(如果有)是相对于逻辑空间而不是对象空间应用的。此枚举值已弃用,不应在新代码中使用。

当设置的渐变区域小于填充区域时,渐变颜色可以扩展到渐变区域以外的空间。

扩展模式用setSpread(QGradient.Spread)方法定义,参数 QGradient.Spread 的取值如表所示。

QGradient.Spread的取值	值	说:明
Qgradient.PadSpread	0	该区域填充有最接近的停止颜色。这是默认设置。
Qgradient.RepeatSpread	2	重复渐变,梯度在梯度区域之外重复。
Qgradient.ReflectSpread	1	对称渐变,渐变会反映在渐变区域之外。

扩展模式不适合圆锥渐变,圆锥渐变没有固定的边界。

用setInterpolationMode(mode; QGradientInterpolationMode)方法设置渐变色内部的插值模式,参数可取 QGradient.ColorInterpolation 或 QGradient.ComponentInterpolation。

用type()方法可以获取渐变类型,返回值可能是:、

PySide6.QtGui.QGradient.Type

指定渐变的类型。

Constant	Description
QGradient.LinearGradient	在起点和终点之间插值颜色(QLinearGradient)。
QGradient.RadialGradient	在焦点和围绕焦点的圆上的端点之间插入颜色(QRadialGradient)。
QGradient.ConicalGradient	围绕中心点插入颜色(QConicalGradient)。
QGradient.NoGradient	不使用渐变。

QGradient、QLinearGradient,ORadialGradient 和 QConicalGradient 的应用实例

下面的程序将窗口工作区分成4个矩形,在这4个矩形中分别绘制线性渐变圆锥渐变和径向渐变,并应用扩展,程序运行界面如图所示

# -*- coding: UTF-8 -*-
# File date: Hi_2023/3/7 13:25
# File_name: 04- QGradient、QLinearGradient,ORadialGradient 和 OConicalGradient 的应用实例.py


import sys
from PySide6.QtWidgets import QApplication,QWidget
from PySide6.QtGui import QPen,QPainter,QBrush,QLinearGradient,QRadialGradient,QConicalGradient
from PySide6.QtCore import Qt.QPointF,QRectF


class MyWindow(QWidget):
    def __init__(self,parent=None):
        super().__init__(parent)

        self.resize(800,400)

    def paintEvent(self,event):
        painter = QPainter(self)

        pen = QPen()
        pen.setColor(Qt.darkBlue)
        pen.setStyle(Qt.DashLine)
        pen.setWidth(5)
        painter.setPen(pen)
        w = self.width()
        h = self.height()

        linear = QLinearGradient(QPointF(0,0),QPointF(w / 8,0))# 线性渐变
        linear.setStops([(0,Qt.red),(0.3,Qt.yellow),(0.6,Qt.green),(1,Qt.blue)])# 设置颜色

        linear.setSpread(QLinearGradient.ReflectSpread)# 镜像扩展
        brush1 = QBrush(linear)# 用线性渐变定义刷子
        painter.setBrush(brush1)
        painter.drawRect(QRectF(0,0,w / 2,h / 2))# 画矩形

        conical = QConicalGradient(QPointF(w / 4 * 3,h / 4),h / 6)
        conical.setAngle(60)# 起始角度
        conical.setColorAt(0,Qt.red)
        conical.setColorAt(1,Qt.yellow)
        brush2 = QBrush(conical)
        painter.setBrush(brush2)
        painter.drawRect(QRectF(w / 2,0,w / 2,h / 2))

        radial1 = QRadialGradient(QPointF(w / 4,h / 4 * 3),w / 8,QPointF(w / 4,h / 4 * 3)/ 15)
        radial1.setColorAt(0,Qt.red)
        radial1.setColorAt(0.5,Qt.yellow)
        radial1.setColorAt(1,Qt.blue)
        radial1.setSpread(QRadialGradient.RepeatSpread)
        brush3 = QBrush(radial1)
        painter.setBrush(brush3)
        painter.drawRect(QRectF(0,h / 2,w / 2,h / 2))

        radial2 = QRadialGradient(QPointF(w / 4 * 3,h / 4 * 3),w / 6,QPointF(w / 5 * 4,h / 5 * 4),w / 10)
        radial2.setColorAt(0,Qt.red)
        radial2.setColorAt(0.5,Qt.yellow)
        radial2.setColorAt(1,Qt.blue)
        radial2.setSpread(QRadialGradient.ReflectSpread)
        brush4 = QBrush(radial2)
        painter.setBrush(brush4)
        painter.drawRect(QRectF(w / 2,h / 2,w / 2,h / 2))


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MyWindow()

    win.show()
    sys.exit(app.exec())

梯度渐变效果QGradient

# -*- coding: UTF-8 -*-
# File date: Hi_2023/3/22 23:50
# File_name: 16-梯度渐变效果QGradient.py


import sys
from PySide6 import QtCore,QtGui,QtWidgets
from PySide6.QtCore import Qt
from PySide6.QtGui import(QPen,QPainter,QBrush,QLinearGradient,QConicalGradient,QRadialGradient)
from PySide6.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())

士别三日，当挖目相待

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
133-QPainter和Graphics/View绘图-QPainter绘图-新变色QGradient的用法

用setCoordinateMode(QGradient,CoordinateMode)方法可以设置坐标的模式,参数 QGradient.CoordinateMode 的取值如表所示。径向渐变的构造函数中,所谓渐变色是指在两个不重合的点处分别设置不同的颜色,这两个点一个是起点,另一个是终点,这两个点之间的颜色从起点的颜色逐渐过渡到终点的颜色。在渐变区域内,可以在多个点设置颜色值,这些点之间的颜色值根据两侧的颜色来确定。当设置的渐变区域小于填充区域时,渐变颜色可以扩展到渐变区域以外的空间。
复制链接

扫一扫