Qml - 如何阻止一个矩形拖到它的父节点外？

Question

我使用qml创建了一个可调整大小的矩形，这个矩形可以在它的父窗格内拖动，但不能拖到外面（图1）。当我调整它的大小时，例如使用左上角的句柄，它工作得很好，而且不能在它的父窗格外调整大小（图2）。但当我拖动整个矩形时，它可以被拖到其父节点之外（图3）。我的代码试图对这两种情况使用相同的逻辑，即一旦矩形的左侧到达其父体的左侧，就会取消拖动。调整大小时工作正常，但当我拖动矩形时却不正常。我到底做错了什么？

Pane {
            id: compPane
            implicitHeight: imageListModel.reqViewHeight
            implicitWidth: imageListModel.reqViewWidth
            leftPadding: 0
            topPadding: 0
            clip: true

            background: Rectangle{
                id: backgroundRect
                anchors.fill: parent
                color: "gray"
                border.color: "black"
                border.width: 6
            }

            // Resizable rectangle that can be dragged
            Rectangle {
                id: indRect
                x:parent.width / 4
                y: parent.height / 4
                width: parent.width / 2
                height: parent.width / 2
                border {
                    width: 2
                    color: "steelblue"
                }
                color: "#354682B4"

                MouseArea {
                    id: indImagesDragArea
                    anchors.fill: parent
                    anchors.margins: 8
                    drag.target: parent

                    onPositionChanged: {
                        if (drag.active){
                            if (indRect.x <= 0 + backgroundRect.border.width)
                                Drag.cancel()
                            if (indRect.x + indRect.width >= (compPane.width - backgroundRect.border.width) )
                                Drag.cancel()
                        }
                    }
                }

                // Top Left handle - works well
                Rectangle {
                    width: 15
                    height: 15
                    color: "steelblue"
                    anchors.verticalCenter:parent.top
                    anchors.horizontalCenter: parent.left
                    MouseArea {
                        anchors.fill: parent
                        cursorShape: Qt.SizeFDiagCursor
                        drag{ target: parent; axis: Drag.XAndYAxis }
                        onPositionChanged: {
                            if(drag.active){
                                //var delta = Math.max(mouseX, mouseY)
                                var newWidth = indRect.width - mouseX
                                var newHeight = indRect.height - mouseY;

                                if (newWidth < width || newHeight < height)
                                    return

                                if (indRect.x <= 0 + backgroundRect.border.width && mouseX < 0){
                                    Drag.cancel()
                                    indRect.x =  0 + backgroundRect.border.width
                                }
                                else {
                                    indRect.width = newWidth
                                    indRect.x = indRect.x + mouseX
                                }

                                if (indRect.y <= 0 + backgroundRect.border.width && mouseY < 0){
                                    Drag.cancel()
                                    indRect.y = 0 + backgroundRect.border.width
                                }
                                else{
                                    indRect.height = newHeight
                                    indRect.y = indRect.y + mouseY
                                }
                            }
                        }
                    }
                }
            }
        }

Answer 1

Drag.cancel() 实际上，它是用于实现拖放类型的交互时使用的。在这种情况下，对它的调用没有任何作用，因为您从未真正启动这些序列之一。您的左上角句柄示例可以正常工作，如果您注释掉对 Drag.cancel().

为什么你的左上角的例子是工作的，因为你限制了位置更新的x和y，通过显式更新的 indRect.x 和 indRect.y. 你只需要对主要的拖动场景实现同样的技术。

例如，你可以尝试使用拖动.最小和拖动.最大的属性。

onPositionChanged: {
    if (drag.active){
        if (indRect.x <= 0 + backgroundRect.border.width)
            indRect.x =  0 + backgroundRect.border.width;
        if (indRect.x + indRect.width >= (compPane.width - backgroundRect.border.width) )
            indRect.x = compPane.width - backgroundRect.border.width - indRect.width;
    }
}

Answer 2

你可以尝试使用drag.minimum和drag.maximum的属性，请看文档。

https:/doc.qt.ioqt-5qml-qtquick-mousearea.html#drag.threshold-prop#。