qml 在鼠标位置放大图像

首先话不多说，全网找遍了都没有找到解决办法，自己最后算出来的。全网第一家，谢谢。

不知道那么录制gif图片，就只能干瘪瘪的凑合着看这三张图片了。
实现的功能：
1、实现图片自由拖拽；
2、实现当鼠标在图片区域内才可以进行缩放；
3、实现图像缩放的时候以鼠标位置为中心点进行缩放（亲测好用，自己写的，不喜勿喷）

实际效果图：

实现原理：

1. 定义自己需要显示的区域（rectangle、image等）
2. 定义鼠标区域并且去填充显示区域，记住，每次缩放后都需要重新去填充一次才可以
3. 根据鼠标获取到图像的位置，进行最开始和最后的位置计算（这一步是最难的，很多人都是写的很难受的那种，我自己试过最少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)
             }
         }
     }
}

奇怪了，这个代码片段没有颜色，难受，还有就是你要是觉得我写的玄乎，你自己把代码复制下来去试试就知道了，肯定是你想要的，没有疑问。有问题，请留言 [email protected] ，我们一起学qml，一起掉头发。