原文: http://zetcode.com/gui/pysidetutorial/drawing/

当我们要更改或增强现有的小部件时,使用绘图。 或者,如果我们要从头开始创建自定义窗口小部件。 要进行绘制,我们使用 PySide 工具箱提供的绘制 API。

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

绘制文字

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

  1. #!/usr/bin/python
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PySide tutorial
  5. In this example, we draw text in Russian azbuka.
  6. author: Jan Bodnar
  7. website: zetcode.com
  8. last edited: August 2011
  9. """
  10. import sys
  11. from PySide import QtGui, QtCore
  12. class Example(QtGui.QWidget):
  13. def __init__(self):
  14. super(Example, self).__init__()
  15. self.initUI()
  16. def initUI(self):
  17. self.text = u'\u041b\u0435\u0432 \u041d\u0438\u043a\u043e\u043b\u0430\
  18. \u0435\u0432\u0438\u0447 \u0422\u043e\u043b\u0441\u0442\u043e\u0439: \n\
  19. \u0410\u043d\u043d\u0430 \u041a\u0430\u0440\u0435\u043d\u0438\u043d\u0430'
  20. self.setGeometry(300, 300, 280, 170)
  21. self.setWindowTitle('Draw text')
  22. self.show()
  23. def paintEvent(self, event):
  24. qp = QtGui.QPainter()
  25. qp.begin(self)
  26. self.drawText(event, qp)
  27. qp.end()
  28. def drawText(self, event, qp):
  29. qp.setPen(QtGui.QColor(168, 34, 3))
  30. qp.setFont(QtGui.QFont('Decorative', 10))
  31. qp.drawText(event.rect(), QtCore.Qt.AlignCenter, self.text)
  32. def main():
  33. app = QtGui.QApplication(sys.argv)
  34. ex = Example()
  35. sys.exit(app.exec_())
  36. if __name__ == '__main__':
  37. main()

在我们的示例中,我们在西里尔字母中绘制了一些文本。 文本在垂直和水平方向上对齐。

  1. def paintEvent(self, event):

绘制是在绘画事件内完成的。

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

QtGui.QPainter类负责所有低级绘图。 所有绘图方法都在begin()end()方法之间。 实际绘图将委托给drawText()方法。

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

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

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

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

在 PySide 中绘图 - 图1

图:绘制文本

绘制点

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

  1. #!/usr/bin/python
  2. # -*- coding: utf-8 -*-
  3. """
  4. ZetCode PySide 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 2011
  10. """
  11. import sys, random
  12. from PySide import QtGui, QtCore
  13. class Example(QtGui.QWidget):
  14. def __init__(self):
  15. super(Example, self).__init__()
  16. self.initUI()
  17. def initUI(self):
  18. self.setGeometry(300, 300, 280, 170)
  19. self.setWindowTitle('Points')
  20. self.show()
  21. def paintEvent(self, e):
  22. qp = QtGui.QPainter()
  23. qp.begin(self)
  24. self.drawPoints(qp)
  25. qp.end()
  26. def drawPoints(self, qp):
  27. qp.setPen(QtCore.Qt.red)
  28. size = self.size()
  29. for i in range(1000):
  30. x = random.randint(1, size.width()-1)
  31. y = random.randint(1, size.height()-1)
  32. qp.drawPoint(x, y)
  33. def main():
  34. app = QtGui.QApplication(sys.argv)
  35. ex = Example()
  36. sys.exit(app.exec_())
  37. if __name__ == '__main__':
  38. main()

在我们的示例中,我们在客户区域上随机绘制了 1000 个红点。

  1. qp.setPen(QtCore.Qt.red)

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

  1. size = self.size()

每次我们调整窗口大小时,都会生成一个绘制事件。 我们使用size()方法获得窗口的当前大小。 我们使用窗口的大小将点分布在整个窗口的客户区域中。

  1. qp.drawPoint(x, y)

我们用drawPoint()方法画点。

在 PySide 中绘图 - 图2

图:点

色彩

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

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

在我们的示例中,我们绘制了 3 个彩色矩形。

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

在这里,我们使用十六进制符号定义颜色。

  1. qp.setPen(color)

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

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

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

在 PySide 中绘图 - 图3

图:颜色

QtGui.QPen

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

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

在我们的示例中,我们绘制了六条线。 线条以六种不同的笔样式绘制。 有五种预定义的笔样式。 我们还可以创建自定义笔样式。 最后一行是使用自定义笔样式绘制的。

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

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

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

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

在 PySide 中绘图 - 图4

图:笔的样式

QtGui.QBrush

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

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

在我们的示例中,我们使用 9 种不同的画笔样式绘制 9 个不同的矩形。

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

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

在 PySide 中绘图 - 图5

图:笔刷

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