# 绘图 PyQt5绘图系统能渲染矢量图像、位图图像和轮廓字体文本。一般会使用在修改或者提高现有组件的功能,或者创建自己的组件。使用PyQt5的绘图API进行操作。 绘图由`paintEvent()`方法完成,绘图的代码要放在`QPainter`对象的`begin()`和`end()`方法之间。是低级接口。 ## 文本涂鸦 我们从画一些Unicode文本开始。 ``` #!/usr/bin/python3 # -*- coding: utf-8 -*- """ ZetCode PyQt5 tutorial In this example, we draw text in Russian azbuka. author: Jan Bodnar website: zetcode.com last edited: September 2015 """ import sys from PyQt5.QtWidgets import QWidget, QApplication from PyQt5.QtGui import QPainter, QColor, QFont from PyQt5.QtCore import Qt class Example(QWidget): def __init__(self): super().__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 = QPainter() qp.begin(self) self.drawText(event, qp) qp.end() def drawText(self, event, qp): qp.setPen(QColor(168, 34, 3)) qp.setFont(QFont('Decorative', 10)) qp.drawText(event.rect(), Qt.AlignCenter, self.text) if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 写了一些文本上下居中对齐的俄罗斯Azbuka语言的文字。 ``` def paintEvent(self, event): ... ``` 在绘画事件内完成绘画动作。 ``` qp = QPainter() qp.begin(self) self.drawText(event, qp) qp.end() ``` `QPainter`是低级的绘画类。所有的绘画动作都在这个类的`begin()`和`end()`方法之间完成,绘画动作都封装在`drawText()`内部了。 ``` qp.setPen(QColor(168, 34, 3)) qp.setFont(QFont('Decorative', 10)) ``` 为文字绘画定义了笔和字体。 ``` qp.drawText(event.rect(), Qt.AlignCenter, self.text) ``` `drawText()`方法在窗口里绘制文本,`rect()`方法返回要更新的矩形区域。 ![drawing text](./images/9-drawtext.png) ## 点 点是最简单的绘画了。 ``` #!/usr/bin/python3 # -*- coding: utf-8 -*- """ ZetCode PyQt5 tutorial In the example, we draw randomly 1000 red points on the window. author: Jan Bodnar website: zetcode.com last edited: January 2015 """ import sys, random from PyQt5.QtWidgets import QWidget, QApplication from PyQt5.QtGui import QPainter, QColor, QPen from PyQt5.QtCore import Qt class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setGeometry(300, 300, 280, 170) self.setWindowTitle('Points') self.show() def paintEvent(self, e): qp = QPainter() qp.begin(self) self.drawPoints(qp) qp.end() def drawPoints(self, qp): qp.setPen(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) if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 我们在窗口里随机的画出了1000个点。 ``` qp.setPen(Qt.red) ``` 设置笔的颜色为红色,使用的是预定义好的颜色。 ``` size = self.size() ``` 每次更改窗口大小,都会产生绘画事件,从`size()`方法里获得当前窗口的大小,然后把产生的点随机的分配到窗口的所有位置上。 ``` qp.drawPoint(x, y) ``` `drawPoint()`方法绘图。 ![points](./images/9-points.png) # 颜色 颜色是一个物体显示的RGB的混合色。RBG值的范围是0~255。我们有很多方式去定义一个颜色,最常见的方式就是RGB和16进制表示法,也可以使用RGBA,增加了一个透明度的选项,透明度值的范围是0~1,0代表完全透明。 ``` #!/usr/bin/python3 # -*- coding: utf-8 -*- """ ZetCode PyQt5 tutorial This example draws three rectangles in three #different colours. author: Jan Bodnar website: zetcode.com last edited: January 2015 """ import sys from PyQt5.QtWidgets import QWidget, QApplication from PyQt5.QtGui import QPainter, QColor, QBrush class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setGeometry(300, 300, 350, 100) self.setWindowTitle('Colours') self.show() def paintEvent(self, e): qp = QPainter() qp.begin(self) self.drawRectangles(qp) qp.end() def drawRectangles(self, qp): col = QColor(0, 0, 0) col.setNamedColor('#d4d4d4') qp.setPen(col) qp.setBrush(QColor(200, 0, 0)) qp.drawRect(10, 15, 90, 60) qp.setBrush(QColor(255, 80, 0, 160)) qp.drawRect(130, 15, 90, 60) qp.setBrush(QColor(25, 0, 90, 200)) qp.drawRect(250, 15, 90, 60) if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 我们画出了三个颜色的矩形。 ``` color = QColor(0, 0, 0) color.setNamedColor('#d4d4d4') ``` 使用16进制的方式定义一个颜色。 ``` qp.setBrush(QColor(200, 0, 0)) qp.drawRect(10, 15, 90, 60) ``` 定义了一个笔刷,并画出了一个矩形。笔刷是用来画一个物体的背景。`drawRect()`有四个参数,分别是矩形的x、y、w、h。 然后用笔刷和矩形进行绘画。 ![colours](./images/9-colours.png) ## QPen `QPen`是基本的绘画对象,能用来画直线、曲线、矩形框、椭圆、多边形和其他形状。 ``` #!/usr/bin/python3 # -*- coding: utf-8 -*- """ ZetCode PyQt5 tutorial In this example we draw 6 lines using different pen styles. author: Jan Bodnar website: zetcode.com last edited: January 2015 """ import sys from PyQt5.QtWidgets import QWidget, QApplication from PyQt5.QtGui import QPainter, QColor, QPen from PyQt5.QtCore import Qt class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setGeometry(300, 300, 280, 270) self.setWindowTitle('Pen styles') self.show() def paintEvent(self, e): qp = QPainter() qp.begin(self) self.drawLines(qp) qp.end() def drawLines(self, qp): pen = QPen(Qt.black, 2, Qt.SolidLine) qp.setPen(pen) qp.drawLine(20, 40, 250, 40) pen.setStyle(Qt.DashLine) qp.setPen(pen) qp.drawLine(20, 80, 250, 80) pen.setStyle(Qt.DashDotLine) qp.setPen(pen) qp.drawLine(20, 120, 250, 120) pen.setStyle(Qt.DotLine) qp.setPen(pen) qp.drawLine(20, 160, 250, 160) pen.setStyle(Qt.DashDotDotLine) qp.setPen(pen) qp.drawLine(20, 200, 250, 200) pen.setStyle(Qt.CustomDashLine) pen.setDashPattern([1, 4, 5, 4]) qp.setPen(pen) qp.drawLine(20, 240, 250, 240) if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 在这个例子里,我们用不同的笔画了6条直线。PyQt5有五个预定义的笔,另外一个笔的样式使我们自定义的。 ``` pen = QPen(Qt.black, 2, Qt.SolidLine) ``` 新建一个`QPen`对象,设置颜色黑色,宽2像素,这样就能看出来各个笔样式的区别。`Qt.SolidLine`是预定义样式的一种。 ``` pen.setStyle(Qt.CustomDashLine) pen.setDashPattern([1, 4, 5, 4]) qp.setPen(pen) ``` 这里我们自定义了一个笔的样式。定义为`Qt.CustomDashLine`然后调用`setDashPattern()`方法。数字列表是线的样式,要求必须是个数为奇数,奇数位定义的是空格,偶数位为线长,数字越大,空格或线长越大,比如本例的就是1像素线,4像素空格,5像素线,4像素空格。 ![pen styles](./images/9-penstyles.png) ## QBrush `QBrush`也是图像的一个基本元素。是用来填充一些物体的背景图用的,比如矩形,椭圆,多边形等。有三种类型:预定义、渐变和纹理。 ``` #!/usr/bin/python3 # -*- coding: utf-8 -*- """ ZetCode PyQt5 tutorial This example draws 9 rectangles in different brush styles. author: Jan Bodnar website: zetcode.com last edited: July 2016 """ import sys from PyQt5.QtWidgets import QWidget, QApplication from PyQt5.QtGui import QPainter, QBrush from PyQt5.QtCore import Qt class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setGeometry(300, 300, 355, 280) self.setWindowTitle('Brushes') self.show() def paintEvent(self, e): qp = QPainter() qp.begin(self) self.drawBrushes(qp) qp.end() def drawBrushes(self, qp): brush = QBrush(Qt.SolidPattern) qp.setBrush(brush) qp.drawRect(10, 15, 90, 60) brush.setStyle(Qt.Dense1Pattern) qp.setBrush(brush) qp.drawRect(130, 15, 90, 60) brush.setStyle(Qt.Dense2Pattern) qp.setBrush(brush) qp.drawRect(250, 15, 90, 60) brush.setStyle(Qt.DiagCrossPattern) qp.setBrush(brush) qp.drawRect(10, 105, 90, 60) brush.setStyle(Qt.Dense5Pattern) qp.setBrush(brush) qp.drawRect(130, 105, 90, 60) brush.setStyle(Qt.Dense6Pattern) qp.setBrush(brush) qp.drawRect(250, 105, 90, 60) brush.setStyle(Qt.HorPattern) qp.setBrush(brush) qp.drawRect(10, 195, 90, 60) brush.setStyle(Qt.VerPattern) qp.setBrush(brush) qp.drawRect(130, 195, 90, 60) brush.setStyle(Qt.BDiagPattern) qp.setBrush(brush) qp.drawRect(250, 195, 90, 60) if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 我们画了9个不同的矩形。 ``` brush = QBrush(Qt.SolidPattern) qp.setBrush(brush) qp.drawRect(10, 15, 90, 60) ``` 创建了一个笔刷对象,添加笔刷样式,然后调用`drawRect()`方法画图。 ![brushes](./images/9-brushes.png)