如何在QML中找到MouseArea拖动的最小值和最大值

时间:2018-09-07 14:45:04

标签: qt qml qtquick2

我已经在QML中创建了一个包含Image的组件,我希望对其进行缩放。我还想用鼠标移动Image(就像在手机照相馆中一样),因此在不缩放时不能移动,在缩放时只能移动到边界为止。我有点被困在这里,因为我不知道如何正确设置“边界点”。

Zooming.qml

import QtQuick 2.9

Rectangle {
    id: root
    anchors.fill: parent
    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: width
        contentHeight: height
        boundsBehavior: Flickable.StopAtBounds
        Rectangle {
            id: testRect
            width: flick.contentWidth
            height: flick.contentHeight
            Image {
                anchors.fill: parent
                source: "image.jpg"
            }
            PinchArea {
                anchors.fill: parent
                pinch.target: testRect
                pinch.minimumRotation: 0 //No need for rotation
                pinch.maximumRotation: 0
                pinch.minimumScale: 1 
                pinch.maximumScale: 4 
                pinch.dragAxis: Pinch.XAndYAxis
                property real initialWidth
                property real initialHeight

                MouseArea {
                    id: dragArea
                    hoverEnabled: true
                    anchors.fill: parent
                    drag.target: testRect
                    scrollGestureEnabled: false  // 2-finger-flick gesture should pass through to the Flickable
            //----------- Set bounds for dragging
                    drag.minimumX: root.width - (testRect.width * testRect.scale)
                    drag.minimumY: root.height - (testRect.height * testRect.scale)
                    drag.maximumX: testRect.scale == 1 ? -root.width : root.width * testRect.scale
                    drag.maximumY: testRect.scale == 1 ? -root.height : 0 + (testRect.scale / testRect.width)
            // ----------
                    onDoubleClicked: { //Reset size and location of camera
                        testRect.x = 0
                        testRect.y = 0
                        testRect.scale = 1
                    }
                    onWheel: {
                        var scaleBefore = testRect.scale;
                        testRect.scale += testRect.scale * wheel.angleDelta.y / 120 / 10;
                        if(testRect.scale < 1)
                            testRect.scale = 1
                        else if(testRect.scale > 4)
                            testRect.scale = 4
                    }
                }
            }
        }
    }
}

我尝试用drag.maximumY / drag.minimumY / ..来做到这一点,但没有成功-在不缩放时可以使用,但是我无法弄清楚缩放后的公式。

我应该使用什么公式,或者有什么更好的方法?

0 个答案:

没有答案