Question

我正在尝试使Item（Image或任何其他组件）可缩放，并将其用于平板电脑。目前，我的代码如下：

Rectangle {
    id: root
    anchors.fill: parent
    color: mainWindow.toGradient
    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: width
        contentHeight: height
        boundsBehavior: Flickable.StopAtBounds

        PinchArea {
            id: pArea
            width: Math.max(flick.contentWidth, flick.width)
            height: Math.max(flick.contentHeight, flick.height)
            property real initialWidth
            property real initialHeight
            onPinchStarted: {
                initialWidth = flick.contentWidth
                initialHeight = flick.contentHeight
            }
            onPinchUpdated: {
                flick.contentX += pinch.previousCenter.x - pinch.center.x
                flick.contentY += pinch.previousCenter.y - pinch.center.y

                flick.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
            }

            onPinchFinished: {
                flick.returnToBounds()
            }

            Rectangle {
                width: flick.contentWidth
                height: flick.contentHeight
                color: "black"
                Image {
                    anchors.fill: parent
                    source: "qrc:/image.jpg"
                }

                MouseArea {
                    anchors.fill: parent
                    onDoubleClicked: {
                        flick.contentWidth = root.width
                        flick.contentHeight = root.height
                    }
                }
            }
        }
    }
}

它的效果很好，但是当它在所有屏幕上显示时，我仍然可以缩小（使该父对象变小）。

如何在某个点/比例上停止缩小（如果可能，也可以放大）？

谢谢您的帮助！

Answer 1

最后，我迷恋地删除了Flickable并缩放了Item。

Rectangle {
    id: root
    anchors.fill: parent
    color: "black"

    Item {
        id: photoFrame
        width: root.width
        height: root.height
        Image { 
            id: image
            anchors.fill: parent
            source: "image.jpg"
        }

        PinchArea {
            anchors.fill: parent
            pinch.target: photoFrame
            pinch.minimumRotation: 0 //Rotation (i guess we don't need to rotate it)
            pinch.maximumRotation: 0
            pinch.minimumScale: 1 //Minimum zoom for camera
            pinch.maximumScale: 4 //Maximum zoom for camera

            onPinchUpdated: { //Dont zoom behind border
                if(photoFrame.x < dragArea.drag.minimumX)
                    photoFrame.x = dragArea.drag.minimumX
                else if(photoFrame.x > dragArea.drag.maximumX)
                    photoFrame.x = dragArea.drag.maximumX

                if(photoFrame.y < dragArea.drag.minimumY)
                    photoFrame.y = dragArea.drag.minimumY
                else if(photoFrame.y > dragArea.drag.maximumY)
                    photoFrame.y = dragArea.drag.maximumY
            }

            MouseArea {
                id: dragArea
                hoverEnabled: true
                anchors.fill: parent
                drag.target: photoFrame
                scrollGestureEnabled: false  // 2-finger-flick gesture should pass through to the Flickable
                drag.minimumX: (root.width - (photoFrame.width * photoFrame.scale))/2
                drag.maximumX: -(root.width - (photoFrame.width * photoFrame.scale))/2
                drag.minimumY: (root.height - (photoFrame.height * photoFrame.scale))/2
                drag.maximumY: -(root.height - (photoFrame.height * photoFrame.scale))/2

                onDoubleClicked: { //Reset size and location of camera
                    photoFrame.x = 0
                    photoFrame.y = 0
                    photoFrame.scale = 1
                }
                onWheel: {
                    var scaleBefore = photoFrame.scale
                    photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10
                    if(photoFrame.scale < 1)
                        photoFrame.scale = 1
                    else if(photoFrame.scale > 4)
                        photoFrame.scale = 4

                    if(photoFrame.x < drag.minimumX)//Dont zoom behind border of image
                        photoFrame.x = drag.minimumX
                    else if(photoFrame.x > drag.maximumX)
                        photoFrame.x = drag.maximumX

                    if(photoFrame.y < drag.minimumY)
                        photoFrame.y = drag.minimumY
                    else if(photoFrame.y > drag.maximumY)
                        photoFrame.y = drag.maximumY
                }
            }
        }
    }
}

如何设置可滑动的最大/最小缩放

1 个答案: