3

我正在 QML 中构建捏合和缩放功能。出于性能原因， pinchArea 是 flickable 项目的子项。

下面的代码设置了如果用户在操作后双击图像，图像会重新居中并且比例重置为 1。

不受欢迎的行为是：可滑动项目的一个特性是，如果用户在图像缩放/移动后点击屏幕中的某个位置，该项目会重新居中。我不希望在点击屏幕后图像自行重新定位，而是想通过双击来控制行为

我可以半解决这个问题的一种方法是使用鼠标区域，但是当可滑动项目移动时，鼠标区域会移动，并且在鼠标区域之外单击会使项目重新居中。关于如何修改鼠标区域以防止此操作或关闭轻按可轻按项目的行为并在捏合和缩放后将其自身居中的任何想法？

感谢您的帮助/建议！

import QtQuick 2.0

Rectangle {
    width: 640
    height: 360
    color: "gray"

    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: 500
        contentHeight: 500

        Rectangle {
            width: flick.contentWidth
            height: flick.contentHeight
            id: imageFlick

            gradient: Gradient {
                GradientStop { position: 0.0; color: "red" }
                GradientStop { position: 1.0; color: "white" }
            }
        }

        PinchArea {
            width: Math.max(flick.contentWidth, flick.width)
            height: Math.max(flick.contentHeight, flick.height)

            pinch.minimumScale: 1
            pinch.maximumScale: 10
            pinch.dragAxis: Pinch.XAndYAxis
            pinch.target: imageFlick

            property real initialWidth
            property real initialHeight

            onPinchStarted: {
                initialWidth = flick.contentWidth
                initialHeight = flick.contentHeight
                flick.interactive = false
            }

            onPinchUpdated: {
                flick.contentX += pinch.previousCenter.x - pinch.center.x
                flick.contentY += pinch.previousCenter.y - pinch.center.y
            }

            onPinchFinished: {
                flick.interactive = true
            }

            MouseArea {
                anchors.fill: flick
                width: flick.width
                height: flick.height

                //Prevents behaivor of recentering on tap within mouse area
                //                onClicked: {
                //                    flick.cancelFlick()
                //                }

                //For debugging - if tap inside area, recentering doesn't happen. If you tap
                // outside of area, recentering happens
                //                Rectangle {
                //                    anchors.fill:parent
                //                    color: "blue"
                //                }

                onDoubleClicked: {
                    flick.contentX = 0
                    flick.contentY = 0
                    imageFlick.scale = 1
                }
            }
        }
    }
}
4

1 回答 1

0

我设法自己回答了这个问题。对于 onPinchUpdated，需要将 flick.contentX 和 flick.contentY 更改为 flick.x 和 flick.y。我还更改了一些元素的顺序以及它们的嵌套方式。

现在不再发生单击时矩形居中的不良行为。


        Rectangle {
            width: 900
            height: parent.height

            Rectangle { // pinch area
                id: test
                width: 800
                height: 500
                anchors.centerIn: parent
                color: "grey"
                clip: true

                Flickable {
                    id: flick
                    anchors.fill: parent
                    contentWidth: imageFlick.width
                    contentHeight: imageFlick.height

                    PinchArea {
                        id: pinchROI
                        width: Math.max(flick.contentWidth, flick.width)
                        height: Math.max(flick.contentHeight, flick.height)

                        pinch.minimumScale: 1
                        pinch.maximumScale: 10
                        pinch.dragAxis: Pinch.XAndYAxis
                        pinch.target: imageFlick

                        property real initialWidth
                        property real initialHeight

                        onPinchStarted: {
                            initialWidth = flick.contentWidth
                            initialHeight = flick.contentHeight
                            flick.interactive = false
                        }

                        onPinchUpdated: {
                            flick.x = pinch.previousCenter.x - pinch.center.x
                            flick.y = pinch.previousCenter.y - pinch.center.y
                        }

                        onPinchFinished: {
                            flick.interactive = true
                        }

                        MouseArea {
                            anchors.fill: parent

                            Rectangle {
                                id: imageFlick
                                width: 800
                                height: 500

                                gradient: Gradient {
                                    GradientStop { position: 0.0; color: "red" }
                                    GradientStop { position: 1.0; color: "yellow" }
                                }
                            }

                            onDoubleClicked: {
                                imageFlick.scale = 1
                                imageFlick.x = 0
                                imageFlick.y = 0
                            }
                        }
                    }
                }
            }
        }
于 2020-05-28T12:22:33.760 回答