qml利用Flickable在鼠标处缩放图片大小，并拖拽图片上下左右移动

Flickable控件

官方解释：

它本身就是一个可以缩放和拖拽子控件的一个控件，但是不是很好用。
我们经常在缩放图片大小时，更希望是在鼠标处缩放大小，但Flickable做不到。
所以我加入了MouseArea，重写onWheel事件，但也因此导致Flickable控件的鼠标拖拽功能失效了，需要重写。
现在把我实现的代码贴出来，也方便我日后直接拷贝使用。

源码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Dialogs 1.3
import QtQuick.Controls 1.4

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "#c7e7fc"


    Item {
        anchors.fill: parent

        Flickable {
            id: flickable
            anchors.fill: parent
            contentWidth: oriImg.width
            contentHeight: oriImg.height

            Rectangle{
                anchors.fill: oriImg
                color: "#00FF00"
            }

            Image {
                id: oriImg
                width: 640
                height: oriImg.width * oriImg.implicitHeight / oriImg.implicitWidth
                fillMode: Image.PreserveAspectFit
                source: "file:///E:/work/Image/AppearanceDefect/packing/1001.jpg"

            }
        }

        // onWheel: 鼠标滚轮事件，用来缩放图片
        // drag: 拖动图片上下左右移动，当图片尺寸小于窗口尺寸时不允许拖动，另外，限制一下上下左右移动的范围，不要移出窗口了
        MouseArea {
            anchors.fill: flickable
            hoverEnabled: true // 默认值为false，但如果为false的话，只有在鼠标点击时才能获取鼠标坐标
            drag.target: (oriImg.width <= flickable.width || oriImg.height <= flickable.height) ? null : flickable.contentItem
            drag.axis: Drag.XAndYAxis
            drag.maximumX: flickable.width-200
            drag.minimumX: flickable.contentWidth*-1+200
            drag.maximumY: flickable.height-100
            drag.minimumY: flickable.contentHeight*-1+100
            onWheel: {
                var imgPointX = flickable.contentX + mouseX
                var imgPointY = flickable.contentY + mouseY
                if (wheel.angleDelta.y > 0) { // 滚轮向上滚，放大图片
                    oriImg.width *= 1.2
                    imgPointX *= 1.2
                    imgPointY *= 1.2
                } else { // 滚轮向下滚，缩小图片
                    oriImg.width /= 1.2
                    imgPointX /= 1.2
                    imgPointY /= 1.2
                }
                if (oriImg.width <= flickable.width || oriImg.height <= flickable.height) {
                    // 如果图片尺寸比界面还小，就让图片居中
                    flickable.contentX = (flickable.width - oriImg.width) / 2 * -1
                    flickable.contentY = (flickable.height - oriImg.height) / 2 * -1
                } else {
                    // 使图片在鼠标处放大缩小
                    flickable.contentX = imgPointX - mouseX
                    flickable.contentY = imgPointY - mouseY
                }
            }
        }

    }

}