148-QPainter和Graphics/View绘图-Graphics/View绘图- 代理控件和图形控件

代理控件和图形控件

场景中除了可以直接添加图项外,也可以添加常用的控件,甚至是对话框.场景中的控仙也可以进行布局。

代理控件QGraphicsProxyWidget

前面介绍过,通过场景的 addWidget(QWidget,wFlags:Qt.WindowFlags)方法可以把一个控件或窗口加人到场景中,并返回代理类控件 QGraphicsProxyWidget。

代理类控件可以将QWidget类控件加入到场景中,可以先创建QGraphicsProxyWidget 控件,然后用场景的addItem(QGraphicsProxyWidget)方法把代理控件加人到场景中。

代理控件QGraphicsProxyWidget 继承自图形控件 QGraphicsWidget,它们之间的继承关系如图所示。

用QGraphicsProxyWidget 类创建代理实例对象的方法如下,其中parent 是QGraphicsItem的实例

from PySide6.QtWidgets import QGraphicsProxyWidget

QGraphicsProxyWidget(parent: Union[PySide6.QtWidgets.QGraphicsItem,NoneType]= None,wFlags: PySide6.QtCore.Qt.WindowType = Default(Qt.WindowFlags))-> None 

QGraphicsProxyWidget 中添加控件的方法是 setWidget(QWidget),QWidget 不能有WA_PaintOnScreen 属性,也不能是包含其他程序的控件,例如QOpenGLWidget 和QAxWidget控件。

用widget()方法可以获取代理控件中的控件。代理控件和其内部包合的控件在状态方面保持同步,例如可见性、激活状态、字体、调色板、光标形状、窗口标题、几何尺寸、布局方向等

下面是一个代理控件的实例,程序运行界面如图所示。单击"选择图片文件"按钮弹出打开文件对话框,选择图片文件后显示图片,图片所在的窗口用代理控件定义成图项程序中对图片所在的图项进行了错切变换。

# -*- coding: UTF-8 -*-
# File date: Hi_2023/3/9 0:00
# File_name: 02-代理控件QGraphicsProxyWidget实例.py.py


import sys,os
from PySide6.QtWidgets import QApplication,QWidget,QVBoxLayout,QGraphicsProxyWidget,QGraphicsScene,QGraphicsView,QFrame,QPushButton,QFileDialog
from PySide6.QtGui import QPainter,QTransform,QPixmap
from PySide6.QtCore import Qt.QRect


class myFrame(QFrame):  # 创建QFrame的子类
    def __init__(self,parent=None):
        super().__init__(parent)

        self.fileName =""

    def paintEvent(self,event):  # 重写painterEvent,完成绘图
        if os.path.exists(self.fileName):
            pix = QPixmap(self.fileName)
            painter = QPainter(self)
            rect = QRect(0,0,self.width(),self.height())
            painter.drawPixmap(rect,pix)

        super().paintEvent(event)


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

        self.resize(600,400)

        self.frame = myFrame()# 自定义QFrame的实例
        self.button = QPushButton("选择图片文件")# 按钮实例
        self.button.clicked.connect(self.button_clicked)# 按钮信号与槽函数的连接
        v = QVBoxLayout(self)# 布局
        v.addWidget(self.frame)
        v.addWidget(self.button)

    # 按钮的槽函数
    def button_clicked(self):
        fileName,filter = QFileDialog.getOpenFileName(self,caption="打开图片",dir="../../Resources",filter="图片(*.png *.bmp *.jpg *.jpeg)")
        self.frame.fileName = fileName
        self.frame.update()


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

        pix = myPixmapWidget()# 绘图窗口
        view = QGraphicsView()# 视图控件
        scene = QGraphicsScene()# 场景
        view.setScene(scene)# 在视图中设置场景
        proxy = QGraphicsProxyWidget(None,Qt.Window)# 创建代理控件
        proxy.setWidget(pix)# 代理控件设置控件
        proxy.setTransform(QTransform().shear(1,-0.5))# 错切变换
        scene.addItem(proxy)# 在场景中添加图项
        v = QVBoxLayout(self)# 布局
        v.addWidget(view)


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

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

图形控件QGraphicsWidget

图形控件 QGraphicsWidget 的继承关系如图所示,

它继承自QGraphicsObject 和QGraphicsLayoutItem,间接继承自 QObject和 QGraphicsItem,因此它可以直接添加到场景中。

QGraphicsWidget 是图形控件的基类,继承QGraphicsWidget 的类有

• QGraphicsProxyWidget
• QtCharts.QChart
• QtCharts.QLegend
• QtCharts.QPolarChart

QWidget 继承自 QObject 和QPaintDevice。QGraphicsWidget和QWidget 有很多相同点但也有些不同点。

在 QGraphicsWidget 中可以放置其他代理控件和布局,因此QGraphicsWidget 可以作为场景中的容器使用。用QGraphicsWidget类创建图形控件的方法如下,其中 parent是QGraphicsItem 的实例。

from PySide6.QtWidgets import QGraphicsWidget

QGraphicsWidget(parent: Union[PySide6.QtWidgets.QGraphicsItem,NoneType]= None,
                wFlags: PySide6.QtCore.Qt.WindowType = Default(Qt.WindowFlags))-> None 

图形控件QGraphicsWidget 的常用方法如表所示,其中:

• 用setAttribute(attribute:Qt.WidgetAttribute,on: bool=True)方法设置窗口的属性,参数 attribute可以取:
  • Qt.WA_SetLayoutDirection
  • Qt.WA_RightToLeft、
  • Qt.WA_SetStyle、
  • Qt.WAResized
  • Qt.WA_SetPalette
  • Qt.WA_SetFont
  • Qt.WAWindowPropagation。
• 图形控件QGraphicsWidget 中通常需要用设置布局方法 setLayout(layout;QGraphicsLayout),在布局中添加图项或代理控件。

QGraphicsWidget 的信号有

• geometryChanged()和 layoutChanged(),当几何尺寸和布局发生改变时发送信号
• 另外QGraphicsWidget 从QGraphicsObject 继承的信号有
  • opacityChanged()
  • parentChanged()
  • rotationChanged()
  • scaleChanged()
  • visibleChanged()
  • xChanged()
  • yChanged()
  • zChanged()

图形控件的布局

图形控件可以添加布局,图形控件的布局有 3种分别为QGrphicsLinearLayout、QGraphicsGridLayout 和 QGraphicsAnchorLayout;它们都继承自QGraphicsLayoutItem。

线性布局QGraphicsLinearLayout

线性布局 QGraphicsLinearLayout 类似于 QHLayoutBox或 QVLayoutBox,布局内的图形控件线性分布。

用QGraphicsLinearLayout创建线性布局的方法如下,其中parent是QGraphicsLayoutItem 的实例;Qt.Orientation 确定布局的方法可以取 QHorizontal或Qt.Vertical,默认是水平方向。

from PySide6.QtWidgets import QGraphicsLinearLayout

QGraphicsLinearLayout(orientation: PySide6.QtCore.Qt.Orientation,parent: Union[PySide6.QtWidgets.QGraphicsLayoutItem,NoneType]= None)-> None
QGraphicsLinearLayout(parent: Union[PySide6.QtWidgets.QGraphicsLayoutItem,NoneType]= None)-> None 

QGraphicsLinearLayout 的主要方法如表所示。

• 用图形控件的setLayout(QGraphicsLayout)方法可以添加二个布局,
• 用addItem(QGraphicsLayoutItem)方法可以添加图形控件,
• 用insertItem(index,QGraphicsLayoutItem)方法在指定索引处插人图形控件,
• 用addStretch(stretch=1)方法可以添加空间拉伸系数,
• 用insertStretch(index,stretch=1)方法插人空间拉伸系数
• 用setStretchFactor(QGraphicsLayoutItem,int)方法设置图项或布局的拉伸系数,
• 用setOrientation(QtOrientation)方法设置布局的方向。

下面的程序在 QGraphicsWidget 中添加线性布局在布局中添加了两个 QLabel和两个 QPushButton。

# -*- coding: UTF-8 -*-
# File date: Hi_2023/3/9 23:10
# File_name: 02-线性布局QGraphicsLinearLayout.py


import sys
from PySide6.QtWidgets import QApplication,QWidget,QVBoxLayout,QGraphicsProxyWidget,QGraphicsScene,QGraphicsView,QPushButton,QGraphicsWidget,QGraphicsLinearLayout,QLabel
from PySide6.QtCore import Qt


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

        view = QGraphicsView()# 视图控件
        scene = QGraphicsScene()# 场景
        view.setScene(scene)# 视图中设置场景

        v = QVBoxLayout(self)# 布局
        v.addWidget(view)

        widget = QGraphicsWidget()
        widget.setFlags(QGraphicsWidget.ItemIsMovable | QGraphicsWidget.ItemIsSelectable)
        scene.addItem(widget)
        linear = QGraphicsLinearLayout(Qt.Vertical,widget)# 线性竖直布局
        label1 = QLabel("MyLabel 1")
        label2 = QLabel("MyIabel2")
        button1 = QPushButton("MyPushbutton 1")
        button2 = QPushButton("MyPushbutton 2")

        p1 = QGraphicsProxyWidget()
        p1.setWidget(label1)

        p2 = QGraphicsProxyWidget()
        p2.setWidget(label2)

        p3 = QGraphicsProxyWidget()
        p3.setWidget(button1)

        p4 = QGraphicsProxyWidget()
        p4.setWidget(button2)

        linear.addItem(p1)
        linear.addItem(p2)
        linear.addItem(p3)
        linear.addItem(p4)

        linear.setSpacing(10)
        linear.setStretchFactor(p3,1)
        linear.setStretchFactor(p4,2)


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

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

格栅布局 QGraphicsGridLayout

格栅布局QGraphicsGridLayout与 QGridLayout 类似,由多行和多列构成,一个图形控件可以占用一个节点,也可以占用多行和多列。

用QGraphicsGridLayout创建格棚市局的方法如下所示,其中parent是 QGraphicsLayoutItem 的实例或图形控件。

from PySide6.QtWidgets import QGraphicsGridLayout

QGraphicsGridLayout(parent: Union[PySide6.QtWidgets.QGraphicsLayoutItem,NoneType]= None)-> None

QGraphicsGridLayout 的常用方法如表示:

可以添加和移除图形控件及布局,可以设置列宽度、行高度、列之间的间隙和行之间的间隙,及行或列的拉伸系数。

锚点布局QGraphicsAnchorLayout

锚点布局可以设置两个图形控件之间的相对位置,可以是两个边对齐,也可以是两个点对齐。

用QGraphicsAnchorLayout 创建铺点布局的方法如下,其中参数 parent 是QGraphicsLayoutItem 实例。

from PySide6.QtWidgets import QGraphicsAnchorLayout

QGraphicsAnchorLayout(parent: Union[PySide6.QtWidgets.QGraphicsLayoutItem,NoneType]= None)-> None

QGraphicsAnchorLayout 的方法中

• 用addAnchor(firstItem;QGraphicsLayoutItem;firstEdge: Qt.AnchorPoint,secondItem;QGraphicsLayoutItem,secondEdge: Qt.AnchorPoint)方法将第 1个图形控件的某个边与第 2个图形控件的某个边对齐,其中Q.AnchorPoint 可以取:
  • Qt.AnchorLeft
  • Qt.AnchorHorizontalCenter
  • Qt.AnchorRight
  • Qt.AnchorTop
  • Qt.AnchorVerticalCenter
  • Qt.AnchorBottom
• 用addCornerAnchors(firstItem:QGraphicsLayoutItem,first(orner: Qt.(Corner,secondltem; QGraphicsLayoutItem,secondCorner :Qt.Corner)方法可以让第1个控件的某个角点与第2个控件的某个角点对齐,其中QCorner可以取:
  • Qt.TopLeftCorner
  • Qt.TopRightCorner
  • Qt.BottomLeftCorner
  • Qt.BottomRightCorner;
• 用addAnchors(firstItem; QGraphicslayoutItem,secondltem: QGraphicsLayoutItemorientations:Qt Orientations=Qt.Horizontal QtVertical)方法可以使两个控件在某个方向上尺寸相等。
• 另外用setHorizontalSpacing(spacing; float)setVerticalSpacing(spacing:[loat)或 setSpacing(spacing:[loat)方法可以设置控件之间在水平和竖直方向的间距,
• 用itemAt(index:int)方法可以取图形控件,用removeAt(index:int)方法可以移除图形控件,用count()方法可以获取图形控件的数量

图形效果

在图项和视图控件的视口之间可以添加渲染通道,实现对图项显示效果的特殊设置。

图形效果 QGraphicsEffect 类是图形效果的基类,图形效果类有:

• QGraphicsBlurEffect(模糊效果)
• QGraphicsColorizeEffect(变色效果)
• QGraphicsDropShadowEffect(阴影效果)
• QGraphicsOpacityEffect(透明效果)

用图项的 setGraphicsEffect(QGraphicsEffect)方法设置图项的图形效果。

创建这 4 种效果的方法如下所示,其中 parent 是指继承自 QObject 的实例。

from PySide6.QtWidgets import QGraphicsBlurEffect,QGraphicsColorizeEffect,QGraphicsDropShadowEffect,QGraphicsOpacityEffect

QGraphicsBlurEffect(parent: Union[PySide6.QtCore.QObject,NoneType]= None)-> None
QGraphicsColorizeEffect(parent: Union[PySide6.QtCore.QObject,NoneType]= None)-> None
QGraphicsDropShadowEffect(parent: Union[PySide6.QtCore.QObject,NoneType]= None)-> None
QGraphicsOpacityEffect(parent: Union[PySide6.QtCore.QObject,NoneType]= None)-> None

图形效果的常用方法

QGraphicsBlurEffect、 QGraphicsColorizeEffect、QGraphicsDropShadowEffect 和QGraphicsOpacityEffect 的常用方法如表所示

• QGraphicsBlurEffect

• QGraphicsColorizeEffect

• QGraphicsDropShadowEffect

• QGraphicsOpacityEffect

主要方法介绍如下

• 模糊效果是使图项变得模糊不清,可以隐藏一些细节。在一个图项失去焦点,或将注意力移到其他图项上时可以使用模糊效果。

  • QGraphicsBlurEffect 的模糊效果是通过设置模糊半径和模糊提示实现的。

  • QGraphicsBlurEffect 主要有槽函数setBlurRadius(blurRadius;float),setBlurHints(QGraphicsBlurEffect,BlurHint).

  • 其中模糊半径默认为5个像聚,模糊半径越大图像越模糊;

  • 模糊提示QGraphicsBlurEffect,BlurHint 可以取:

    • QGraphicsBlurEffect.PerformanceHint(主要考虑染性能)
    • QGraphicsBlurEffect,QualityHint(主要考虑染质量)
    • QGraphicsBlurEffect,AnimationHint(用于染动画)。

• 变色效果是用另外一种颜色给图项着色

  • QGraphicsColorizeEffect 的变色效果是通过设置新颜色和着色强度来实现的,默认的着色是浅蓝色(QColor(0,0,192))
  • QGraphicsColorizeEffeet 主要有槽函数 setColor(Union[QColor,Qt.GlobalColor,str])和 setStrength(strength: float)

• 阴影效果能给图项增加立体效果

  • QGraphicsDropShadowEffect 的阴影效果需要设置背景色、模糊半径和阴影的偏移量。默认的阴影颜色是灰色(QColor(63,63,63.180)),默认的模糊半径是 1,偏移量是8个像素,方向是右下
  • QGraphicsDropShadowEffect 主要有槽函数
    • setBlurRadius(blurRadius float)
    • setColor(Union[QColor,Qt.GlobalColor,str])
    • setOffset(dx: float,dy: float)
    • setOffset(ofs: Union[QPointF,QPoint])

• 透明效果可以使人看到图项背后的图形

  • QGraphicsOpacityEffect 的透明效果需要设置不透明度。
  • QGraphicsOpacityEffect 有函数:
    • setOpacity(opacity: float)
    • setOpacityMask(Union[QBrush,Qt.BrushStyle,Qt.GlobalColor,QColor.QGradient,QImage,QPixmap])
  • setOpacity(opacity:float)用于设置不透明度opacity 的值在 0.0~1.0之间,00表示完全透明,10表示完全不透明,默认值为0.7;
  • setOpacityMask()用于设置部分透明。

图形效果的信号

图形效果的信号如表所示