首先话不多说,全网找遍了都没有找到解决办法,自己最后算出来的。全网第一家,谢谢。
不知道那么录制gif图片,就只能干瘪瘪的凑合着看这三张图片了。
实现的功能:
1、实现图片自由拖拽;
2、实现当鼠标在图片区域内才可以进行缩放;
3、实现图像缩放的时候以鼠标位置为中心点进行缩放(亲测好用,自己写的,不喜勿喷)
实际效果图:
实现原理:
- 定义自己需要显示的区域(rectangle、image等)
- 定义鼠标区域并且去填充显示区域,记住,每次缩放后都需要重新去填充一次才可以
- 根据鼠标获取到图像的位置,进行最开始和最后的位置计算(这一步是最难的,很多人都是写的很难受的那种,我自己试过最少10个人的方法,结果,都是难受的)
好了,废话不多说,看代码
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("自由缩放")
// 定义缩放比例系数变量,范围在(-10,10)之间
property double scaleValue: 1.1
property int scaleLevel: 0
function zoomIn(x,y){
var beforeWidth = showImg.width
var beforeHeight = showImg.height
showImg.width = showImg.width * scaleValue
showImg.height = showImg.height * scaleValue
showImgMouseArea.width = showImg.width
showImgMouseArea.height = showImg.height
showImg.x = showImg.x + x - showImg.width * x / beforeWidth
showImg.y = showImg.y + y - showImg.height * y / beforeHeight
scaleLevel++
}
function zoomOut(x,y){
var beforeWidth = showImg.width
var beforeHeight = showImg.height
showImg.width = showImg.width / scaleValue
showImg.height = showImg.height / scaleValue
showImgMouseArea.width = showImg.width
showImgMouseArea.height = showImg.height
showImg.x = showImg.x + x - showImg.width * x / beforeWidth
showImg.y = showImg.y + y - showImg.height * y / beforeHeight
scaleLevel--
}
Rectangle{
id:showImg
width: 100
height: 100
color: "yellow"
}
MouseArea{
id: showImgMouseArea
anchors.fill: showImg
//设置拖拽对象以及拖拽区域
drag.target: showImg
drag.axis: Drag.XAndYAxis//设置横向纵向拖动
//设置鼠标悬停以及鼠标响应
hoverEnabled: true
// 鼠标滚轮处理函数
onWheel: {
if(wheel.angleDelta.y>0&&scaleLevel<=10){//图像放大处理
showImg.transformOriginPoint.x = wheel.x
showImg.transformOriginPoint.y = wheel.y
zoomIn(wheel.x,wheel.y)
}
else if(wheel.angleDelta.y<0&&scaleLevel>=-10){//图像缩小处理
showImg.transformOriginPoint.x = wheel.x
showImg.transformOriginPoint.y = wheel.y
zoomOut(wheel.x,wheel.y)
}
}
}
}
奇怪了,这个代码片段没有颜色,难受,还有就是你要是觉得我写的玄乎,你自己把代码复制下来去试试就知道了,肯定是你想要的,没有疑问。有问题,请留言 543985125@qq.com ,我们一起学qml,一起掉头发。