如何在 MouseArea 拖动上平移 QML 项目

Posted 2023-02-16

【中文标题】如何在 MouseArea 拖动上平移 QML 项目

【英文标题】：How to pan a QML item on MouseArea drag

【发布时间】：2018-02-04 19:07:12

【问题描述】：

我有一个 Qt 应用程序，它使用 Qt 5.10 商业版在 ios 和 OSX 上运行。我有一个承载图像的 QML 项目。当用户的手指在其上拖动或鼠标被拖动时，我正在尝试平移 QML 项目。

以下是我试图使我的 QML 项目可平移：

代码：

MyQmlItem 
    id: my_qml_item
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter

    onXChanged: 
        if (my_qml_item_mouse_area.drag.active) 
            console.log("x = " + x)
            my_qml_item.x = // what to set x here to move my_qml_item wrt finger or mouse pressed movement
        
    
    onYChanged: 
        if (my_qml_item_mouse_area.drag.active) 
            console.log("y = " + y)
            my_qml_item.y = // what to set y here to move my_qml_item wrt finger or mouse pressed movement
        
    

    MouseArea 
        id: my_qml_item_mouse_area
        anchors.fill: parent

        drag 
            id: drag_area
            target: my_qml_item
            axis: Drag.XandYAxis
        

    

我知道当onXChanged 和onYChanged 处于活动状态并且x y 正在更新时，我必须更新MyQmlItem 的x 和y 位置。但我很难弄清楚我应该如何重新计算新的my_qml_item.x 和my_qml_item.y

问题： 我也收到了x 和y 的onXChanged 和onYChanged 的更新。基本问题是，如何计算加上不断更新my_qml_item.x和my_qml_item.y。

有没有 Qt/QML 用于平移或拖动 QML 项目的好示例？

有没有办法通过仅设置默认x 和y 来复制以下锚点？因为，它与拖动QML组件直接冲突

anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter

【问题讨论】：

按下并移动鼠标时是否要移动项目？

为什么要在x变化的时候改变Y坐标，反之亦然？

哦。那是一个错误。我会编辑更正

执行这个：gist.github.com/eyllanesc/2851e202856317ee06c3153ed6e9c23e

您不应该更改信号中指示其更改的属性，因为当您完成更改后，您将再次调用它，而新调用将再次调用，等等。

【参考方案1】：

如果您希望拖动锚点，则不应使用锚点，因为它会链接项目几何的某些部分。

在您的情况下，您只需要在特定时间建立特定位置，例如在应用程序启动时，因此您可以使用属性“x”、“y”、“width”和“而不是设置锚点”高度”。

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

ApplicationWindow 
    id: app
    visible: true
    visibility: "FullScreen"
    title: qsTr("Scroll")

    function resetPosition()
        item.x = Screen.orientation === Qt.PortraitOrientation ? (Screen.width - item.width)/2 : (Screen.height - item.height)/2
        item.y = 0
    

    Image 
        id: item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        onStatusChanged:  
            if(status == Image.Ready)
                resetPosition()
        
        MouseArea
            anchors.fill: parent
            drag.target: item
            drag.axis: Drag.XAndYAxis
            onClicked: resetPosition()
        

    

    property bool isPortrait: Screen.primaryOrientation === Qt.PortraitOrientation || Screen.primaryOrientation === Qt.InvertedPortraitOrientation
    property bool isLandscape: Screen.primaryOrientation === Qt.LandscapeOrientation || Screen.primaryOrientation === Qt.InvertedLandscapeOrientation

    onIsPortraitChanged: resetPosition()
    onIsLandscapeChanged: resetPosition()

【讨论】：

非常感谢。知道我应该摆脱锚以使这一切顺利进行，这对我来说非常重要。很棒