Python3使用PyQt5制作简单的画板/手写板实例


Posted in Python onOctober 19, 2017

1.前言

版本:Python3.6.1 + PyQt5

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

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

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

2.简单的画板1.0

在简单的画板1.0这里,实现的功能是:在定点和移动中的鼠标所在处画一条线
如图所示:
Python3使用PyQt5制作简单的画板/手写板实例
鼠标按住移动的话,线也会跟着移动,从这个简单的程序开始理解PyQt5的运行机制吧。

'''
 简单的画板1.0
 功能:在定点和移动中的鼠标所在处画一条线
 作者: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中,使用一个列表保存所有移动过的点,然后要画线的时候,循环遍历列表,依次画出列表中点到定点之间的线即可。

效果如图所示:
Python3使用PyQt5制作简单的画板/手写板实例

'''
 简单的画板2.0
 功能:
  在定点和移动中的鼠标所在处画一条线
  并将画过的线都保留在窗体上
 作者: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不过是画鼠标所在点到定点的线,那么如何将按住鼠标后移动的轨迹保留在窗体上?

这个就需要一个列表来保存所有移动过的点,然后把所有相邻两个点之间都画一条线,就能断断续续连成鼠标的痕迹了。
效果如图所示:
Python3使用PyQt5制作简单的画板/手写板实例

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

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

Python3使用PyQt5制作简单的画板/手写板实例

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

'''
 简单的画板3.0
 功能:将按住鼠标后移动的轨迹保留在窗体上
 作者: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:

Python3使用PyQt5制作简单的画板/手写板实例

很难看对不对?

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

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

效果如图所示:

Python3使用PyQt5制作简单的画板/手写板实例

以下是具体实现代码:

'''
 简单的画板4.0
 功能:
  将按住鼠标后移动的轨迹保留在窗体上
  并解决二次作画时与上次痕迹连续的问题
 作者: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_()

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

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

以上这篇Python3使用PyQt5制作简单的画板/手写板实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python实现的Google IP 可用性检测脚本
Apr 23 Python
基于DATAFRAME中元素的读取与修改方法
Jun 08 Python
python计算两个地址之间的距离方法
Jun 09 Python
python+POP3实现批量下载邮件附件
Jun 19 Python
详解Python中的type和object
Aug 15 Python
python 保存float类型的小数的位数方法
Oct 17 Python
python实现对输入的密文加密
Mar 20 Python
Python学习笔记之字符串和字符串方法实例详解
Aug 22 Python
IronPython连接MySQL的方法步骤
Dec 27 Python
Python使用pyexecjs代码案例解析
Jul 13 Python
Django用内置方法实现简单搜索功能的方法
Dec 18 Python
Python中seaborn库之countplot的数据可视化使用
Jun 11 Python
python里使用正则的findall函数的实例详解
Oct 19 #Python
详解python里使用正则表达式的全匹配功能
Oct 19 #Python
python中logging库的使用总结
Oct 18 #Python
R vs. Python 数据分析中谁与争锋?
Oct 18 #Python
Ubuntu安装Jupyter Notebook教程
Oct 18 #Python
python 中的divmod数字处理函数浅析
Oct 17 #Python
Python中的id()函数指的什么
Oct 17 #Python
You might like
用Php实现链结人气统计
2006/10/09 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
JS中的BOM应用
2018/02/02 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python 查看文件的编码格式方法
2017/12/21 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python小白学习包管理器pip安装
2020/06/09 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
面试自我介绍演讲稿
2014/04/29 职场文书
活动倡议书范文
2014/05/13 职场文书
与死神共舞观后感
2015/06/15 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书