PyQt5实现画布小程序

本文实例为大家分享了PyQt5实现画布小程序的具体代码,供大家参考,具体内容如下

实现的效果图如下:

该实例中,涉及到的知识点有:

1.PyQt5 的常用的布局方式,这里使用到了QVBoxLayout,QHBoxLayout,如何灵活运用这些布局;

2.常用组件的使用方法,这里使用到了QPushButton, QLabel, QPixmap;

3.使用QPainter进行绘制;

4.事件与槽;

主要代码如下:

import random
import sys

from PyQt5.QtCore import QSize
from PyQt5.QtGui import QPixmap, QPainter, QColor
from PyQt5.QtWidgets import QMainWindow, QLabel, QApplication, QPushButton, QWidget, QVBoxLayout, QHBoxLayout

SPRAY_PARTICLES = 100
SPRAY_DIAMMETER = 10

COLORS = [
  '#000000', '#141923', '#414168', '#3a7fa7', '#35e3e3', '#8fd970', '#5ebb49',
  '#458352', '#dcd37b', '#fffee5', '#ffd035', '#cc9245', '#a15c3e', '#a42f3b',
  '#f45b7a', '#c24998', '#81588d', '#bcb0c2', '#ffffff',
]

class QPlatteButton(QPushButton):
  def __init__(self, color):
    super().__init__()

    self.setFixedSize(QSize(24, 24))
    self.color = color
    self.setStyleSheet("background-color: %s" % self.color)

class Canvas(QLabel):
  def __init__(self):
    super().__init__()

    canvas = QPixmap(1200, 800)
    canvas.fill(QColor('white'))
    self.setPixmap(canvas)

    self.last_x, self.last_y = None, None
    self.pen_color = QColor('#000')

  def set_pen_color(self, c):
    self.pen_color = QColor(c)

  def mouseReleaseEvent(self, *args, **kwargs):
    """
    松开鼠标事件
    """
    self.last_x, self.last_y = None, None

  def mouseMoveEvent(self, e):
    """
    移动鼠标事件
    """
    if self.last_x is None:
      self.last_x = e.x()
      self.last_y = e.y()
      return

    painter = QPainter(self.pixmap())
    pen = painter.pen()
    pen.setWidth(4)
    pen.setColor(self.pen_color)
    painter.setPen(pen)
    painter.drawLine(self.last_x, self.last_y, e.x(), e.y())
    painter.end()
    self.update()

    # update the origin for next time
    self.last_x = e.x()
    self.last_y = e.y()

  # def mouseMoveEvent(self, e):
  #   painter = QPainter(self.pixmap())
  #   p = painter.pen()
  #   p.setWidth(1)
  #   p.setColor(self.pen_color)
  #   painter.setPen(p)
  #
  #   for n in range(SPRAY_PARTICLES):
  #     xo = random.gauss(0, SPRAY_DIAMMETER)
  #     yo = random.gauss(0, SPRAY_DIAMMETER)
  #     painter.drawPoint(e.x() + xo, e.y() + yo)
  #
  #   self.update()

class MainWindow(QMainWindow):
  def __init__(self):
    super().__init__()
    self.setWindowTitle("画板小程序")

    self.canvas = Canvas()

    widget = QWidget()
    vlayout = QVBoxLayout()
    widget.setLayout(vlayout)

    vlayout.addWidget(self.canvas)

    palette = QHBoxLayout()
    vlayout.addLayout(palette)
    self.add_palette_buttons(palette)
    self.setCentralWidget(widget)

  def add_palette_buttons(self, layout):
    """
    在水平布局中放入一行调色板
    """
    for c in COLORS:
      b = QPlatteButton(c)
      b.pressed.connect(lambda c=c: self.canvas.set_pen_color(c))
      layout.addWidget(b)

if __name__ == '__main__':
  app = QApplication(sys.argv)
  window = MainWindow()
  window.move(120, 120)
  window.show()
  app.exec_()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • python实现在一个画布上画多个子图

    matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使用到的方法叫作 subplot. 均匀画图 使用import导入matplotlib.pyplot模块, 并简写成plt. 使用plt.figure创建一个图像窗口. import matplotlib.pyplot as plt plt.figure() 使用plt.subplot来创建小图. plt.subplot(2,2,1)表示将整个图像窗口分为2行2列, 当前位置为1. 使用plt.plot([0,1],[0,1

  • PyQt5实现画布小程序

    本文实例为大家分享了PyQt5实现画布小程序的具体代码,供大家参考,具体内容如下 实现的效果图如下: 该实例中,涉及到的知识点有: 1.PyQt5 的常用的布局方式,这里使用到了QVBoxLayout,QHBoxLayout,如何灵活运用这些布局: 2.常用组件的使用方法,这里使用到了QPushButton, QLabel, QPixmap: 3.使用QPainter进行绘制: 4.事件与槽: 主要代码如下: import random import sys from PyQt5.QtCore

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

  • JS绘制微信小程序画布时钟

    微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

  • 微信小程序实现拍照画布指定区域生成图片

    最近写识别行驶证功能,点击拍照把指定区域截取,生成图片功能. 系统相机.该组件是原生组件,使用时请注意相关限制. 扫码二维码功能,需升级微信客户端至6.7.3. 微信小程序Camera相机地址 我们看下效果: 1.首先生成一个CanvasContext: /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { requireJs.adaptionIphoneX(this); this.ctx = wx.createCameraContext() }

  • 微信小程序画布圆形进度条显示效果

    本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv

  • 小程序canvas实现画布半圆环

    本文实例为大家分享了小程序canvas实现画布半圆环的具体代码,供大家参考,具体内容如下 1.效果图: 2.wxml: <view class="fragrance_item">   <view class="fragPos">     <view class="fragNum">{{perfumePercent}}%</view>     <view class="fragText

  • 微信小程序开发中的疑问解答汇总

    前言 最近总结一篇微信小程序解答,作为小程序填坑人深有体会这里的变化,小程序刚发布消息的时候我就说了一个观点,只要小程序提供的组件或API丰富,稳定,兼容性好,才能实现小程序快速开发的理念,先如今还有很多组件的兼容不理想,有一些还在的优化中,因基于小程序这个平台开发限制很大,只能坐等中...如果想用第三方库来实现,小程序明文规定不支持第三方库的做法,这样做最终小程序审核环节百分百的不通过. 1.scroll-view 在 iOS 上存在 bug 在使用这个组件开发页面的时候,因自带滚动效果,Y

  • 微信小程序 实现动态显示和隐藏某个控件

    微信小程序 实现动态显示和隐藏某个控件 在小程序的开发过程中,经常需要用到隐藏某个控件这种情况. 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏. 实现方法: logs.wxml <view> <button bindtap="onChangeShowState">{{sh

  • 微信小程序入门教程

    微信小程序(下面简称小程序)近些月来刷爆了我们这些程序猿们的圈子,可以说无数的程序猿磨刀霍霍,准备在这快蛋糕上杀出一片天地.那么作为前端开发人员,小程序开发和我们平常的开发有什么不同的地方呢?让我们一起来走进门里看看. 我们从下面几个方向来了解一下小程序的开发: 1.开发工具 2.布局差异 3.JS差异 4.其它 序 先看一张小程序初始化的目录: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:app.js.ap

  • 微信小程序开发教程-手势解锁实例

    手势解锁是app上常见的解锁方式,相比输入密码方式操作起来要方便许多.下面展示如何基于微信小程序实现手机解锁.最终实现效果如下图: 整个功能基于canvas实现,首先添加画布组件,并设定样式 <!--index.wxml--> <view class="container"> <canvas canvas-id="id-gesture-lock" class="gesture-lock" bindtouchstart

随机推荐