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

Question

我有一个 Qt 应用程序，它运行在 iOS 和 OSX 使用 Qt 5.10 商业版。我有一个 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 正在更新。但我正在努力弄清楚我应该如何重新计算新的 my_qml_item.x 和 my_qml_item.y

问题：
我也在 onXChanged 和 onYChanged 上收到 x 和 y 更新。基本问题是，如何计算加上连续更新 my_qml_item.x 和 my_qml_item.y.

是否有 Qt/QML 的平移或拖动 QML 项目的好例子？

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

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

Answer 1

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

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

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()
}

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

How to pan a QML item on MouseArea drag

qt

qml

qtquick2

qquickitem