时间戳

首页 > 解决方案 > 将矩形附加和分离到 QML 中的移动矩形

qt - 将矩形附加和分离到 QML 中的移动矩形

问题描述

我想在中实现，只要按住一个按钮，两个矩形就会一起移动，但是一旦我释放它，其中一个矩形就会保持在释放时的位置。

以搬家Rectangle为主，其代码如下：

Rectangle {
    id: master
    x: 10
    y: 10
    width: 50
    height: 50
    color: "#00ff00"

    Behavior on x {
        NumberAnimation {
            duration: 2000
        }
    }
}

只要按住按钮，从机就应该与主机一起移动的代码如下：

Rectangle {
    id: slave
    x: 100
    y: 100
    width: 50
    height: 50
    color: "#ff0000"
}

目前我已经做了以下尝试将奴隶附加和分离到主人：

ToggleButton {
    id: attach
    x: 300
    y: 300
    text: qsTr("Attach")

    onClicked: {
        if (checked) {
            slave.parent = master
        } else {
            slave.parent = mainWindow
        }
    }
}

问题是，如果主机已经在移动，按下按钮将使从机跳转到它从一开始就与主机一起移动的位置，然后即使在释放按钮后仍继续与主机一起移动。

如何任意将其他对象附加到移动对象上，然后在中将它们分离？

标签： qtanimationqmlqtquick2

解决方案

您将奴隶作为主人的孩子的方法是导致跳跃的原因。一旦从属设备被重新设置，它的 x 和 y 为 100 就将其放置在相对于其新父级的master位置，而不是相对于 mainWindow 的位置。

当你重新设置它时，你需要将slave的x和y相对于master设置为x和y从mainWindow坐标系到master坐标系的平移。查看Item::mapFromItem并Item::mapToItem了解如何将 slave 的 x 和 y 的 100 在 的上下文中mainWindow转换为屏幕上的相同物理位置但就新的 parent 而言master。

请注意，当您停止拖动并将从属设备重新设置为主窗口时，您需要反向执行相同的操作。

以下是一些代码更新的截图：

ToggleButton {
    id: attach
    x: 300
    y: 300
    text: qsTr("Attach")

    onClicked: {
        if (checked) {
            var newPoint = mainWindow.contentItem.mapToItem(master, slave.x, slave.y);
            slave.parent = master;
            slave.x = newPoint.x;
            slave.y = newPoint.y;
        } else {
            var newPoint = master.mapToItem(mainWindow.contentItem, slave.x, slave.y);
            slave.parent = mainWindow.contentItem;
            slave.x = newPoint.x;
            slave.y = newPoint.y;
        }
    }
}

推荐阅读