PyQt5实例 画板小程序

EM…一时兴起，用pyqt5做了个简易画板玩，分享一下，我也会顺便解释一下代码

开发环境：Eclipse-photon + Python3.5

注：Visual Studio, PyCharm,都挺好的，然而，我觉得Eclipse更棒

配置Eclipse的方法：https://blog.csdn.net/CreatorGG/article/details/81507290

python库：PyQT5 [pip install PyQT5即可安装]

源码我放在百度云：

链接：https://pan.baidu.com/s/1ODvVhoKvWRhE5Fdq03bGEw
提取码：oqz8

效果图如下:

这个画板支持调节画笔粗细，颜色，可以保存作品为本地图片

那么，开始设计程序

由于知识有限，我目前只知道main函数可以作为一个应用程序的主要执行流和入口点，因此，先编写一个main函数，这个可以作为pyQT程序的main函数框架

from PyQt5.QtWidgets import QApplication
import sys

def main():
    app = QApplication(sys.argv) # sys.argv即命令行参数
    exit(app.exec_()) # app.exec_() 进入消息循环
    
if __name__ == '__main__':
    main()

接下来，从面向对象的角度来设计程序，首先，我们需要一个主界面，程序的核心都属于这个主界面

于是，我们为主界面设计一个类，命名为MainWidget, 并让这个类继承QWidget

from PyQt5.Qt import QWidget, QColor

class MainWidget(QWidget):
    
    def __init__(self, Parent=None):
        super().__init__(Parent)
        self.__InitData()
        self.__InitView()
        
    def __InitData(self):
        #初始化数据
        #变量名前有两个下划线代表类的私有变量
        #获取QT中的颜色列表(字符串的List)
    	self.__colorList = QColor.colorNames() 
    
    def __InitView(self):
        #初始化界面
        #设置窗体固定尺寸，宽640px,高480px
        self.setFixedSize(640,480)
        #设置窗体标题
        self.setWindowTitle("PaintBoard Example PyQt5")

然后，改造main函数，让主界面显示，这就是完整版的main函数了，相当简单

'''
Created on 2018-08-09 00:00

@author: Freedom
'''

from MainWidget import MainWidget
from PyQt5.QtWidgets import QApplication

import sys

def main():
    app = QApplication(sys.argv) 
    
    mainWidget = MainWidget() #新建一个主界面
    mainWidget.show()	#显示主界面
    
    exit(app.exec_()) #进入消息循环
    
    
if __name__ == '__main__':
    main()

现在的运行效果如下图，一片空白：

接下来要做的是，设计一块画板，因此要设计一个类，并命名为PaintBoard，同样继承类QWidget。PaintBoard成员__board [QPixmap类]即实际的画板

在这个类中，要实现最基本的画图功能。用鼠标画图时，会涉及到鼠标的按下，鼠标的移动，鼠标的松开这三种事件，这三种事件分别对应了QWidget类中可以重写的三个事件函数 mousePressEvent, mouseMoveEvent, mouseReleaseEvent。画图的逻辑即：在鼠标按下时，记录落点坐标作为上一次的位置，在鼠标的每一次移动发生时，更新当前位置，并在上一次位置和当前位置间画线段。本程序中用于记录鼠标坐标的数据类型是QPoint

而画图则会涉及到QT控件的绘图事件函数 paintEvent, 也需要重写其内容。总之，代码如下，自行领悟

'''
Created on 2018年8月9日

@author: Freedom
'''
from PyQt5.QtWidgets import QWidget
from PyQt5.Qt import QPixmap, QPainter, QPoint, QPaintEvent, QMouseEvent, QPen,\
    QColor, QSize
from PyQt5.QtCore import Qt

class PaintBoard(QWidget):


    def __init__(self, Parent=None):
        '''
        Constructor
        '''
        super().__init__(Parent)

        self.__InitData() #先初始化数据，再初始化界面
        self.__InitView()
        
    def __InitData(self):
        
        self.__size = QSize(480,460)
        
        #新建QPixmap作为画板，尺寸为__size
        self.__board = QPixmap(self.__size)
        self.__board.fill(Qt.white) #用白色填充画板
        
        self.__IsEmpty = True #默认为空画板 
        self.EraserMode = False #默认为禁用橡皮擦模式
        
        self.__lastPos = QPoint(0,0)#上一次鼠标位置
        self.__currentPos = QPoint(0,0)#当前的鼠标位置
        
        self.__painter = QPainter()#新建绘图工具
        
        self.__thickness = 10       #默认画笔粗细为10px
        self.__penColor = QColor("black")#设置默认画笔颜色为黑色
        self.__colorList = QColor.colorNames() #获取颜色列表
     
    def __InitView(self):
        #设置界面的尺寸为__size
        self.setFixedSize(self.__size)
        
    def Clear(self):
        #清空画板
        self.__board.fill(Qt.white)
        self.update()
        self.__IsEmpty = True
        
    def ChangePenColor(self, color="black"):
        #改变画笔颜色
        self.__penColor = QColor(color)
        
    def ChangePenThickness(self, thickness=10):
        #改变画笔粗细
        self.__thickness = thickness
        
    def IsEmpty(self):
        #返回画板是否为空
        return self.__IsEmpty
    
    def GetContentAsQImage(self):
        #获取画板内容（返回QImage）
        image = self.__board.toImage()
        return image
        
    def paintEvent(self, paintEvent):
        #绘图事件
        #绘图时必须使用QPainter的实例，此处为__painter
        #绘图在begin()函数与end()函数间进行
        #begin(param)的参数要指定绘图设备，即把图画在哪里
        #drawPixmap用于绘制QPixmap类型的对象
        self.__painter.begin(self)
        # 0,0为绘图的左上角起点的坐标，__board即要绘制的图
        self.__painter.drawPixmap(0,0,self.__board)
        self.__painter.end()
        
    def mousePressEvent(self, mouseEvent):
        #鼠标按下时，获取鼠标的当前位置保存为上一次位置
        self.__currentPos =  mouseEvent.pos()
        self.__lastPos = self.__currentPos
        
        
    def mouseMoveEvent(self, mouseEvent):
        #鼠标移动时，更新当前位置，并在上一个位置和当前位置间画线
        self.__currentPos =  mouseEvent.pos()
        self.__painter.begin(self.__board)
        
        if self.EraserMode == False:
            #非橡皮擦模式
            self.__painter.setPen(QPen(self.__penColor,self.__thickness)) #设置画笔颜色，粗细
        else:
            #橡皮擦模式下画笔为纯白色，粗细为10
            self.__painter.setPen(QPen(Qt.white,10))
            
        #画线    
        self.__painter.drawLine(self.__lastPos, self.__currentPos)
        self.__painter.end()
        self.__lastPos = self.__currentPos
                
        self.update() #更新显示
        
    def mouseReleaseEvent(self, mouseEvent):
        self.__IsEmpty = False #画板不再为空
        

EM…现在，画板解决了，下一步就是，把画板塞进主界面，顺带在主界面里加几个控件，比如退出按键，清空画板按键，保存作品按键，使用橡皮擦的选择框，画笔粗细，画笔颜色选取，然后就完成了

我个人的编程习惯是在类里定义函数InitData和函数InitView用于初始化类的数据及界面，因此，在MainWidget的__InitView中，为主界面添加一个主布局，方向为水平方向。主布局内，左侧添加一个PaintBoard类的实例作为画板，右侧添加一个子布局sub_layout用于放置其他控件，方向为垂直方向。

QSpinBox可能没那么常用，相对于按键(QPushButton)，下拉列表(QComboBox),用了就知道是什么控件了，无需多言。QFileDialog.getSaveFileName()用于打开一个文件保存对话框，详见代码。

完整版MainWidget如下所示

'''
Created on 2018年8月8日

@author: Freedom
'''
from PyQt5.Qt import QWidget, QColor, QPixmap, QIcon, QSize, QCheckBox
from PyQt5.QtWidgets import QHBoxLayout, QVBoxLayout, QPushButton, QSplitter,\
    QComboBox, QLabel, QSpinBox, QFileDialog
from PaintBoard import PaintBoard

class MainWidget(QWidget):


    def __init__(self, Parent=None):
        '''
        Constructor
        '''
        super().__init__(Parent)
        
        self.__InitData() #先初始化数据，再初始化界面
        self.__InitView()
    
    def __InitData(self):
        '''
                  初始化成员变量
        '''
        self.__paintBoard = PaintBoard(self)
        #获取颜色列表(字符串类型)
        self.__colorList = QColor.colorNames() 
        
    def __InitView(self):
        '''
                  初始化界面
        '''
        self.setFixedSize(640,480)
        self.setWindowTitle("PaintBoard Example PyQt5")
        
        #新建一个水平布局作为本窗体的主布局
        main_layout = QHBoxLayout(self) 
        #设置主布局内边距以及控件间距为10px
        main_layout.setSpacing(10) 
    
        #在主界面左侧放置画板
        main_layout.addWidget(self.__paintBoard) 
        
        #新建垂直子布局用于放置按键
        sub_layout = QVBoxLayout() 
        
        #设置此子布局和内部控件的间距为10px
        sub_layout.setContentsMargins(10, 10, 10, 10) 

        self.__btn_Clear = QPushButton("清空画板")
        self.__btn_Clear.setParent(self) #设置父对象为本界面
       
    #将按键按下信号与画板清空函数相关联
    	self.__btn_Clear.clicked.connect(self.__paintBoard.Clear) 
        sub_layout.addWidget(self.__btn_Clear)
        
        self.__btn_Quit = QPushButton("退出")
        self.__btn_Quit.setParent(self) #设置父对象为本界面
        self.__btn_Quit.clicked.connect(self.Quit)
        sub_layout.addWidget(self.__btn_Quit)
        
        self.__btn_Save = QPushButton("保存作品")
        self.__btn_Save.setParent(self)
        self.__btn_Save.clicked.connect(self.on_btn_Save_Clicked)
        sub_layout.addWidget(self.__btn_Save)
        
        self.__cbtn_Eraser = QCheckBox("  使用橡皮擦")
        self.__cbtn_Eraser.setParent(self)
        self.__cbtn_Eraser.clicked.connect(self.on_cbtn_Eraser_clicked)
        sub_layout.addWidget(self.__cbtn_Eraser)
        
        splitter = QSplitter(self) #占位符
        sub_layout.addWidget(splitter)
        
        self.__label_penThickness = QLabel(self)
        self.__label_penThickness.setText("画笔粗细")
        self.__label_penThickness.setFixedHeight(20)
        sub_layout.addWidget(self.__label_penThickness)
        
        self.__spinBox_penThickness = QSpinBox(self)
        self.__spinBox_penThickness.setMaximum(20)
        self.__spinBox_penThickness.setMinimum(2)
        self.__spinBox_penThickness.setValue(10) #默认粗细为10
        self.__spinBox_penThickness.setSingleStep(2) #最小变化值为2
        self.__spinBox_penThickness.valueChanged.connect(self.on_PenThicknessChange)#关联spinBox值变化信号和函数on_PenThicknessChange
        sub_layout.addWidget(self.__spinBox_penThickness)
        
        self.__label_penColor = QLabel(self)
        self.__label_penColor.setText("画笔颜色")
        self.__label_penColor.setFixedHeight(20)
        sub_layout.addWidget(self.__label_penColor)
        
        self.__comboBox_penColor = QComboBox(self)
        self.__fillColorList(self.__comboBox_penColor) #用各种颜色填充下拉列表
        self.__comboBox_penColor.currentIndexChanged.connect(self.on_PenColorChange) #关联下拉列表的当前索引变更信号与函数on_PenColorChange
        sub_layout.addWidget(self.__comboBox_penColor)

        main_layout.addLayout(sub_layout) #将子布局加入主布局


    def __fillColorList(self, comboBox):

        index_black = 0
        index = 0
        for color in self.__colorList: 
            if color == "black":
                index_black = index
            index += 1
            pix = QPixmap(70,20)
            pix.fill(QColor(color))
            comboBox.addItem(QIcon(pix),None)
            comboBox.setIconSize(QSize(70,20))
            comboBox.setSizeAdjustPolicy(QComboBox.AdjustToContents)

        comboBox.setCurrentIndex(index_black)
        
    def on_PenColorChange(self):
        color_index = self.__comboBox_penColor.currentIndex()
        color_str = self.__colorList[color_index]
        self.__paintBoard.ChangePenColor(color_str)

    def on_PenThicknessChange(self):
        penThickness = self.__spinBox_penThickness.value()
        self.__paintBoard.ChangePenThickness(penThickness)
    
    def on_btn_Save_Clicked(self):
        savePath = QFileDialog.getSaveFileName(self, 'Save Your Paint', '.\\', '*.png')
        print(savePath)
        if savePath[0] == "":
            print("Save cancel")
            return
        image = self.__paintBoard.GetContentAsQImage()
        image.save(savePath[0])
        
    def on_cbtn_Eraser_clicked(self):
        if self.__cbtn_Eraser.isChecked():
            self.__paintBoard.EraserMode = True #进入橡皮擦模式
        else:
            self.__paintBoard.EraserMode = False #退出橡皮擦模式
        
        
    def Quit(self):
        self.close()