使用PyQt5实现图片查看器的示例代码

一、前言

在学习 PyQt5 的过程中我会不断地做一些小的 Demo，用于让自己能够更好地理解和学习，这次要做的就是一个图片查看器，主要功能包括打开图片、拖动图片、放大和缩小图片。

最终实现的图片查看器你效果如下：

二、主要步骤

 1.显示图片

PyQt5 绘图系统能渲染矢量图像、位图图像和轮廓字体文本。一般会使用在修改或者提高现有组件的功能，或者创建自己的组件，使用 PyQt5 的绘图 API 进行操作。在 Qt 中有 QPainter 类用于执行绘制的操作，绘图由 paintEvent() 来完成，绘图的代码要放在 QPainter 对象的 start() 和 end() 方法之间。

要将图片显示出来，首先是继承 QWidget，然后实现 paintEvent() 方法，主要是使用 drawPixmap() 方法，需要传入 QPixmap 对象并将其绘制出来，绘图的代码如下：

def paintEvent(self, e):
   """
   receive paint events
   :param e: QPaintEvent
   :return:
   """
   if self.scaled_img:
     painter = QPainter()
     painter.begin(self)
     painter.drawPixmap(self.point, self.scaled_img)
    painter.end()

2.拖动图片

在图片成功显示出来之后，需要能够去拖动图片，以便于查看图片的每个角落，主要得实现三个方法：mouseMoveEvent、mousePressEvent 和 mouseReleaseEvent，分别对应移动鼠标、点击鼠标和松开鼠标三个事件。

思路是获取鼠标点击时的位置，然后根据鼠标位置的变化来计算图片需要移动的距离，再移动图片就行了。具体代码如下：

def mouseMoveEvent(self, e):
   """
   mouse move events for the widget
   :param e: QMouseEvent
   :return:
   """
   if self.left_click:
     self.end_pos = e.pos() - self.start_pos
     self.point = self.point + self.end_pos
     self.start_pos = e.pos()
     self.repaint()

 def mousePressEvent(self, e):
   """
   mouse press events for the widget
   :param e: QMouseEvent
   :return:
   """
   if e.button() == Qt.LeftButton:
     self.left_click = True
     self.start_pos = e.pos()

 def mouseReleaseEvent(self, e):
   """
   mouse release events for the widget
   :param e: QMouseEvent
   :return:
   """
   if e.button() == Qt.LeftButton:
     self.left_click = False

3.打开文件

有时候我们会想打开本地的文件进行查看，所以还要实现一个打开文件的功能。而要实现这一功能，可以用 QFileDialog 类来实现，该类里有一个 getOpenFileName() 方法，使用该方法能够打开本地路径并选择符合文件要求格式的文件，例如使用“*.png”就支持打开所有 png 格式的图片文件，而不支持其他格式的文件。

getOpenFileName() 方法有两个返回值，第一个返回值是所选择的文件的路径，第二个返回值是文件类型，得到文件路径后就能创建一个 QPixmap 对象，再使用前面显示图片的方法进行显示，具体代码如下：

def open_image(self):
  """
  select image file and open it
  :return:
  """
  img_name, _ = QFileDialog.getOpenFileName(self, "Open Image File", "*.jpg;;*.png;;*.jpeg")
  self.box.set_image(img_name)

4.放大缩小图片

在查看图片的时候，有时候会需要放大了观看图片的某些细节部分，因而需要实现放大和缩小图片的功能，所以做了两个按钮分别用于放大图片和缩小图片。

在 QPainter 中，可以根据 QPainter 的坐标系进行各种变换，例如平移（translate）和变化（scale），这里就可以通过使用 scale() 方法实现放大和缩小图片。下面是两个按钮点击时触发的方法的具体代码：

 def large_click(self):
   """
   used to enlarge image
   :return:
   """
   if self.box.scale < :
     self.box.scale += .
     self.box.adjustSize()
     self.update()

 def small_click(self):
   """
   used to reduce image
   :return:
   """
   if self.box.scale > .:
     self.box.scale -= .
     self.box.adjustSize()
     self.update()

完整代码已上传到 GitHub！

到此这篇关于使用PyQt5实现图片查看器的示例代码的文章就介绍到这了,更多相关PyQt5 图片查看器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用PyQt的QLabel组件实现选定目标框功能的方法示例

    问题背景   基于PyQt5开发了一个可以用于目标跟踪的软件,在开发过程中遇到一个问题,就是如何在PyQt5的组件QLable中自主选定目标框,这个在opencv里面有专门的函数完成这个工作:cv2.selectROI(),我的目的就是在QLabel的基础上,实现类似函数cv2.selectROI()的功能,这样在运行程序的过程中,就能在视频框里面直接选取感兴趣区域.直接贴出实现的最终效果: 上图中的红色框框就是在QLabel的基础上实现的功能. 实现思路   具体要实现的功能是,在视频显示区域

  • Python PyQt5运行程序把输出信息展示到GUI图形界面上

    概述:最近在赶毕业设计,遇到一个问题,爬虫模块我用PyQt5写了图形界面,为了将所有的输出信息都显示到图形界面上遇到了问题. 先演示一下效果最终效果吧,下面两张图用来镇楼.可以看到我们图形界面和程序运行的返回的信息是一样的,并且成功把数据展示到图形界面.   1.怎么获取输出信息.eg:我们平时用编译器,例如pycharm,运行的时候,会有很多信息,或者直接在cmd窗口输入命令的时候,也有同样信息.例如我启动数据库. cmd窗口下执行命令返回的信息 Pycharm运行的效果 我就想把这种类似输出

  • PyQt5 控件字体样式等设置的实现

    一.API接口设置 比如我这段代码中的一些设置,设置文字.居中.禁止复制.LineEdit输入为password等等 import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QFrame from PyQt5.QtWidgets import QLabel from PyQt5.QtWidgets import QWidget from PyQt5.QtWidgets import QLineEdit from PyQ

  • Python PyQt5模块实现窗口GUI界面代码实例

    PyQt5是基于Digia公司强大的图形程式框架Qt5的python接口,由一组python模块构成.PyQt5本身拥有超过620个类和6000函数及方法.在可以运行于多个平台,包括:Unix, Windows, and Mac OS. 代码如下 from PyQt5.QtWidgets import QApplication,QWidget,QProgressBar,QPushButton from PyQt5.QtCore import QBasicTimer from PyQt5.QtGu

  • PyQt5 文本输入框自动补全QLineEdit的实现示例

    一.QCompleter类 自动补全会用到的一个类 主要代码 def init_lineedit(self): # 增加自动补全 self.completer = QCompleter(items_list) # 设置匹配模式 有三种: Qt.MatchStartsWith 开头匹配(默认) Qt.MatchContains 内容匹配 Qt.MatchEndsWith 结尾匹配 self.completer.setFilterMode(Qt.MatchContains) # 设置补全模式 有三种

  • 基于PyQT实现区分左键双击和单击

    在PyQt中没有直接提供左键双击的判断方法,需要自己实现,其思路主要如下所示: 1.起动一个定时器,判断在指定的时间之内,点击次数超过2次,则视为双击(其主要思路判断两次点击的时间差在预测的条件以内) 2. 起动一个定时器,判断在指定的时间之内,点击次数超过2次,另外再获取鼠标点击的坐标,如果前后两次点击的坐标位置,属于同一个位置,满足这两个条件则判断为双击(其主要思路判断两次点击的时间差在预测的条件以内,且点击的坐标在预设的坐标之内,允许存在一定的偏差) from PyQt5.QtCore i

  • Python3.7下安装pyqt5的方法步骤(图文)

    第一步:首先进入python安装目录下的 [scripts]. 第二步:执行安装pyqt5的命令:python37 -m pip install pyqt5 出现以下安装过程代表安装成功. 第三步:在豆瓣网上安装pyqt5 ,在后面加上" -i https://pypi.douban.com/simple"表示使用豆瓣所提供的镜像: 命令:python37 -m pip install PyQt5 -i https://pypi.douban.com/simple 第四步:安装Qt5图

  • 解决pyqt5异常退出无提示信息的问题

    问题:在pyqt界面运行中会异常退出,但是无出错代码追踪信息. 解决方法: 选中Emulate terminal in output console即可显示错误信息. 补充知识:python logging 日志 通过修饰器获取错误信息 今天公司要求研究一下python日志相关的信息,用户通过使用图形化界面产生错误后并不知道为什么报错.因此,要通过日志实现记录错误的功能. import functools import logging def create_logger(): logger =

  • 使用PyQt5实现图片查看器的示例代码

    一.前言 在学习 PyQt5 的过程中我会不断地做一些小的 Demo,用于让自己能够更好地理解和学习,这次要做的就是一个图片查看器,主要功能包括打开图片.拖动图片.放大和缩小图片. 最终实现的图片查看器你效果如下: 二.主要步骤  1.显示图片 PyQt5 绘图系统能渲染矢量图像.位图图像和轮廓字体文本.一般会使用在修改或者提高现有组件的功能,或者创建自己的组件,使用 PyQt5 的绘图 API 进行操作.在 Qt 中有 QPainter 类用于执行绘制的操作,绘图由 paintEvent()

  • jQuery实现简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

  • viewpager+photoview实现图片查看器

    viewpager+photoview实现图片查看器

    本文实例为大家分享了Android实现图片查看器的具体代码,供大家参考,具体内容如下 效果需要两个手指禁止缩放,所以没有光标,只能用手机投放电脑上录制动态图片: demo中实用了一个第三方的photoview,非常简单实用:可实现图片双击放大,手势放大缩小,当手指离开屏幕时如果图片小于原图可自动恢复原图大小,可实现点击监听,长按图片监听: 整个demo非常简单,整体就是一个activity,页面布局只有一个viewpager和textview <RelativeLayout xmlns:andr

  • Python+PyQt5制作一个图片查看器

    Python+PyQt5制作一个图片查看器

    目录 前言 实现方式 测试 前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在对图像进行缩放旋转等仿射变换时需要对这些形状也这些变换,虽然不难,但是从头实现这些变换还有形状还是挺讨厌的.好在 Qt 提供了图形视图框架,关于这个框架的基本使用可以参见 深入了解PyQt5中的图形视图框架,下面进入正题. 实现方式 一个最基本的照片查看器应该具有以下功能

  • js图片查看器插件用法示例

    js图片查看器插件用法示例

    本文实例讲述了js图片查看器插件.分享给大家供大家参考,具体如下: 首先 在github上下载 js,css点击打开链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/

  • jQuery 图片查看器插件 Viewer.js用法简单示例

    本文实例讲述了jQuery 图片查看器插件 Viewer.js用法.分享给大家供大家参考,具体如下: html: <!-- 引入文件 --> <link rel="stylesheet" href="/css/viewer.min.css" rel="external nofollow" > <script src="/js/viewer.min.js"></script> &l

  • 网页中的图片查看器viewjs使用方法

    网页中的图片查看器viewjs使用方法

    需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明. 下面做2个简单的示例: 1.示例一:单一图片 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"

  • 微信内置浏览器图片查看器的代码实例

    这篇文章主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 var imgs = new Array(); $("img").each(function () { //这里的图片路径要直接能在浏览器中打开的完整的url路径 imgs.push($(this).attr('src')); }); $("img").on('click', function () { var pa

  • vue基于viewer实现的图片查看器功能

    vue基于viewer实现的图片查看器功能

    vue2-viewer vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样式完全移植自viewer.js关于viewer.js可以参考链接 [http://fengyuanchen.github.io...] 插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画,所以vue2-viewer主要实用场景是现代浏览器中. 使用文档 安装 npm

  • require、backbone等重构手机图片查看器

    本文是对之前的部分补充,也是对最近学习require.backbone的一次实例化的实践,希望对正在学习理解中的同学们有帮助 前文请前往:制作手机使用的网页图片查看器 新手机图片查看器 网页部分 require引入是重点,指明了主函数所在文件路径 <!doctype html> <html lang="zh-cn"> <head> <title>webapp图片查看器</title> <meta charset=&quo

随机推荐