Question

我有以下代码，允许在应用程序窗口上平移图像

代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: app
    visible: true
    title: qsTr("Test panning an Image")

    width: 700
    height: 700

    Image {
        id: my_image_item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        MouseArea{
            anchors.fill: parent
            drag.target: my_image_item
            drag.axis: Drag.XAndYAxis
        }
    }
}

目的：
我想阻止图像在其父级之外被拖动/平移。

基本上我不想让 my_image_item移到以下位置：

my_image_item的右边缘位于其父级左边缘的左侧，
my_image_item的左边缘位于其父边的右边缘
my_image_item的上边缘位于其父边缘的下方
my_image_item的下边缘位于其父级的上边缘

主要问题：
如何在用户拖动my_image_item时限制my_image_item在其父级边缘内的移动？

次要问题：（如果回答那么好）：
限制my_image_item移动的项目必须严格控制其父级？或者它可能是另一个不是它的父项的项目？（至少有一个共享一个共同的QML父级）

Answer 1

您是否尝试使用drag.maximumX / drag.minimumX

http://doc.qt.io/qt-5/qml-qtquick-mousearea.html#drag.minimumX-prop

Image {
        id: my_image_item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        MouseArea{
            anchors.fill: parent
            drag.target: my_image_item
            drag.axis: Drag.XAndYAxis
            drag.minimumX: my_image_item.x
            drag.maximumX: my_image_item.right // my_image_item.x + width ???
            drag.minimumY: my_image_item.y
            drag.maximumY: my_image_item.bottom // my_image_item.y + height ???
        }
    }

Answer 2

我从Qt docs本身得到了我的问题的答案。

在MouseArea的拖动属性限制将其移动到其父级边界内时，另外添加以下内容。

解决方案：

drag.minimumX: 0
drag.maximumX: app.width - my_image_item.width
drag.minimumY: 0
drag.maximumY: app.height - my_image_item.height

给出了我想要在问题中列出的4个要点中模拟的行为。

以下是最终测试应用的外观：

完整代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: app
    visible: true
    title: qsTr("Test panning an Image")

    width: 700
    height: 700

    Image {
        id: my_image_item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        MouseArea{
            anchors.fill: parent
            drag.target: my_image_item
            drag.axis: Drag.XAndYAxis

            drag.minimumX: 0
            drag.maximumX: app.width - my_image_item.width
            drag.minimumY: 0
            drag.maximumY: app.height - my_image_item.height
        }
    }
}

我仍在努力找出我的其他次要问题的答案

如何阻止QML项目被淘汰或其父级边界

2 个答案: