「生活可以更简单, 欢迎来到我的开源世界」
  1. QPainter
  2. The paintEvent method
  3. PyQt5 绘制文本
  4. PyQt5 绘制点
  5. PyQt5 颜色
  6. PyQt5 QPen
  7. PyQt5 QBrush
  8. 贝塞尔曲线
PyQt5 中的绘画板
2020-08-20
」 「

翻译自原文:Painting in PyQt5

翻译时间 2020 年 8 月 20 日

PyQt5 绘画系统能够渲染矢量图形、图像和基于字体的提纲文本。当我们想要更改或增强现有部件,或者我们从头开始创建自定义部件时,可能需要绘制。要进行绘图,我们使用 PyQt5 工具包提供的绘画 API。

QPainter

QPainter在部件和其他绘画设备上执行low-level绘画。它可以绘制从简单线条到复杂形状的所有内容。

The paintEvent method

绘画在paintEvent方法内完成。绘制代码放置在QPainter对象的beginend方法之间。它在小部件和其他油漆设备上执行低级绘画。

PyQt5 绘制文本

我们首先在窗口的工作区上绘制一些 Unicode 文本。

draw_text.py

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 = "Hello World\nHello World"

self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('Drawing 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('Monaco', 10))
qp.drawText(event.rect(), Qt.AlignCenter, self.text)


def main():

app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())


if __name__ == '__main__':
main()

在我们的示例中,我们绘制一些文本。文本垂直和水平对齐。

def paintEvent(self, event):
...

绘制在绘制事件中完成。

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

这个QPainter负责所有的低级绘画。所有的绘画方法都介于beginend方法之间。实际绘制委派给drawText方法。

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

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

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

drawText方法在窗口上绘制文本。绘制事件的rect方法返回需要更新的矩形。使用 Qt.AlignCenter,我们在两个维度中对齐文本。

image-20200820175256627

图:绘图文本

PyQt5 绘制点

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

draw_points.py

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter
from PyQt5.QtCore import Qt
import sys, random


class Example(QWidget):

def __init__(self):
super().__init__()

self.initUI()

def initUI(self):
self.setGeometry(300, 300, 300, 190)
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()

if size.height() <= 1 or size.height() <= 1:
return

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 = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())


if __name__ == '__main__':
main()

在我们的示例中,我们在窗口的工作区上随机绘制 1000 个红点。

qp.setPen(Qt.red)

我们把钢笔设置为红色。我们使用预定义的颜色常数Qt.red

size = self.size()

每次调整窗口大小时,将生成一个绘制事件。我们使用size()方法获取窗口的当前大小。我们使用窗口的大小将点分布到窗口的工作区。

qp.drawPoint(x, y) 

通过 drawPoint()方法画点。

image-20200820175628711

图:点

PyQt5 颜色

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

colours.py

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QColor, QBrush
import sys


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)


def main():
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())


if __name__ == '__main__':
main()

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

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

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

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

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

image-20200820180516295

图:颜色

PyQt5 QPen

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

pens.py

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QPen
from PyQt5.QtCore import Qt
import sys


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)


def main():
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())


if __name__ == '__main__':
main()

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

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 px 破折号, 4 px 空白, 5 px 破折号, 4 px 空白等.

image-20200820211021199

图:钢笔样式

PyQt5 QBrush

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

brushes.py

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QBrush
from PyQt5.QtCore import Qt
import sys


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)


def main():
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())


if __name__ == '__main__':
main()

在我们的示例中,我们绘制了九个不同的矩形。

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

我们定义画笔对象。我们把它设置为绘制器对象,然后通过调用drawRect方法绘制矩形。

image-20200820211145652

图:画笔

贝塞尔曲线

贝塞尔曲线是立方线。PyQt5 中的贝塞尔曲线可以使用QPainterPath创建。绘制器路径是由许多图形构建基块(如矩形、椭圆、线条和曲线)组成的对象。

bezier_curve.py

import sys

from PyQt5.QtGui import QPainter, QPainterPath
from PyQt5.QtWidgets import QWidget, QApplication


class Example(QWidget):

def __init__(self):
super().__init__()

self.initUI()

def initUI(self):
self.setGeometry(300, 300, 380, 250)
self.setWindowTitle('Bézier curve')
self.show()

def paintEvent(self, e):
qp = QPainter()
qp.begin(self)
qp.setRenderHint(QPainter.Antialiasing)
self.drawBezierCurve(qp)
qp.end()

def drawBezierCurve(self, qp):
path = QPainterPath()
path.moveTo(30, 30)
path.cubicTo(30, 30, 200, 350, 350, 30)

qp.drawPath(path)


def main():

app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())


if __name__ == '__main__':
main()

本示例绘制贝塞尔曲线。

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

我们创建带QPainterPath路径的贝塞尔曲线。曲线使用cubicTo()方法创建,该方法采用三个点:起点、控制点和终点。

qp.drawPath(path)

最后路径使用drawPath()方法绘制。

image-20200820211503379

图:贝塞尔曲线

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

<⇧>