利用pyqt5绘制图像

深藏阁楼爱情的钟 2022-05-19 05:49 441阅读 0赞

在pyqt界面上绘图是一个单独的技术点，需要重新开一节进行讲解。  
在pyqt上绘图主要分为两个步骤：  
1、定义你的绘图事件  
2、完成你的绘图函数

### 1、定义你的绘图事件 ###

定义绘图事件，这样做的目的是，每次需要更新界面的时候，可以通过`self.update()` 函数更新整个画面（鼠标在按钮上移动也会触发这个函数）：

def paintEvent(self, e):
        qp = QPainter()
        qp.begin(self)#开始作画
        
        self.draw(qp)#这里写你的画图函数，为了代码清晰，可以在这里定义一个函数
        
        qp.end() #停止作画

### 2、完成你的绘图函数 ###

想想你用windows画图板的时候的流程是不是这样的：①在工具栏选择一个工具（铅笔，刷子，橡皮等）；②调节工具的一些属性（比如铅笔的粗细，颜色，橡皮的大小）③在窗口里开启灵魂画手模式，自由创作。其实不管用什么作画，底层规律都是想通的，用代码绘图同样遵循这样一个流程。

#创建一支画笔并设置属性
    pen = QPen(Qt.red, 2, Qt.SolidLine)   #pen = QPen(【1】颜色, 【2】线条粗细, 【3】线条形式)
    qp.setPen(pen)
    qp.setBrush(QColor(255, 0, 0))
    
    #接着绘制各种图形
    self.drawEllipse(qp)  #绘制圆 椭圆
    qp.drawRect(左上角x轴，左上角y轴，长，宽)  ##绘制矩形
    qp.drawRoundedRect(左上角x轴，左上角y轴，长，宽,圆角x方向半径,圆角y方向半径)  #绘制圆角矩形

其中，**【1】颜色** ：可以有两种设置方式：  
1）Qt.颜色。代码简洁，包含了常用的颜色。例如：`Qt.yellow` , `Qt.red`, `Qt.white`  
2）QColor(RGB值)。这种方式可以选择的颜色范围更广。例如：`QColor(255, 0, 0)` 就是红色。具体RGB表见：[RGB颜色对照表][RGB] 想要什么颜色把具体的RGB值输进去即可。

**【2】线条粗细：** 直接填充一个整数即可，数值越大，线条越粗。

**【3】线条形式：** 有多种线条颜色可选。这里列出常用的几个：

*  Qt.SolidLine
 *  Qt.DashDotLine
 *  Qt.DotLine
 *  Qt.DashDotDotLine
 *  Qt.CustomDashLine  
    对应的效果如下：

!\[这里写图片描述\](https://img-blog.csdn.net/20180721171131636?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwNDQzMTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

就这么简单，你就可以在你创建的前端界面上自由作画啦。

最后，给一个小的范例，请下载下来自行修改调试：

import sys
    from PyQt5.QtWidgets import QWidget, QApplication
    from PyQt5.QtGui import QPainter, QColor, QPen,QFont,QPixmap
    from PyQt5.QtCore import Qt
    import numpy as np
    
    
    pixe = 50   # pixels
    column = 5  # 列数
    raw = 5  # 行数
    
    class Maze(QWidget):
        def __init__(self):
            super().__init__()
            self.origin = np.array([25, 25])  ##生成一个（20，20）的矩阵
            self.img = QPixmap('robot.jpg')
            self.initUI()
    
        def initUI(self):
            self.setGeometry(300, 300, 400, 300)
            self.setWindowTitle('画方格示例')
            # self.label.setPixmap(self.img)
            self.update()
            self.show()
    
        def paintEvent(self, e):
            qp = QPainter()
            qp.begin(self)
            self.drawGrid(qp)
            qp.end()
    
        def drawGrid(self, qp):
            pen = QPen(Qt.black, 2, Qt.SolidLine)
            # 用线创建网格
            for c in range(0, column * (pixe+1), pixe):  # 创建列
                x0, y0, x1, y1 = c, 0, c, column * pixe
                qp.setPen(pen)
                qp.drawLine(x0, y0, x1, y1)
            for r in range(0, raw * (pixe+1), pixe):  # 创建行
                x0, y0, x1, y1 = 0, r, raw * pixe, r
                qp.setPen(pen)
                qp.drawLine(x0, y0, x1, y1)
    
            #在第一格绘制文字
            qp.setPen(QColor(168, 34, 3))
            qp.setFont(QFont("Decorative", 10))
            qp.drawText(0,0,30,30, Qt.AlignCenter, '文字')
    
    
            pen = QPen(Qt.white, 2, Qt.SolidLine)
            qp.setPen(pen)
            qp.setBrush(QColor(800, 0, 0))
    
            # 绘制矩形
            hell1_center = self.origin + np.array([pixe * 2, pixe])
            qp.drawRect(hell1_center[0] - 20, hell1_center[1] - 20,40,40)##(起点坐标，终点坐标，长，宽)
    
            # 绘制一个黄色的圆
            pen = QPen(Qt.yellow, 2, Qt.SolidLine)
            # pen = QPen(QColor(255, 215, 0), 2, Qt.SolidLine)#与上一行代码效果是一样的
            qp.setPen(pen)
            qp.setBrush(QColor(255, 215, 0))
            cicle_center = self.origin + np.array([pixe * 2, pixe*2])
            qp.drawEllipse(cicle_center[0] - 20, cicle_center[1] - 20,40,40)
    
            #绘制圆角矩形
            pen = QPen(Qt.red, 2, Qt.SolidLine)
            qp.setPen(pen)
            qp.setBrush(QColor(255, 0, 0))
            people = self.origin + np.array([0, pixe])
            qp.drawRoundedRect(people[0] - 20, people[1] - 20,40, 40, 30, 15)  # 后边两个参数是圆角的半径
    
    
    if __name__ == "__main__":
        app = QApplication(sys.argv)
        ex = Maze()
        sys.exit(app.exec_())

运行后效果如下：

!\[这里写图片描述\](https://img-blog.csdn.net/20180721213242799?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwNDQzMTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

[RGB]: http://tool.oschina.net/commons?type=3