0.目录

1.前言

在定点和移动中的鼠标所在处画一条线

在定点和移动中的鼠标所在处画一条线

并将画过的线都保留在窗体上

将按住鼠标后移动的轨迹保留在窗体上

将按住鼠标后移动的轨迹保留在窗体上

并解决二次作画时与上次痕迹连续的问题

1.前言

版本：Python3.6.1 + PyQt5

写一个程序的时候需要用到画板/手写板，只需要最简单的那种。原以为网上到处都是，结果找了好几天，都没有找到想要的结果。

网上的要么是非python版的qt程序(要知道qt版本之间差异巨大，还是非同一语言的)，改写难度太大。要么是PyQt4的老程序，很多都已经不能在PyQt5上运行了。要么是大神写的特别复杂的程序，简直是直接做出了一个Windows自带的画图版，只能膜拜~

于是我只能在众多代码中慢慢寻找自己需要的那一小部分，然后不断地拼凑，不断地理解大神的代码，最终做出这么一个简单的画板。望着这个简单的画板我真是泪流满面，中间数十次拼不对拼不全导致程序无数次崩溃，差点就放弃了......

以下是参考网站的名单(名单不分先后顺序)：

1.PyQt5教程(九)——绘图https://my.oschina.net/wisedream/blog/549989

2.Qt入门 小程序之画图板http://blog.csdn.net/doraemon___/article/details/53026890

3.使用Python编写简单的画图板程序的示例教程http://www.jb51.net/article/76067.htm

4.qt中函数paintEvent(QPaintEvent*)是不是被系统自动调用的https://zhidao.baidu.com/question/1509518984399472660.html

5.从Qt到PyQthttp://www.cnblogs.com/Finley/p/5268861.html

6.python3+PyQt5 重新实现QT事件处理程序http://blog.sina.com.cn/s/blog_c22e36090102wzxq.html

7.PyQt5入门http://www.docin.com/p-1560265564.html

8.PyQt5教程(一)——第一个PyQt5程序https://my.oschina.net/wisedream/blog/536052

9.PyQt之布局&无边框&信号http://www.cnblogs.com/codeAB/p/5019439.html

10.QT界面简单的图形移动和鼠标绘图http://blog.csdn.net/K54387/article/details/77926313

11.qt鼠标事件总结(转)http://blog.sina.com.cn/s/blog_8b97b05e0100v6kk.html

12.一个简单的画图程序http://blog.csdn.net/cutter_point/article/details/43087497

13.Qt双缓冲机制：实现一个简单的绘图工具(纯代码实现)http://blog.csdn.net/rl529014/article/details/51658350

2.简单的画板1.0

在简单的画板1.0这里，实现的功能是：在定点和移动中的鼠标所在处画一条线

如图所示：

鼠标按住移动的话，线也会跟着移动，从这个简单的程序开始理解PyQt5的运行机制吧。

'''

简单的画板1.0

功能：在定点和移动中的鼠标所在处画一条线

作者：PyLearn

博客: http://www.cnblogs.com/PyLearn/

最后修改日期: 2017/10/18

'''

import sys

from PyQt5.QtWidgets import (QApplication, QWidget)

from PyQt5.QtGui import (QPainter, QPen)

from PyQt5.QtCore import Qt

class Example(QWidget):

def __init__(self):

super(Example, self).__init__()

#resize设置宽高，move设置位置

self.resize(400, 300)

self.move(100, 100)

self.setWindowTitle("简单的画板1.0")

#setMouseTracking设置为False，否则不按下鼠标时也会跟踪鼠标事件

self.setMouseTracking(False)

#设置两个变量接收移动中的点的x、y坐标

self.pos_x = 20

self.pos_y = 20

def paintEvent(self, event):

painter = QPainter()

painter.begin(self)

pen = QPen(Qt.black, 2, Qt.SolidLine)

painter.setPen(pen)

#定点(20, 20) 到 (self.pos_x, self.pos_y)之间画线

painter.drawLine(20, 20, self.pos_x, self.pos_y)

painter.end()

def mouseMoveEvent(self, event):

'''

按住鼠标移动事件：更新pos_x和pos_y的值

调用update()函数在这里相当于调用paintEvent()函数

每次update()时，之前调用的paintEvent()留下的痕迹都会清空

'''

self.pos_x = event.pos().x()

self.pos_y = event.pos().y()

self.update()

if __name__ == "__main__":

app = QApplication(sys.argv)

pyqt_learn = Example()

pyqt_learn.show()

app.exec_()

3.简单的画板2.0

从以上的简单的画板1.0程序的运行可以发现，按住鼠标移动的时候，线也会跟着移动，那如何让之前的线留下痕迹，而不是消失呢？

在简单的画板2.0中，使用一个列表保存所有移动过的点，然后要画线的时候，循环遍历列表，依次画出列表中点到定点之间的线即可。

效果如图所示：

'''

简单的画板2.0

功能：

在定点和移动中的鼠标所在处画一条线

并将画过的线都保留在窗体上

作者：PyLearn

博客: http://www.cnblogs.com/PyLearn/

最后修改日期: 2017/10/18

'''

import sys

from PyQt5.QtWidgets import (QApplication, QWidget)

from PyQt5.QtGui import (QPainter, QPen)

from PyQt5.QtCore import Qt

class Example(QWidget):

def __init__(self):

super(Example, self).__init__()

#resize设置宽高，move设置位置

self.resize(400, 300)

self.move(100, 100)

self.setWindowTitle("简单的画板2.0")

#setMouseTracking设置为False，否则不按下鼠标时也会跟踪鼠标事件

self.setMouseTracking(False)

'''

要想将画过的线都保留在窗体上

需要一个列表来保存所有移动过的点

'''

self.pos_xy = []

def paintEvent(self, event):

painter = QPainter()

painter.begin(self)

pen = QPen(Qt.black, 2, Qt.SolidLine)

painter.setPen(pen)

#循环遍历self.pos_xy中每个点，然后画点到定点之间的线

for pos_tmp in self.pos_xy:

painter.drawLine(20, 20, pos_tmp[0], pos_tmp[1])

painter.end()

def mouseMoveEvent(self, event):

'''

按住鼠标移动事件：将当前点添加到pos_xy列表中

调用update()函数在这里相当于调用paintEvent()函数

每次update()时，之前调用的paintEvent()留下的痕迹都会清空

'''

#中间变量pos_tmp提取当前点

pos_tmp = (event.pos().x(), event.pos().y())

#pos_tmp添加到self.pos_xy中

self.pos_xy.append(pos_tmp)

self.update()

if __name__ == "__main__":

app = QApplication(sys.argv)

pyqt_learn = Example()

pyqt_learn.show()

app.exec_()

4.简单的画板3.0

好了，接下来进入正题了。简单的画板2.0不过是画鼠标所在点到定点的线，那么如何将按住鼠标后移动的轨迹保留在窗体上？

这个就需要一个列表来保存所有移动过的点，然后把所有相邻两个点之间都画一条线，就能断断续续连成鼠标的痕迹了。

效果如图所示：

是不是就画出鼠标移动的轨迹了！

不过这也是有缺点的，比如说写个5看看：

硬生生变成了一个5不是5, 6不是6的数字。这是因为再次提笔画时，5上面的那一横跟之前画的尾巴那里连起来了。好好想想，这个问题怎么解决呢？

'''

简单的画板3.0

功能：将按住鼠标后移动的轨迹保留在窗体上

作者：PyLearn

博客: http://www.cnblogs.com/PyLearn/

最后修改日期: 2017/10/18

'''

import sys

from PyQt5.QtWidgets import (QApplication, QWidget)

from PyQt5.QtGui import (QPainter, QPen)

from PyQt5.QtCore import Qt

class Example(QWidget):

def __init__(self):

super(Example, self).__init__()

#resize设置宽高，move设置位置

self.resize(400, 300)

self.move(100, 100)

self.setWindowTitle("简单的画板3.0")

#setMouseTracking设置为False，否则不按下鼠标时也会跟踪鼠标事件

self.setMouseTracking(False)

'''

要想将按住鼠标后移动的轨迹保留在窗体上

需要一个列表来保存所有移动过的点

'''

self.pos_xy = []

def paintEvent(self, event):

painter = QPainter()

painter.begin(self)

pen = QPen(Qt.black, 2, Qt.SolidLine)

painter.setPen(pen)

'''

首先判断pos_xy列表中是不是至少有两个点了

然后将pos_xy中第一个点赋值给point_start

利用中间变量pos_tmp遍历整个pos_xy列表

point_end = pos_tmp

画point_start到point_end之间的线

point_start = point_end

这样，不断地将相邻两个点之间画线，就能留下鼠标移动轨迹了

'''

if len(self.pos_xy) > 1:

point_start = self.pos_xy[0]

for pos_tmp in self.pos_xy:

point_end = pos_tmp

painter.drawLine(point_start[0], point_start[1], point_end[0], point_end[1])

point_start = point_end

painter.end()

def mouseMoveEvent(self, event):

'''

按住鼠标移动事件：将当前点添加到pos_xy列表中

调用update()函数在这里相当于调用paintEvent()函数

每次update()时，之前调用的paintEvent()留下的痕迹都会清空

'''

#中间变量pos_tmp提取当前点

pos_tmp = (event.pos().x(), event.pos().y())

#pos_tmp添加到self.pos_xy中

self.pos_xy.append(pos_tmp)

self.update()

if __name__ == "__main__":

app = QApplication(sys.argv)

pyqt_learn = Example()

pyqt_learn.show()

app.exec_()

5.简单的画板4.0

简单的画板3.0中有一个致命的问题，那就是连续的问题，比如说要写一个三位数123：

很难看对不对？

解决这个问题的方法应该是有很多种的，我也没有深入想，就直接用了这个麻烦点的方法。

我的办法是当鼠标按住移动然后松开的时候，往保存所有移动过的点的列表中添加一个断点(-1, -1)。然后在每次画线的时候，都判断一下是不是断点，如果是断点的话就想办法跳过去，并且不连续的开始接着画线。

效果如图所示：

以下是具体实现代码：

'''

简单的画板4.0

功能：

将按住鼠标后移动的轨迹保留在窗体上

并解决二次作画时与上次痕迹连续的问题

作者：PyLearn

博客: http://www.cnblogs.com/PyLearn/

最后修改日期: 2017/10/18

'''

import sys

from PyQt5.QtWidgets import (QApplication, QWidget)

from PyQt5.QtGui import (QPainter, QPen)

from PyQt5.QtCore import Qt

class Example(QWidget):

def __init__(self):

super(Example, self).__init__()

#resize设置宽高，move设置位置

self.resize(400, 300)

self.move(100, 100)

self.setWindowTitle("简单的画板4.0")

#setMouseTracking设置为False，否则不按下鼠标时也会跟踪鼠标事件

self.setMouseTracking(False)

'''

要想将按住鼠标后移动的轨迹保留在窗体上

需要一个列表来保存所有移动过的点

'''

self.pos_xy = []

def paintEvent(self, event):

painter = QPainter()

painter.begin(self)

pen = QPen(Qt.black, 2, Qt.SolidLine)

painter.setPen(pen)

'''

首先判断pos_xy列表中是不是至少有两个点了

然后将pos_xy中第一个点赋值给point_start

利用中间变量pos_tmp遍历整个pos_xy列表

point_end = pos_tmp

判断point_end是否是断点，如果是

point_start赋值为断点

continue

判断point_start是否是断点，如果是

point_start赋值为point_end

continue

画point_start到point_end之间的线

point_start = point_end

这样，不断地将相邻两个点之间画线，就能留下鼠标移动轨迹了

'''

if len(self.pos_xy) > 1:

point_start = self.pos_xy[0]

for pos_tmp in self.pos_xy:

point_end = pos_tmp

if point_end == (-1, -1):

point_start = (-1, -1)

continue

if point_start == (-1, -1):

point_start = point_end

continue

painter.drawLine(point_start[0], point_start[1], point_end[0], point_end[1])

point_start = point_end

painter.end()

def mouseMoveEvent(self, event):

'''

按住鼠标移动事件：将当前点添加到pos_xy列表中

调用update()函数在这里相当于调用paintEvent()函数

每次update()时，之前调用的paintEvent()留下的痕迹都会清空

'''

#中间变量pos_tmp提取当前点

pos_tmp = (event.pos().x(), event.pos().y())

#pos_tmp添加到self.pos_xy中

self.pos_xy.append(pos_tmp)

self.update()

def mouseReleaseEvent(self, event):

'''

重写鼠标按住后松开的事件

在每次松开后向pos_xy列表中添加一个断点(-1, -1)

然后在绘画时判断一下是不是断点就行了

是断点的话就跳过去，不与之前的连续

'''

pos_test = (-1, -1)

self.pos_xy.append(pos_test)

self.update()

if __name__ == "__main__":

app = QApplication(sys.argv)

pyqt_learn = Example()

pyqt_learn.show()

app.exec_()

至此，终于完成了简单的画板程序的实现！

另外，如果在使用这个代码的过程中有遇到什么问题，也欢迎向我反馈。