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

Posted 2023-02-16

【中文标题】如何阻止 QML 项目被淘汰或其父项的边界

【英文标题】：How to block a QML item from getting panned out or its parent's boundaries

【发布时间】：2018-02-13 10:36:12

【问题描述】：

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

代码：

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 父级）

【问题讨论】：

你试过onDragFinished()

onDragFinished 将如何提供帮助？

@Game_Of_Threads 这无济于事。有助于克服懒惰并应用一些基本的三年级数学来设置阻力限制以映射到您想要限制阻力的任何区域。提示 - 您还必须考虑拖动项目的尺寸和相对于拖动项目的拖动原点。

@dtech 我几乎在我在下面发布的问题的答案中发现了这一点。但是删除了那个答案，因为它与我在问题中设定的要求相差 10%。但无论如何，我自己弄清楚了那个数学。我会更新我的答案

【参考方案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 ???
        
    

【讨论】：

好的。这并不完全按照我需要的方式工作。但我可以使用 4 个边缘周围的一些数学来使其工作。接受这个答案。谢谢

【参考方案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
        
    

我仍在寻找我的附加次要问题的答案