首页 文章

如何设置flickable的最大/最小缩放

提问于
浏览 次
0

我正在尝试制作可缩放的 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
                    }
                }
            }
        }
    }
}

它工作得很好，但是当它超过所有屏幕时，我仍然可以缩小（缩小，即父级） .

如何在某个点/刻度处停止缩小（如果可能还放大）？

谢谢您的帮助！

qt qml qt5 pinchzoom

1 回答

  • 0

    最后，我委托删除 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
                }
            }
        }
    }
}
    回复于

相关问题