关于PyQt5在Label标签插入图片并且实现图片的拖拽和缩放
作为菜鸟为了实现这两个功能,肯定是要借鉴一下大佬的文章的,下面的链接就是我思路的源头:
https://blog.csdn.net/qq_36780295/article/details/108844005
这个大佬的几篇文章详细介绍了关于图片的拖拽,但是关于图片的缩放这位大佬已经实现但并未具体讲述,甚至会产生一些误导(当然可能是这位大佬未注意吧),我也是迷了到好久才走出来,下面便开始介绍自己的思路。
label图片的拖拽实现
首先关于label标签内插入图片,为了实现图片的移动,可以将label标签插入到一个容器内,我选择的是QGroupBox,设置窗口的代码如下:
class Ui_Form(QtWidgets.QWidget):def __init__(self):super(Ui_Form, self).__init__()self.setGeometry(100,100,1000,800)self.setWindowTitle('image')self.groupBox = QtWidgets.QGroupBox(self) #设置的groupBox容器self.groupBox.setGeometry(QtCore.QRect(10, 60, 841, 611))self.groupBox.setObjectName("groupBox")self.label = QtWidgets.QLabel(self.groupBox) #设置的位于容器内部的label控件self.label.setCursor(QtCore.Qt.PointingHandCursor)self.label.setGeometry(QtCore.QRect(0, 0, 621, 461))self.label.setObjectName("label")self.label.setAlignment(QtCore.Qt.AlignCenter)
关于图片的插入我这里是设置了一个按钮控件链接到一个槽函数获取本地图片文件,然后显示在label上:
def on_pushButton1_clicked(self):self.path = QtWidgets.QFileDialog.getOpenFileName()#获取本地文件路径self.cur_img = cv.imread(self.path[0]) #此处使用了OpenCV包的函数self.img = QPixmap(self.path[0]) #获取QPimax对象self.label.setPixmap(self.img) #插入label中self.label.setFrameShape(QtWidgets.QFrame.Box) #设置label标签的边框self.label.setLineWidth(1) self.label_w = self.label.width()self.label_x = self.label.x()self.label_y = self.label.y()self.label_h = self.label.height()self.label.setScaledContents(True) #设置label内部图片自适应填充
随后便是实现图片的拖拽了,这里我们需要实现鼠标按下、释放以及鼠标移动事件:
def mousePressEvent(self, e):if e.buttons() == QtCore.Qt.LeftButton:self.flag = Truedef mouseReleaseEvent(self, e): #鼠标释放事件重写self.flag = Falseself.movex = ""self.movey = ""
这里设置的中间点需要我们在之前设置好,这里每次释放的时候把其全部清空,然后便是鼠标移动事件
def mouseMoveEvent(self, e):if self.flag:self.x1 = e.x()self.y1 = e.y()if self.movex != "" and self.movey != "":self.label_x = self.label_x + (self.x1 - self.movex)self.label_y = self.label_y + (self.y1 - self.movey)self.movex = self.x1self.movey = self.y1self.label.setGeometry(QtCore.QRect(self.label_x, self.label_y, self.label_w, self.label_h)) #使得图片能够随着缩放而不影响大小,
#同时QtCore.QRect确定图形为矩形
显然,拖拽事件是利用鼠标按下时flag为True,结合鼠标移动事件在释放时重新获得label标签的坐标,鼠标释放时将中间点清空,以防止影响下一次拖拽事件。这里需要细品的就是鼠标移动事件里的第二个if语句的内容,通过判断中间点的坐标是否为空来进行事件的进行。
以鼠标为中心对label中的图片进行缩放
在说思路之前我们先看一张图:(这个图只是作为一个参考,白色为label区域,蓝色为QgroudBox)
这样我们就能够得到鼠标在窗口里相对于label的具体坐标,因为我们要实现的是根据鼠标为中心进行缩放,第一次鼠标坐标与label宽、高的比值,和第二次鼠标坐标(相对于label)和label宽高的比值是相等的,通过计算那么我们就能得到第二次进行缩放之后label标签的坐标,这样我们就能够将新的label显示出来。
def wheelEvent(self,e):self.angle = e.angleDelta()/8self.angleY = self.angle.y()if self.angleY > 0:if self.resize_point >=1 and self.resize_point <=19 : #此处的self.resize_point初始值为10,作为缩放系数self.resize_point +=1elif self.angleY < 0:if self.resize_point >=2 and self.resize_point <=20:self.resize_point -=1x_1 = e.x()y_1 = e.y()x2 = (x_1 - 10- self.label.x())/self.label.width() #第一次鼠标坐标x比值y2 = (y_1 - 60- self.label.y())/self.label.height() #第一次鼠标坐标y比值#由于cV2包得到图像并非是我们所需的图片对象,这里先是对图片宽高根据缩放系数进行改变,然后将图片转换为QImage对象,在转换为QPixmap对象self.cur_resimg = cv.resize(self.cur_img,((int(self.cur_img.shape[1]*self.resize_point/10)),(int(self.cur_img.shape[0]*self.resize_point/10))))img2 = cv.cvtColor(self.cur_resimg, cv.COLOR_BGR2RGB) #转RGB格式,以在Qlabel中显示QImage = QtGui.QImage(img2, self.cur_resimg.shape[1], self.cur_resimg.shape[0], 3 * self.cur_resimg.shape[1],QtGui.QImage.Format_RGB888)pixmap = QtGui.QPixmap((QImage).scaled(self.cur_resimg.shape[1], self.cur_resimg.shape[0]))self.label_w = self.cur_resimg.shape[1]self.label_h = self.cur_resimg.shape[0]if int(x2)==0 and int(y2)==0 :x3 = x2y3 = y2Lmx2 = x3 * self.label_wLmy2 = y3 * self.label_hself.label_x = int(x_1 - 10 - Lmx2)self.label_y = int(y_1 - 60 - Lmy2)self.label.setGeometry(QtCore.QRect(self.label_x,self.label_y,self.label_w,self.label_h))self.label.setPixmap(pixmap)
以上代码就实现了关于图片的滑动。
2021.07.07
资源如下:
https://download.csdn.net/download/zhaodongdz/20588516
关于PyQt5在Label标签插入图片并且实现图片的拖拽和缩放相关推荐
- PPT中要实现图片或图形的任意拖拽
PPT中要实现图片或图形的任意拖拽需要通过VBA编程.现介绍利用图像控件实现图片任意拖拽的方法: 1.在演示文稿插入图像控件,打开属性窗口,将picture设成你想拖动的图片,遗憾的是Image控件不 ...
- vue 图片拖拽移动缩放
问题描述:因"Viewer"插件功能在软件内嵌入的web页面不兼容,无法移动.(IE内核)由于调试困难,浏览器运行正常,软件中无法使用,不报错捕获不到异常:然后各种查询资料各种造轮 ...
- canvas在图片上绘制标记,可拖拽、缩放,基于ZRender
如下图所示,在图片上做标记,如圆形.矩形等. 该demo实现画布在页面布局中缩放后居中显示,可拖拽.缩放.做标记说明. 项目下载地址:https://gitlab.com/zhangcw66/draw ...
- vue-quill-editor图片大小的编辑,拖拽,上传视频
vue-quill-editor图片大小的编辑,拖拽,上传视频 在vue组件中注册和使用 <quill-editor v-model="formInline.viewConfig&qu ...
- 图片多选上传拖拽切换位置
html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 图片上传(支持拖拽上传)及列表图片预览
要注意的是图片路径 先看效果图: 下面是代码啦: 前端ftl index: <#assign base=request.contextPath/> <!DOCTYPE HTML> ...
- 标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
- android imageview 多点触碰(MultiTouch)实现图片拖拽移动缩放
刚用android手机 发现手机自带的图片浏览器挺酷 可以用手指移动 缩放 还有动画效果 Intent intent = new Intent(Intent.ACTION_VIEW); ...
- vue 图片添加,删除、拖拽排序
目的:现有一个图片的列表,拖动其中一个图片(触发dragstart),当拖动的图片移动到其他图片的位置(触发dragover),则将拖动的图片从原位置移动到该位置(触发dragend). dragst ...
最新文章
- 若显示器接口电路中的刷新存储器容量为1MB,当采用800*600的分辨率模式时,每个像素最多可以有多少()种颜色
- StringBuilder与 StringBuffer
- SQL-4查找所有已经分配部门的员工的last_name和first_name(自然连接)
- file_operations结构
- Mac OS X 中快速访问系统根目录的四种方法
- C++内存分配方式-堆、栈、自由存储区、全局/静态存储区和常量存储区
- LaTeX最全的数学符号大全(更新中…… )
- PHP 如何使用Mobile Detect来判断访问网站的设备 安卓,平板,电脑
- QT实现FTP下载文件功能
- linux如何打开22端口?如何开启ssh远程链接
- vagrant入门_在Vagrant上使用PHP入门的5种简单方法
- 画坦克__坦克可移动
- 苹果Swift语言入门教程
- 简单解析手机充电器的工作原理
- Wish封店的原因有哪些?
- 多线程(五、原子类-AtomicReference)
- Clickhouse基于物化引擎(MaterializedMySQL)来同步mysql
- 计算机网络---DHCP和自动配置
- java读取微信消息_android 读取微信聊天内容 示例源码(AccessibilityService)
- GB/T19001-2008/ISO 9001:2008条款图解