在 PySide 中绘图

最后修改于 2023 年 10 月 18 日

当我们想要更改或增强现有小部件时，或者当我们从头开始创建自定义小部件时，使用绘图。为了进行绘图，我们使用 PySide 工具包提供的绘图 API。

绘图在 paintEvent 方法中完成。绘图代码放置在 QtGui.QPainter 对象的 begin 和 end 方法之间。

绘制文本

我们首先在窗口客户区上绘制一些 Unicode 文本。

#!/usr/bin/python

"""
ZetCode PySide tutorial 

In this example, we draw text in Russian azbuka.

author: Jan Bodnar
website: zetcode.com
"""

import sys
from PySide import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.text = u'\u041b\u0435\u0432 \u041d\u0438\u043a\u043e\u043b\u0430\
\u0435\u0432\u0438\u0447 \u0422\u043e\u043b\u0441\u0442\u043e\u0439: \n\
\u0410\u043d\u043d\u0430 \u041a\u0430\u0440\u0435\u043d\u0438\u043d\u0430'

        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('Draw text')
        self.show()

    def paintEvent(self, event):

        qp = QtGui.QPainter()
        qp.begin(self)
        self.drawText(event, qp)
        qp.end()
        
    def drawText(self, event, qp):
      
        qp.setPen(QtGui.QColor(168, 34, 3))
        qp.setFont(QtGui.QFont('Decorative', 10))
        qp.drawText(event.rect(), QtCore.Qt.AlignCenter, self.text)        
                
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在我们的例子中，我们用 Azbuka 绘制一些文本。文本垂直和水平对齐。

def paintEvent(self, event):

绘图在 paint 事件中完成。

qp = QtGui.QPainter()
qp.begin(self)
self.drawText(event, qp)
qp.end()

QtGui.QPainter 类负责所有底层绘图。所有绘图方法都在 begin 和 end 方法之间进行。实际的绘图委托给 drawText 方法。

qp.setPen(QtGui.QColor(168, 34, 3))
qp.setFont(QtGui.QFont('Decorative', 10))

在这里我们定义了用于绘制文本的画笔和字体。

qp.drawText(event.rect(), QtCore.Qt.AlignCenter, self.text)

drawText 方法在窗口上绘制文本。paint 事件的 rect 方法返回需要更新的矩形。

绘制点

一个点是可以绘制的最简单的图形对象。它在窗口上是一个小点。

#!/usr/bin/python

"""
ZetCode PySide tutorial 

In the example, we draw randomly 1000 red points 
on the window.

author: Jan Bodnar
website: zetcode.com
"""

import sys, random
from PySide import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('Points')
        self.show()

    def paintEvent(self, e):

        qp = QtGui.QPainter()
        qp.begin(self)
        self.drawPoints(qp)
        qp.end()
        
    def drawPoints(self, qp):
      
        qp.setPen(QtCore.Qt.red)
        size = self.size()
        
        for i in range(1000):
            x = random.randint(1, size.width()-1)
            y = random.randint(1, size.height()-1)
            qp.drawPoint(x, y)     
                
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在我们的例子中，我们在客户区上随机绘制 1000 个红点。

qp.setPen(QtCore.Qt.red)

我们将画笔设置为红色。我们使用预定义的颜色常量。

size = self.size()

每次我们调整窗口大小时，都会生成一个 paint event。我们使用 size 方法获取窗口的当前大小。我们使用窗口的大小将点分布在窗口的整个客户端区域上。

qp.drawPoint(x, y)

我们使用 drawPoint 方法绘制点。

颜色

颜色是一个对象，表示红色、绿色和蓝色 (RGB) 强度值的组合。有效的 RGB 值为 0 到 255 之间。我们可以通过各种方式定义颜色。最常见的是 RGB 十进制值或十六进制值。我们还可以使用 RGBA 值，它代表红色、绿色、蓝色、alpha。这里我们添加了一些额外的信息，关于透明度。Alpha 值为 255 定义完全不透明，0 定义完全透明，例如颜色是不可见的。

#!/usr/bin/python

"""
ZetCode PySide tutorial 

This example draws three rectangles in three
different colors. 

author: Jan Bodnar
website: zetcode.com
"""

import sys
from PySide import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.setGeometry(300, 300, 350, 100)
        self.setWindowTitle('Colors')
        self.show()

    def paintEvent(self, e):

        qp = QtGui.QPainter()
        qp.begin(self)
        self.drawRectangles(qp)
        qp.end()
        
    def drawRectangles(self, qp):
      
        color = QtGui.QColor(0, 0, 0)
        color.setNamedColor('#d4d4d4')
        qp.setPen(color)

        qp.setBrush(QtGui.QColor(200, 0, 0))
        qp.drawRect(10, 15, 90, 60)

        qp.setBrush(QtGui.QColor(255, 80, 0, 160))
        qp.drawRect(130, 15, 90, 60)

        qp.setBrush(QtGui.QColor(25, 0, 90, 200))
        qp.drawRect(250, 15, 90, 60)
              
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在我们的例子中，我们绘制 3 个彩色矩形。

color = QtGui.QColor(0, 0, 0)
color.setNamedColor('#d4d4d4')

这里我们使用十六进制表示法定义颜色。

qp.setPen(color)

上面定义的颜色用于画笔，用于绘制形状的轮廓。

qp.setBrush(QtGui.QColor(200, 0, 0))
qp.drawRect(10, 15, 90, 60)

这里我们定义一个画刷并绘制一个矩形。一个 *画刷* 是一个基本的图形对象，用于绘制形状的背景。drawRect 方法接受四个参数。前两个是轴上的 x, y 值。第三个和第四个参数是矩形的宽度和高度。该方法使用当前画笔和当前画刷绘制一个矩形。

QtGui.QPen

QtGui.QPen 是一个基本的图形对象。它用于绘制线条、曲线和矩形、椭圆、多边形或其他形状的轮廓。

#!/usr/bin/python

"""
ZetCode PySide tutorial 

This example draws three rectangles in three
different colors. 

author: Jan Bodnar
website: zetcode.com
"""

import sys
from PySide import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.setGeometry(300, 300, 280, 270)
        self.setWindowTitle('Pen styles')
        self.show()

    def paintEvent(self, e):

        qp = QtGui.QPainter()
        qp.begin(self)
        self.drawLines(qp)
        qp.end()
        
    def drawLines(self, qp):
      
        pen = QtGui.QPen(QtCore.Qt.black, 2, QtCore.Qt.SolidLine)

        qp.setPen(pen)
        qp.drawLine(20, 40, 250, 40)

        pen.setStyle(QtCore.Qt.DashLine)
        qp.setPen(pen)
        qp.drawLine(20, 80, 250, 80)

        pen.setStyle(QtCore.Qt.DashDotLine)
        qp.setPen(pen)
        qp.drawLine(20, 120, 250, 120)

        pen.setStyle(QtCore.Qt.DotLine)
        qp.setPen(pen)
        qp.drawLine(20, 160, 250, 160)

        pen.setStyle(QtCore.Qt.DashDotDotLine)
        qp.setPen(pen)
        qp.drawLine(20, 200, 250, 200)

        pen.setStyle(QtCore.Qt.CustomDashLine)
        pen.setDashPattern([1, 4, 5, 4])
        qp.setPen(pen)
        qp.drawLine(20, 240, 250, 240)
              
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在我们的例子中，我们绘制六条线。这些线以六种不同的画笔样式绘制。有五种预定义的画笔样式。我们也可以创建自定义的画笔样式。最后一条线使用自定义画笔样式绘制。

pen = QtGui.QPen(QtCore.Qt.black, 2, QtCore.Qt.SolidLine)

我们创建一个 QtGui.QPen 对象。颜色是黑色。宽度设置为 2 像素，这样我们就可以看到画笔样式之间的差异。QtCore.Qt.SolidLine 是预定义的画笔样式之一。

pen.setStyle(QtCore.Qt.CustomDashLine)
pen.setDashPattern([1, 4, 5, 4])
qp.setPen(pen)

在这里我们定义一个自定义画笔样式。我们设置 QtCore.Qt.CustomDashLine 画笔样式并调用 setDashPattern 方法。数字列表定义了一个样式。数字的个数必须是偶数。奇数定义一个短划线，偶数定义一个空格。数字越大，空格或短划线越大。我们的模式是 1px 短划线 4px 空格 5px 短划线 4px 空格等等。

QtGui.QBrush

QtGui.QBrush 是一个基本的图形对象。它用于绘制图形形状的背景，例如矩形、椭圆或多边形。画刷可以有三种不同的类型。预定义的画刷、渐变或纹理图案。

#!/usr/bin/python

"""
ZetCode PySide tutorial 

This example draws 9 rectangles in different
brush styles.

author: Jan Bodnar
website: zetcode.com
"""

import sys
from PySide import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.setGeometry(300, 300, 355, 280)
        self.setWindowTitle('Brushes')
        self.show()

    def paintEvent(self, e):

        qp = QtGui.QPainter()
        qp.begin(self)
        self.drawBrushes(qp)
        qp.end()
        
    def drawBrushes(self, qp):
      
        brush = QtGui.QBrush(QtCore.Qt.SolidPattern)
        qp.setBrush(brush)
        qp.drawRect(10, 15, 90, 60)

        brush.setStyle(QtCore.Qt.Dense1Pattern)
        qp.setBrush(brush)
        qp.drawRect(130, 15, 90, 60)

        brush.setStyle(QtCore.Qt.Dense2Pattern)
        qp.setBrush(brush)
        qp.drawRect(250, 15, 90, 60)

        brush.setStyle(QtCore.Qt.Dense3Pattern)
        qp.setBrush(brush)
        qp.drawRect(10, 105, 90, 60)

        brush.setStyle(QtCore.Qt.DiagCrossPattern)
        qp.setBrush(brush)
        qp.drawRect(10, 105, 90, 60)

        brush.setStyle(QtCore.Qt.Dense5Pattern)
        qp.setBrush(brush)
        qp.drawRect(130, 105, 90, 60)

        brush.setStyle(QtCore.Qt.Dense6Pattern)
        qp.setBrush(brush)
        qp.drawRect(250, 105, 90, 60)

        brush.setStyle(QtCore.Qt.HorPattern)
        qp.setBrush(brush)
        qp.drawRect(10, 195, 90, 60)

        brush.setStyle(QtCore.Qt.VerPattern)
        qp.setBrush(brush)
        qp.drawRect(130, 195, 90, 60)

        brush.setStyle(QtCore.Qt.BDiagPattern)
        qp.setBrush(brush)
        qp.drawRect(250, 195, 90, 60)
              
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在我们的例子中，我们使用 9 种不同的画刷样式绘制了九个不同的矩形。

brush = QtGui.QBrush(QtCore.Qt.SolidPattern)
qp.setBrush(brush)
qp.drawRect(10, 15, 90, 60)

我们定义一个画刷对象。将其设置为绘图对象。并绘制矩形调用 drawRect 方法。这是图片上显示的第一个矩形。

在 PySide 教程的这一部分，我们做了一些基本的绘图。

电子书

在 PySide 中绘图

绘制文本

绘制点

颜色

QtGui.QPen

QtGui.QBrush