pyqt5画直线（UI界面）----计算机图形学

运行环境： ubantu18 + pycharm + pyqt5

运行效果：

大体思路：

左边界面为键入的直线信息，右边的界面显示画图效果。整个界面使用desiger 新建 Main Window 拖拽生成 UI界面。右边画图部分的实现使用paintEvent(QPaintEvent*)函数。由于paintEvent(QPaintEvent*)函数是QWidget类中的虚函数，用于ui的绘制，所以自定义一个类继承自 QWidget类来实现画图框架。

信号与自定义槽

按键效果为：点击 color 键，设定画笔为左边选择的颜色。点击 OK 键开始右边界面和直线的绘制。

为实现上面两个功能分别自定义两个函数 chosecolor（）和 drawline（）。

再将函数与按键的 clicked（点击事件）绑定。

self.pushButton.clicked.connect(self.chosecolor)
self.pushButton_2.clicked.connect(self.drawline)def chosecolor(self):print(self.comboBox.currentText())if self.comboBox.currentText()=='blue':self.color=Qt.blueelif self.comboBox.currentText()=='red':self.color=Qt.redelif self.comboBox.currentText()=='green':self.color=Qt.greendef drawline(self):x0 = int(self.lineEdit.text())y0 = int(self.lineEdit_2.text())x1 = int(self.lineEdit_3.text())y1 = int(self.lineEdit_4.text())。。。。。

坐标转换

PyQt5中的坐标体系：左上角为原点(0, 0)，向右为x轴正向，向下为y轴正向。

我们常用的坐标系：

因此需要进行坐标系的转换。

此外，由于 PyQt5 绘图中像素点间隔较小，为了便于能清晰的看出画线算法对像素点的选择，我这里采用 10 个像素点为 1 格。

size = self.size() # 获得窗口的尺寸。for i in points:x = 10 * i.x() + size.width() / 2.0   # size.width() ：窗口宽度y = size.height() - (10 * i.y() + size.height() / 2.0)  #size.height()：窗口高度painter.drawPoint(x, y)

显示子窗口

主窗口右边添加 gridLayout 布局，以放置自定义的画图框架。

self.gridLayoutWidget = QtWidgets.QWidget(self.centralwidget)self.gridLayoutWidget.setGeometry(QtCore.QRect(400, 0, 720, 720))self.gridLayoutWidget.setObjectName("gridLayoutWidget")self.gridLayout = QtWidgets.QGridLayout(self.gridLayoutWidget)self.gridLayout.setContentsMargins(0, 0, 0, 0)self.gridLayout.setObjectName("gridLayout")

实例化自定义绘图窗口为 demo ,再将其添加到 gridLayout 布局中，并显示。

        self.gridLayout.addWidget(self.demo)  # 添加子窗口self.demo.show()

直线显示覆盖

为了实现多次绘制直线的操作，在显示绘图窗口前，需要先检查 gridLayout 布局中是否已经存在上一次的绘图，如果有的话，需要进行移除。采用 removeWidget(self.demo) 进行不完全移除（即把存在的组件移除，但是其中的绘图内容还在。），实现多次绘图的显示。

if self.gridLayout.count():self.gridLayout.removeWidget(self.demo)

PS: 如需参考完整代码，请移步：https://download.csdn.net/download/qq_42185999/11834669 进行下载