1. PyQt5简介
PyQt5是一种基于Python语言的GUI库,它允许程序员使用Python编写图形用户界面。PyQt5是Qt(一个跨平台的应用程序和UI框架)的Python 绑定库。
Qt使用C++编写,主要用于开发GUI应用程序。PyQt5将Qt库导入Python模块,从而使Python程序员可以使用Qt的各种功能和工具,来创建GUI应用程序。
PyQt5中包含了许多控件,如QLabel,QPushButton等。本文将使用它的绘图类QPainter和QPen来创建简单绘图板。
2. 绘图板GUI设计
我们将创建一个简单的绘图板程序,它将包含以下组件:
窗口
画布
画笔颜色选择器
画笔粗细选择器
清除按钮
我们将使用PyQt5来创建GUI界面,绘制各个组件。
2.1 创建窗口
我们创建一个MainWindow类,继承自QtWidgets.QMainWindow。
from PyQt5 import QtWidgets
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.setGeometry(300, 100, 800, 600)
self.setWindowTitle('Simple Paint')
self.show()
在上面的代码中,我们创建了一个MainWindow类,并使用setGeometry来设置窗口的位置和大小。然后设置了窗口标题,最后通过show()来显示窗口。
2.2 创建画布
我们将一个QFrame作为我们的画布,用于绘制。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# 窗口设置
self.setGeometry(300, 100, 800, 600)
self.setWindowTitle('Simple Paint')
# 创建画布
self.canvas = QtWidgets.QFrame(self)
self.canvas.setGeometry(50, 50, 700, 500)
self.canvas.setStyleSheet('background-color:white;')
self.show()
在上面的代码中,我们使用QFrame()函数创建了一个画布,并将其添加到了我们的MainWindow窗口中。
2.3 创建画笔颜色选择器和画笔粗细选择器
我们将使用QComboBox控件创建颜色选择器和粗细选择器。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# 窗口设置
self.setGeometry(300, 100, 800, 600)
self.setWindowTitle('Simple Paint')
# 创建画布
self.canvas = QtWidgets.QFrame(self)
self.canvas.setGeometry(50, 50, 700, 500)
self.canvas.setStyleSheet('background-color:white;')
# 创建工具栏
toolbar = QtWidgets.QToolBar(self)
self.addToolBar(toolbar)
# 添加颜色选择器到工具栏
self.colorCombo = QtWidgets.QComboBox(toolbar)
self.colorCombo.addItem('')
self.colorCombo.addItem('red', 'red')
self.colorCombo.addItem('blue', 'blue')
self.colorCombo.addItem('green', 'green')
self.colorCombo.activated[str].connect(self.changeColor)
toolbar.addWidget(self.colorCombo)
# 添加粗细选择器到工具栏
self.penSizeCombo = QtWidgets.QComboBox(toolbar)
self.penSizeCombo.addItem('1', '1')
self.penSizeCombo.addItem('2', '2')
self.penSizeCombo.addItem('3', '3')
self.penSizeCombo.activated[str].connect(self.changePenSize)
toolbar.addWidget(self.penSizeCombo)
self.show()
在上面的代码中,我们使用QToolBar()函数创建了工具栏,并使用QComboBox()函数创建了颜色选择器和粗细选择器。然后添加选择器到工具栏,并使用activated信号连接它们的槽函数。最后调用show()函数。
2.4 创建清除按钮
我们将使用QPushButton控件创建一个按钮,点击该按钮将清除画布上的所有内容。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# 窗口设置
self.setGeometry(300, 100, 800, 600)
self.setWindowTitle('Simple Paint')
# 创建画布
self.canvas = QtWidgets.QFrame(self)
self.canvas.setGeometry(50, 50, 700, 500)
self.canvas.setStyleSheet('background-color:white;')
# 创建工具栏
toolbar = QtWidgets.QToolBar(self)
self.addToolBar(toolbar)
# 添加颜色选择器到工具栏
self.colorCombo = QtWidgets.QComboBox(toolbar)
self.colorCombo.addItem('')
self.colorCombo.addItem('red', 'red')
self.colorCombo.addItem('blue', 'blue')
self.colorCombo.addItem('green', 'green')
self.colorCombo.activated[str].connect(self.changeColor)
toolbar.addWidget(self.colorCombo)
# 添加粗细选择器到工具栏
self.penSizeCombo = QtWidgets.QComboBox(toolbar)
self.penSizeCombo.addItem('1', '1')
self.penSizeCombo.addItem('2', '2')
self.penSizeCombo.addItem('3', '3')
self.penSizeCombo.activated[str].connect(self.changePenSize)
toolbar.addWidget(self.penSizeCombo)
# 添加清除按钮到工具栏
clearButton = QtWidgets.QPushButton('清除', toolbar)
clearButton.clicked.connect(self.clearCanvas)
toolbar.addWidget(clearButton)
self.show()
在上面的代码中,我们使用QPushButton()函数创建了一个“清除”按钮,并将它添加到了工具栏。清除按钮的clicked信号连接了清除画布的槽函数。
3. 使用QPainter绘制图形
现在我们已经创建了GUI界面,接下来我们将使用QPainter和QPen类来绘制各种图形。
3.1 定义画笔
在我们可以开始绘制之前,我们需要定义QPen对象。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# ......
# 定义画笔
self.pen = QtGui.QPen(QtGui.QColor('black'), 1, QtCore.Qt.SolidLine)
self.show()
在上面的代码中,我们使用QColor()函数创建了一个黑色颜色对象,使用了SolidLine样式的QPen(提供了多种线条样式,如实线、虚线、点线、划线等),并设置了画笔的宽度为1个像素。
3.2 监控画布的鼠标事件
我们将在画布上检测鼠标事件,如鼠标单击和鼠标移动,用于绘制图形。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# ......
# 初始化鼠标位置
self.lastPoint = QtCore.QPoint()
# 监控画布的鼠标事件
self.canvas.mousePressEvent = self.mousePress
self.canvas.mouseMoveEvent = self.mouseMove
self.show()
def mousePress(self, event):
self.lastPoint = event.pos()
def mouseMove(self, event):
painter = QtGui.QPainter(self.canvas.pixmap())
painter.setPen(self.pen)
painter.drawLine(self.lastPoint, event.pos())
self.lastPoint = event.pos()
self.canvas.update()
在上面的代码中,我们初始化了鼠标位置,并用self.lastPoint变量存储了上一个点的位置。
我们还在MainWindow类中定义了两个方法:mousePress()和mouseMove(),分别对应鼠标按下和鼠标移动事件。我们将这些事件设置为我们的画布对象的回调函数。
在 mousePress() 中,我们简单地将事件位置存储在self.lastPoint中。
在 mouseMove() 中,我们创建了一个QPainter对象,并设置Pen。然后我们使用drawLine() 方法绘制一条线段,连接上一个点和当前鼠标位置。最后我们使用canvas.update()方法刷新画布。
3.3 改变线条颜色
我们需要实现一个changeColor()槽函数,以响应颜色选择器的变化。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# ......
# 添加颜色选择器到工具栏
self.colorCombo = QtWidgets.QComboBox(toolbar)
self.colorCombo.addItem('')
self.colorCombo.addItem('red', 'red')
self.colorCombo.addItem('blue', 'blue')
self.colorCombo.addItem('green', 'green')
self.colorCombo.activated[str].connect(self.changeColor)
toolbar.addWidget(self.colorCombo)
# ......
def changeColor(self, color):
if color == '':
self.pen.setColor(QtGui.QColor('black'))
else:
self.pen.setColor(QtGui.QColor(color))
在上面的代码中,我们创建了 changeColor() 槽函数,用于响应颜色选择器的变化。我们调用了QColor()函数,将字符串类型的参数转换为QColor类型的参数,并将其设置为我们的画笔颜色。
3.4 改变线条粗细
我们还需要一个changePenSize()槽函数,以响应线条粗细选择器的变化。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# ......
# 添加粗细选择器到工具栏
self.penSizeCombo = QtWidgets.QComboBox(toolbar)
self.penSizeCombo.addItem('1', '1')
self.penSizeCombo.addItem('2', '2')
self.penSizeCombo.addItem('3', '3')
self.penSizeCombo.activated[str].connect(self.changePenSize)
toolbar.addWidget(self.penSizeCombo)
# ......
def changePenSize(self, size):
self.pen.setWidth(int(size))
在上面的代码中,我们创建了changePenSize()槽函数,它获取粗细选择器中的值并将其设置为画笔宽度。
3.5 清除画布上的内容
我们还需要一个clearCanvas()槽函数,以清除画布上的图形。
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
# ......
# 添加清除按钮到工具栏
clearButton = QtWidgets.QPushButton('清除', toolbar)
clearButton.clicked.connect(self.clearCanvas)
toolbar.addWidget(clearButton)
# ......
def clearCanvas(self):
pixmap = QtGui.QPixmap(self.canvas.size())
pixmap.fill(QtCore.Qt.white)
self.canvas.setPixmap(pixmap)
在上面的代码中,我们创建了clearCanvas()槽函数,并使用 fill() 方法将画布的背景填充为白色。然后我们使用 setPixmap() 方法将 pixmap 设置为 canvas 对象的 pixmap。
4. 结束语
在本文中,我们创建了一个使用PyQt5生成的绘图板的示例。我们用鼠标画出了线条,并添加了颜色选择器,线条粗细选择器和清除按钮。我们了解了如何使用QPainter和QPen对象进行绘图,以及如何在GUI中使用信号和槽功能。