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

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制作简单的画板/手写板实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-10-17

python3使用pyqt5制作一个超简单浏览器的实例

我们使用的是QWebview模块,这里也主要是展示下QWebview的用法. 之前在网上找了半天的解析网页的内容,都不是很清楚. 这是核心代码: webview = Qwebview() webview.load(Qurl('http://www.cnblogs.com/Blaxon/')) webview.show() 完整代码(代码是拿的别的代码改得): from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.Q

PyQt5利用QPainter绘制各种图形的实例

这个例子我做了好几天: 1)官网C++的源码,改写成PyQt5版本的代码,好多细节不会转化 2)网上的PyQt的例子根本运行不了 填了无数个坑,结合二者,终于能完成了一个关于绘图的东西.这个过程也掌握了很多新的知识点 [知识点] 1.关于多个点的使用 poitns = [QPoint(10, 80), QPoint(20, 10), QPoint(80, 30), QPoint(90, 70)] 请看: # 定义多个点 points = [QPoint(10, 80), QPoint(20, 1

Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

iOS中利用CAGradientLayer绘制渐变色的方法实例

前言 以前不用自己切图,现在要自己切图,看到设计稿有好多不同规格的渐变色的背景,一个一个切的话好麻烦,没有想到iOS本来就可以实现渐变色.也就是今天的主角CAGradientLayer. 渐变色使用的类是CAGradientLayer,有两个要素,渐变颜色的起点和终点.渐变的颜色集合 简单示例: //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds;

C#利用GDI绘制常见图形和文字

废话不多说,我们先来认识一下这个GDI+,看看它到底长什么样. GDI+:Graphics Device Interface Plus也就是图形设备接口,提供了各种丰富的图形图像处理功能;在C#.NET中,使用GDI+处理二维(2D)的图形和图像,使用DirectX处理三维(3D)的图形图像,图形图像处理用到的主要命名空间是System . Drawing:提供了对GDI+基本图形功能的访问,主要有Graphics类.Bitmap类.从Brush类继承的类.Font类.Icon类.Image类.

C#利用GDI+绘制旋转文字等效果实例

本文实例讲述了C#利用GDI+绘制旋转文字等效果的方法,是非常实用的技巧.分享给大家供大家参考之用.具体如下: C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经过不少的计算过程.利用下面的类可以实现该功能. 具体实现代码如下: using System; using System.Collections.Generic; using System

Android shape 绘制图形的实例详解

Android shape 绘制图形 Android 绘制图形可以使用shape也可以使用自定义控件的方式,这里我们说下shape的方式去实现. 在绘制图形之前,我们先来了解下shape的几个属性. shape /* * 线行 圆形 矩形 / android:shape="line" android:shape="oval" android:shape="rectangle" size 图形的大小 <size android:height=

Android开发之多线程中实现利用自定义控件绘制小球并完成小球自动下落功能实例

本文实例讲述了Android开发之多线程中实现利用自定义控件绘制小球并完成小球自动下落功能的方法.分享给大家供大家参考,具体如下: 1.布局界面 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_pare

Android编程之canvas绘制各种图形(点,直线,弧,圆,椭圆,文字,矩形,多边形,曲线,圆角矩形)

本文实例讲述了Android编程之canvas绘制各种图形的方法.分享给大家供大家参考,具体如下: 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into

php使用gd2绘制基本图形示例(直线、圆、正方形)

本文实例讲述了php使用gd2绘制基本图形.分享给大家供大家参考,具体如下: 应用GD2函数可以绘制的图形有多种,最基本的图形包括条.圆.方形等.无论开发人员绘制多么复杂的图形,都是在这些最基本的图形的基础上进行深化的,只有掌握了最基本的图形的绘制方法,才能绘制出各种具有独特风格的图形. 在GD2中可以分别应用imageline()函数.imagearc()函数和imagerectangle()函数绘制直线,圆形和方法. 下面将介绍这些函数的使用方法: bool imageline( resou

Android开发之OpenGL绘制2D图形的方法分析

本文实例讲述了Android开发之OpenGL绘制2D图形的方法.分享给大家供大家参考,具体如下: Android为OpenGL ES支持提供了GLSurviceView组建,这个组建用于显示3D图形.GLSurviceView本身并不提供绘制3的图形的功能,而是由GLSurfaceView.Renderer来完成了SurviceView中3D图形的绘制. 归纳起来,在android中使用OpenGL ES需要3个步骤. 1. 创建GLSurviceView组件,使用Activity来显示GLS