Как найти минимум и максимум для перетаскивания MouseArea в QML - PullRequest
Новая
       19

Как найти минимум и максимум для перетаскивания MouseArea в QML

0 голосов
/ 07 сентября 2018

Я создал компонент в 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 / .., но безуспешно - он работает, когда не увеличено, но я не могу понять формулу для увеличенного.

Какую формулу я должен использовать, или есть ли лучший способ сделать это?

...