PyQt5 - 创建绘画应用程序

在本教程中，我们将学习如何使用 PyQt5 创建绘制应用程序。我们将通过一个简单的例子来了解如何使用 PyQt5 创建一个绘画程序。该程序将使用 Qt 绘画框架，允许用户在画布上绘制几何图形。

前置要求

• Python 3.x
• PyQt5 库

安装 PyQt5

可以使用 pip 来安装 PyQt5。

pip install PyQt5

如果你使用的是 Linux 操作系统，则可能需要安装一些附加的软件包。这些软件包将在安装 PyQt5 时自动安装。在 Ubuntu 16.04 中，可以使用以下命令安装 PyQt5 和必要的软件包：

sudo apt-get install python3-pyqt5 python3-pyqt5.qtsvg

创建主窗口

我们将首先创建一个主窗口。该窗口将包含两个部分：一个用于绘画的画布和一个用于设置绘画参数的区域。

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


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        # 设置窗口标题
        self.setWindowTitle('绘画应用')

        # 设置窗口尺寸
        self.resize(800, 600)

        # 创建一个包含画布和设置区域的主窗口部件
        widget = QWidget()

        # 创建一个垂直布局，并将其添加到主窗口部件中
        layout = QVBoxLayout()
        widget.setLayout(layout)

        # 将主窗口部件设置为中心部件
        self.setCentralWidget(widget)

        # 创建画布，并将其添加到布局中
        self.canvas = Canvas()
        layout.addWidget(self.canvas)

        # 创建设置区域，并将其添加到布局中
        self.settings = Settings()
        layout.addWidget(self.settings)


class Canvas(QWidget):
    def __init__(self):
        super().__init__()

        # 设置画布背景颜色
        self.setAutoFillBackground(True)
        p = self.palette()
        p.setColor(self.backgroundRole(), Qt.white)
        self.setPalette(p)

    def paintEvent(self, event):
        # 在画布上绘制图形
        qp = QPainter(self)

        pen = QPen(QColor(0, 0, 0), 2)
        qp.setPen(pen)

        qp.drawRect(10, 10, 200, 200)


class Settings(QWidget):
    def __init__(self):
        super().__init__()
        
        # TODO - 创建设置区域

绘制图形

现在我们已经有了一个带有画布的窗口，我们将了解如何在画布上绘制图形。我们将在 paintEvent 方法中绘制绘图图形。

class Canvas(QWidget):
    def __init__(self):
        super().__init__()

        # 设置画布背景颜色
        self.setAutoFillBackground(True)
        p = self.palette()
        p.setColor(self.backgroundRole(), Qt.white)
        self.setPalette(p)

    def paintEvent(self, event):
        # 在画布上绘制图形
        qp = QPainter(self)

        pen = QPen(QColor(0, 0, 0), 2)
        qp.setPen(pen)

        qp.drawRect(10, 10, 200, 200)

在 paintEvent 方法中，我们创建了一个 QPainter 对象，并使用 setPen 方法设置了线条的颜色和宽度。随后，我们使用 drawRect 方法在画布上绘制一个矩形。现在可以运行程序并查看结果了！

编写设置区域

现在我们已经有了一个可以在画布上绘制图形的窗口，我们将学习如何编写一个可以设置绘图参数的区域。该区域将允许用户选择颜色、线条宽度等绘图参数。

class Settings(QWidget):
    def __init__(self):
        super().__init__()
        
        # 创建颜色选择器
        self.color_picker = ColorPicker()
        
        # 创建线条宽度选择器
        self.line_width = LineWidth()

        # 创建一个垂直布局，并将按钮添加到其中
        layout = QVBoxLayout()
        layout.addWidget(self.color_picker)
        layout.addWidget(self.line_width)
        
        # 将布局设置为窗口部件的主布局
        self.setLayout(layout)

class ColorPicker(QWidget):
    def __init__(self):
        super().__init__()

        # 创建颜色选择器按钮
        self.button = QPushButton('选择颜色')
        self.button.clicked.connect(self.show_color_dialog)

        # 创建一个水平布局，并将颜色选择器按钮添加到其中
        layout = QHBoxLayout()
        layout.addWidget(self.button)

        # 将布局设置为窗口部件的主布局
        self.setLayout(layout)

    def show_color_dialog(self):
        # 显示颜色对话框
        color = QColorDialog.getColor()

        # 如果用户选择了颜色，则将按钮的背景颜色更改为所选颜色
        if color.isValid():
            self.button.setStyleSheet('background-color: %s;' % color.name())

class LineWidth(QWidget):
    def __init__(self):
        super().__init__()

        # 创建线条宽度选择器
        self.slider = QSlider(Qt.Horizontal)
        self.slider.setRange(1, 10)
        self.slider.setValue(2)
        self.slider.setTickInterval(1)
        self.slider.setTickPosition(QSlider.TicksBelow)

        # 创建一个标签，并将其添加到水平布局中
        label = QLabel('线条宽度：')
        layout = QHBoxLayout()
        layout.addWidget(label)
        layout.addWidget(self.slider)

        # 将布局设置为窗口部件的主布局
        self.setLayout(layout)

在 Settings 类的构造函数中，我们创建了两个设置选项卡页：一个用于选择颜色，另一个用于选择线条宽度。对于每个选项卡页，我们创建了一个单独的窗口部件，并将其添加到垂直布局中。完成后，我们将垂直布局设置为窗口部件的主布局。

ColorPicker 类使用 QPushButton 创建一个颜色选择器按钮。当按钮被单击时，我们显示一个颜色对话框。在对话框关闭后，我们将按钮的背景颜色更改为所选颜色。

LineWidth 类使用 QSlider 创建一个线条宽度选择器。我们还使用 QLabel 创建了一个标签，并将其添加到水平布局中。完成后，我们将水平布局设置为窗口部件的主布局。

完成

我们已经完成了一个简单的绘画应用程序。该程序允许用户在画布上绘制几何图形，并选择颜色和线条宽度等绘图参数。你可以根据自己的需要对该应用程序进行修改和扩展。

完整代码如下：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QHBoxLayout, QPushButton, QSlider, QLabel, QColorDialog
from PyQt5.QtGui import QPainter, QPen, QColor
from PyQt5.QtCore import Qt


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        # 设置窗口标题
        self.setWindowTitle('绘画应用')

        # 设置窗口尺寸
        self.resize(800, 600)

        # 创建一个包含画布和设置区域的主窗口部件
        widget = QWidget()

        # 创建一个垂直布局，并将其添加到主窗口部件中
        layout = QVBoxLayout()
        widget.setLayout(layout)

        # 将主窗口部件设置为中心部件
        self.setCentralWidget(widget)

        # 创建画布，并将其添加到布局中
        self.canvas = Canvas()
        layout.addWidget(self.canvas)

        # 创建设置区域，并将其添加到布局中
        self.settings = Settings()
        layout.addWidget(self.settings)


class Canvas(QWidget):
    def __init__(self):
        super().__init__()

        # 设置画布背景颜色
        self.setAutoFillBackground(True)
        p = self.palette()
        p.setColor(self.backgroundRole(), Qt.white)
        self.setPalette(p)

    def paintEvent(self, event):
        # 在画布上绘制图形
        qp = QPainter(self)

        pen = QPen(QColor(0, 0, 0), 2)
        qp.setPen(pen)

        qp.drawRect(10, 10, 200, 200)


class Settings(QWidget):
    def __init__(self):
        super().__init__()
        
        # 创建颜色选择器
        self.color_picker = ColorPicker()
        
        # 创建线条宽度选择器
        self.line_width = LineWidth()

        # 创建一个垂直布局，并将按钮添加到其中
        layout = QVBoxLayout()
        layout.addWidget(self.color_picker)
        layout.addWidget(self.line_width)
        
        # 将布局设置为窗口部件的主布局
        self.setLayout(layout)

class ColorPicker(QWidget):
    def __init__(self):
        super().__init__()

        # 创建颜色选择器按钮
        self.button = QPushButton('选择颜色')
        self.button.clicked.connect(self.show_color_dialog)

        # 创建一个水平布局，并将颜色选择器按钮添加到其中
        layout = QHBoxLayout()
        layout.addWidget(self.button)

        # 将布局设置为窗口部件的主布局
        self.setLayout(layout)

    def show_color_dialog(self):
        # 显示颜色对话框
        color = QColorDialog.getColor()

        # 如果用户选择了颜色，则将按钮的背景颜色更改为所选颜色
        if color.isValid():
            self.button.setStyleSheet('background-color: %s;' % color.name())

class LineWidth(QWidget):
    def __init__(self):
        super().__init__()

        # 创建线条宽度选择器
        self.slider = QSlider(Qt.Horizontal)
        self.slider.setRange(1, 10)
        self.slider.setValue(2)
        self.slider.setTickInterval(1)
        self.slider.setTickPosition(QSlider.TicksBelow)

        # 创建一个标签，并将其添加到水平布局中
        label = QLabel('线条宽度：')
        layout = QHBoxLayout()
        layout.addWidget(label)
        layout.addWidget(self.slider)

        # 将布局设置为窗口部件的主布局
        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

结束