绘图

PyQt5绘图系统能渲染矢量图像、位图图像和轮廓字体文本。一般会使用在修改或者提高现有组件的功能,或者创建自己的组件。使用PyQt5的绘图API进行操作。

绘图由paintEvent()方法完成,绘图的代码要放在QPainter对象的begin()end()方法之间。是低级接口。

文本涂鸦

我们从画一些Unicode文本开始。

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PyQt5 tutorial
  5. In this example, we draw text in Russian Cylliric.
  6. Author: Jan Bodnar
  7. Website: zetcode.com
  8. Last edited: August 2017
  9. """
  10. import sys
  11. from PyQt5.QtWidgets import QWidget, QApplication
  12. from PyQt5.QtGui import QPainter, QColor, QFont
  13. from PyQt5.QtCore import Qt
  14. class Example(QWidget):
  15. def __init__(self):
  16. super().__init__()
  17. self.initUI()
  18. def initUI(self):
  19. self.text = "Лев Николаевич Толстой\nАнна Каренина"
  20. self.setGeometry(300, 300, 280, 170)
  21. self.setWindowTitle('Drawing text')
  22. self.show()
  23. def paintEvent(self, event):
  24. qp = QPainter()
  25. qp.begin(self)
  26. self.drawText(event, qp)
  27. qp.end()
  28. def drawText(self, event, qp):
  29. qp.setPen(QColor(168, 34, 3))
  30. qp.setFont(QFont('Decorative', 10))
  31. qp.drawText(event.rect(), Qt.AlignCenter, self.text)
  32. if __name__ == '__main__':
  33. app = QApplication(sys.argv)
  34. ex = Example()
  35. sys.exit(app.exec_())

写了一些文本上下居中对齐的俄罗斯Cylliric语言的文字。

  1. def paintEvent(self, event):
  2. ...

在绘画事件内完成绘画动作。

  1. qp = QPainter()
  2. qp.begin(self)
  3. self.drawText(event, qp)
  4. qp.end()

QPainter是低级的绘画类。所有的绘画动作都在这个类的begin()end()方法之间完成,绘画动作都封装在drawText()内部了。

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

为文字绘画定义了笔和字体。

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

drawText()方法在窗口里绘制文本,rect()方法返回要更新的矩形区域。

程序展示:

drawing text

点的绘画

点是最简单的绘画了。

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PyQt5 tutorial
  5. In the example, we draw randomly 1000 red points
  6. on the window.
  7. Author: Jan Bodnar
  8. Website: zetcode.com
  9. Last edited: August 2017
  10. """
  11. from PyQt5.QtWidgets import QWidget, QApplication
  12. from PyQt5.QtGui import QPainter
  13. from PyQt5.QtCore import Qt
  14. import sys, random
  15. class Example(QWidget):
  16. def __init__(self):
  17. super().__init__()
  18. self.initUI()
  19. def initUI(self):
  20. self.setGeometry(300, 300, 300, 190)
  21. self.setWindowTitle('Points')
  22. self.show()
  23. def paintEvent(self, e):
  24. qp = QPainter()
  25. qp.begin(self)
  26. self.drawPoints(qp)
  27. qp.end()
  28. def drawPoints(self, qp):
  29. qp.setPen(Qt.red)
  30. size = self.size()
  31. for i in range(1000):
  32. x = random.randint(1, size.width()-1)
  33. y = random.randint(1, size.height()-1)
  34. qp.drawPoint(x, y)
  35. if __name__ == '__main__':
  36. app = QApplication(sys.argv)
  37. ex = Example()
  38. sys.exit(app.exec_())

我们在窗口里随机的画出了1000个点。

  1. qp.setPen(Qt.red)

设置笔的颜色为红色,使用的是预定义好的颜色。

  1. size = self.size()

每次更改窗口大小,都会产生绘画事件,从size()方法里获得当前窗口的大小,然后把产生的点随机的分配到窗口的所有位置上。

  1. qp.drawPoint(x, y)

drawPoint()方法绘图。

程序展示:

points

颜色

颜色是一个物体显示的RGB的混合色。RBG值的范围是0~255。我们有很多方式去定义一个颜色,最常见的方式就是RGB和16进制表示法,也可以使用RGBA,增加了一个透明度的选项,透明度值的范围是0~1,0代表完全透明。

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PyQt5 tutorial
  5. This example draws three rectangles in three
  6. #different colours.
  7. Author: Jan Bodnar
  8. Website: zetcode.com
  9. Last edited: August 2017
  10. """
  11. from PyQt5.QtWidgets import QWidget, QApplication
  12. from PyQt5.QtGui import QPainter, QColor, QBrush
  13. import sys
  14. class Example(QWidget):
  15. def __init__(self):
  16. super().__init__()
  17. self.initUI()
  18. def initUI(self):
  19. self.setGeometry(300, 300, 350, 100)
  20. self.setWindowTitle('Colours')
  21. self.show()
  22. def paintEvent(self, e):
  23. qp = QPainter()
  24. qp.begin(self)
  25. self.drawRectangles(qp)
  26. qp.end()
  27. def drawRectangles(self, qp):
  28. col = QColor(0, 0, 0)
  29. col.setNamedColor('#d4d4d4')
  30. qp.setPen(col)
  31. qp.setBrush(QColor(200, 0, 0))
  32. qp.drawRect(10, 15, 90, 60)
  33. qp.setBrush(QColor(255, 80, 0, 160))
  34. qp.drawRect(130, 15, 90, 60)
  35. qp.setBrush(QColor(25, 0, 90, 200))
  36. qp.drawRect(250, 15, 90, 60)
  37. if __name__ == '__main__':
  38. app = QApplication(sys.argv)
  39. ex = Example()
  40. sys.exit(app.exec_())

我们画出了三个颜色的矩形。

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

使用16进制的方式定义一个颜色。

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

定义了一个笔刷,并画出了一个矩形。笔刷是用来画一个物体的背景。drawRect()有四个参数,分别是矩形的x、y、w、h。 然后用笔刷和矩形进行绘画。

程序展示:

colours

QPen

QPen是基本的绘画对象,能用来画直线、曲线、矩形框、椭圆、多边形和其他形状。

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PyQt5 tutorial
  5. In this example we draw 6 lines using
  6. different pen styles.
  7. Author: Jan Bodnar
  8. Website: zetcode.com
  9. Last edited: August 2017
  10. """
  11. from PyQt5.QtWidgets import QWidget, QApplication
  12. from PyQt5.QtGui import QPainter, QPen
  13. from PyQt5.QtCore import Qt
  14. import sys
  15. class Example(QWidget):
  16. def __init__(self):
  17. super().__init__()
  18. self.initUI()
  19. def initUI(self):
  20. self.setGeometry(300, 300, 280, 270)
  21. self.setWindowTitle('Pen styles')
  22. self.show()
  23. def paintEvent(self, e):
  24. qp = QPainter()
  25. qp.begin(self)
  26. self.drawLines(qp)
  27. qp.end()
  28. def drawLines(self, qp):
  29. pen = QPen(Qt.black, 2, Qt.SolidLine)
  30. qp.setPen(pen)
  31. qp.drawLine(20, 40, 250, 40)
  32. pen.setStyle(Qt.DashLine)
  33. qp.setPen(pen)
  34. qp.drawLine(20, 80, 250, 80)
  35. pen.setStyle(Qt.DashDotLine)
  36. qp.setPen(pen)
  37. qp.drawLine(20, 120, 250, 120)
  38. pen.setStyle(Qt.DotLine)
  39. qp.setPen(pen)
  40. qp.drawLine(20, 160, 250, 160)
  41. pen.setStyle(Qt.DashDotDotLine)
  42. qp.setPen(pen)
  43. qp.drawLine(20, 200, 250, 200)
  44. pen.setStyle(Qt.CustomDashLine)
  45. pen.setDashPattern([1, 4, 5, 4])
  46. qp.setPen(pen)
  47. qp.drawLine(20, 240, 250, 240)
  48. if __name__ == '__main__':
  49. app = QApplication(sys.argv)
  50. ex = Example()
  51. sys.exit(app.exec_())

在这个例子里,我们用不同的笔画了6条直线。PyQt5有五个预定义的笔,另外一个笔的样式使我们自定义的。

  1. pen = QPen(Qt.black, 2, Qt.SolidLine)

新建一个QPen对象,设置颜色黑色,宽2像素,这样就能看出来各个笔样式的区别。Qt.SolidLine是预定义样式的一种。

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

这里我们自定义了一个笔的样式。定义为Qt.CustomDashLine然后调用setDashPattern()方法。数字列表是线的样式,要求必须是个数为奇数,奇数位定义的是空格,偶数位为线长,数字越大,空格或线长越大,比如本例的就是1像素线,4像素空格,5像素线,4像素空格。

程序展示:

pen styles

QBrush

QBrush也是图像的一个基本元素。是用来填充一些物体的背景图用的,比如矩形,椭圆,多边形等。有三种类型:预定义、渐变和纹理。

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PyQt5 tutorial
  5. This example draws nine rectangles in different
  6. brush styles.
  7. Author: Jan Bodnar
  8. Website: zetcode.com
  9. Last edited: August 2017
  10. """
  11. from PyQt5.QtWidgets import QWidget, QApplication
  12. from PyQt5.QtGui import QPainter, QBrush
  13. from PyQt5.QtCore import Qt
  14. import sys
  15. class Example(QWidget):
  16. def __init__(self):
  17. super().__init__()
  18. self.initUI()
  19. def initUI(self):
  20. self.setGeometry(300, 300, 355, 280)
  21. self.setWindowTitle('Brushes')
  22. self.show()
  23. def paintEvent(self, e):
  24. qp = QPainter()
  25. qp.begin(self)
  26. self.drawBrushes(qp)
  27. qp.end()
  28. def drawBrushes(self, qp):
  29. brush = QBrush(Qt.SolidPattern)
  30. qp.setBrush(brush)
  31. qp.drawRect(10, 15, 90, 60)
  32. brush.setStyle(Qt.Dense1Pattern)
  33. qp.setBrush(brush)
  34. qp.drawRect(130, 15, 90, 60)
  35. brush.setStyle(Qt.Dense2Pattern)
  36. qp.setBrush(brush)
  37. qp.drawRect(250, 15, 90, 60)
  38. brush.setStyle(Qt.DiagCrossPattern)
  39. qp.setBrush(brush)
  40. qp.drawRect(10, 105, 90, 60)
  41. brush.setStyle(Qt.Dense5Pattern)
  42. qp.setBrush(brush)
  43. qp.drawRect(130, 105, 90, 60)
  44. brush.setStyle(Qt.Dense6Pattern)
  45. qp.setBrush(brush)
  46. qp.drawRect(250, 105, 90, 60)
  47. brush.setStyle(Qt.HorPattern)
  48. qp.setBrush(brush)
  49. qp.drawRect(10, 195, 90, 60)
  50. brush.setStyle(Qt.VerPattern)
  51. qp.setBrush(brush)
  52. qp.drawRect(130, 195, 90, 60)
  53. brush.setStyle(Qt.BDiagPattern)
  54. qp.setBrush(brush)
  55. qp.drawRect(250, 195, 90, 60)
  56. if __name__ == '__main__':
  57. app = QApplication(sys.argv)
  58. ex = Example()
  59. sys.exit(app.exec_())

我们画了9个不同的矩形。

  1. brush = QBrush(Qt.SolidPattern)
  2. qp.setBrush(brush)
  3. qp.drawRect(10, 15, 90, 60)

创建了一个笔刷对象,添加笔刷样式,然后调用drawRect()方法画图。

程序展示:

brushes

贝塞尔曲线

噩梦可以使用PyQt5的QPainterPath创建贝塞尔曲线。绘画路径是由许多构建图形的对象,具体表现就是一些线的形状,比如矩形,椭圆,线和曲线。

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PyQt5 tutorial
  5. This program draws a Bézier curve with
  6. QPainterPath.
  7. Author: Jan Bodnar
  8. Website: zetcode.com
  9. Last edited: August 2017
  10. """
  11. from PyQt5.QtWidgets import QWidget, QApplication
  12. from PyQt5.QtGui import QPainter, QPainterPath
  13. from PyQt5.QtCore import Qt
  14. import sys
  15. class Example(QWidget):
  16. def __init__(self):
  17. super().__init__()
  18. self.initUI()
  19. def initUI(self):
  20. self.setGeometry(300, 300, 380, 250)
  21. self.setWindowTitle('Bézier curve')
  22. self.show()
  23. def paintEvent(self, e):
  24. qp = QPainter()
  25. qp.begin(self)
  26. qp.setRenderHint(QPainter.Antialiasing)
  27. self.drawBezierCurve(qp)
  28. qp.end()
  29. def drawBezierCurve(self, qp):
  30. path = QPainterPath()
  31. path.moveTo(30, 30)
  32. path.cubicTo(30, 30, 200, 350, 350, 30)
  33. qp.drawPath(path)
  34. if __name__ == '__main__':
  35. app = QApplication(sys.argv)
  36. ex = Example()
  37. sys.exit(app.exec_())

这个示例中,我们画出了一个贝塞尔曲线。

  1. path = QPainterPath()
  2. path.moveTo(30, 30)
  3. path.cubicTo(30, 30, 200, 350, 350, 30)

QPainterPath路径创建贝塞尔曲线。使用cubicTo()方法生成,分别需要三个点:起始点,控制点和终止点。

  1. qp.drawPath(path)

drawPath()绘制最后的图像。

程序展示:

Bézier curve