qt - QML - 跟踪组件的全局位置

Question

我想跟踪一个对象的全局位置(或相对于它的祖先之一)并将其绑定(bind)到其他项目的位置。

我正在考虑使用mapFromItem如下:

SomeObject {
  x: ancestor.mapFromItem(trackedObject, trackedObject.x, 0).x
  y: ancestor.mapFromItem(trackedObject, 0, trackedObject.y).y
}

这种方法的问题在于 mapFromItem被评估一次并且不会随着其参数之一的更新而更新。此外，映射有时会返回由我无法在代码中跟踪的偏移量更改的新位置(但这不是手头的问题)。

我的第二个想法是通过实现一个函数来计算全局位置，该函数将递归地对偏移量求和，并在提供的祖先处停止(类似于 calculateOffsetFrom(ancestor) )。尽管如此，这只是一个函数，就我而言，它不会随着祖先位置之一的变化而被重新评估(除非，在该函数中，我将绑定(bind)调用它到每个的 onXChanged 信号一路上的祖先之一，这似乎是一个肮脏的解决方案)。

所以最后我向要跟踪的对象添加了属性，然后绑定(bind)到它们:

TrackedObject {
  property real offsetX: x + parent.x + parent.parent.x + parent.parent.parent.x ...
  property real offsetY: y + parent.y + parent.parent.y + parent.parent.parent.y ...
}

SomeObject {
  x: trackedObject.globalX
  y: trackedObject.globalY
}

但是……是的……这个根本无法缩放，而且非常丑陋。

有人知道如何以更干净的方式解决这个问题吗？

编辑:就我而言，在这种情况下我不能使用 anchor 。 SomeObject组件是一个自定义组件，绘制从一个点到另一个点的贝塞尔曲线(它将连接两个 TrackedObjects )。为此我需要坐标之间的差异。如果我是正确的， anchor 不提供任何计算它们之间距离的方法。

Answer 1

这是一个难点，但这是我在我的一个项目中使用的技巧:使位于另一个父级而不是绿色矩形的蓝色矩形移动，以与其保持对齐，当绿色矩形移动时以及黄色矩形移动时矩形(绿色矩形父级)移动:

import QtQuick 2.0;

Rectangle {
    id: window;
    width: 800;
    height: 480;

    property bool globalBit : true;

    function updatePos (item_orig, item_dest, bit) {
        var pos_abs = window.mapFromItem (item_orig.parent, item_orig.x, item_orig.y);
        return window.mapToItem (item_dest.parent, pos_abs.x, pos_abs.y);
    }

    Rectangle {
        id: rectYellow;
        width: 400;
        height: 300;
        x: 300;
        y: 200;
        color: "yellow";

        onXChanged: { globalBit = !globalBit; }
        onYChanged: { globalBit = !globalBit; }

        MouseArea {
            drag {
                target: rectYellow;
                minimumX: 0;
                minimumY: 0;
                maximumX: (rectYellow.parent.width - rectYellow.width);
                maximumY: (rectYellow.parent.height - rectYellow.height);
            }
            anchors.fill: parent;
        }
        Rectangle {
            id: rectGreen;
            x: 100;
            y: 100;
            width: 50;
            height: 50;
            color: "green";

            MouseArea {
                drag {
                    target: rectGreen;
                    minimumX: 0;
                    minimumY: 0;
                    maximumX: (rectGreen.parent.width - rectGreen.width);
                    maximumY: (rectGreen.parent.height - rectGreen.height);
                }
                anchors.fill: parent;
            }
        }
    }
    Rectangle {
        id: rectBlue;
        x: pos.x + 50;
        y: pos.y + 50;
        width: 50;
        height: 50;
        color: "blue";

        property var pos : updatePos (rectGreen, rectBlue, globalBit);
    }
}

诀窍是使用mapfromItem和mapToItem将所有坐标带回第一个共同祖先，并强制重新评估函数，只需将传递给计算函数的全局 bool 标志放入其中即可每次 map 上的可移动元素移动时，您都会反转...您不必将其放在每个地方，只需将其放在可以移动且位于祖先项目内部的项目的父级上即可。

所以它有效，你的位置永远是正确的，而且它具有很强的可扩展性，并且不会添加太多代码。