如何在 MouseArea 拖动上平移 QML 项目
Posted
技术标签:
【中文标题】如何在 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()
【讨论】:
非常感谢。知道我应该摆脱锚以使这一切顺利进行,这对我来说非常重要。很棒以上是关于如何在 MouseArea 拖动上平移 QML 项目的主要内容,如果未能解决你的问题,请参考以下文章
QML实现PinchArea和MouseArea实现图片缩放和平移功能同时具备
覆盖 QML 行的 MouseArea(或自动调整大小的图像+文本)
如何通过按下和拖动在 Qt Quick/QML 画布中绘制一个矩形