qt - 错误的坐标白色获取项目相对于其父项的真实位置

Question

我有一个简单的场景，只有 2 个矩形。区别在于第一个使用绝对坐标，第二个使用 anchor 。在这种情况下，两个矩形都放置在同一位置。但我得到的坐标完全不同。

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 600
    Rectangle {
        id: rec1
        x: 200
        y: 200
        width: 200
        height: 200
        color: "green"
        opacity: 0.5
        Component.onCompleted: console.log("rec1: " + rec1.x + "," + rec1.y);
    }

    Rectangle {
        id: rec2
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "blue"
        opacity: 0.5
        Component.onCompleted: console.log("rec2: " + rec2.x + "," + rec2.y);
    }
}

输出:

qml: rec2: -100,-100
qml: rec1: 200,200

是的，我知道这并不是真正的“错误”结果，但是如何获得两个矩形相对于其父级的真实项目坐标，即(200,200)？

Answer 1

Item 的文档建议mapToItem功能:

Maps the point (x, y) or rect (x, y, width, height), which is in this item's coordinate system, to item's coordinate system, and returns an object with x and y (and optionally width and height) properties matching the mapped coordinate.

If item is a null value, this maps the point or rect to the coordinate system of the root QML view.

由于坐标必须位于项目系统中，因此在您的情况下调用该函数的正确方法是:

<item_id>.mapToItem(<parent_id>, 0, 0)

哪里(0, 0)是 <item_id> 的起源坐标系。

因为在这种情况下，父级不是 Item本身，我们可以利用 null文档描述的方法的版本并写入:

<item_id>.mapToItem(null, 0, 0)

<小时/>

这就是理论。然而，在这种特殊情况下(正如其他人所指出的)，布局管理尚未设置坐标属性，因此方法失败。这似乎与 item 的不一致状态有关。 s 在初始化期间下降。事实上，如果我们使用 onDestruction 中的函数处理程序，即当我们确定初始化已完成时，它们会给出预期的结果。请参阅下面的修改后的代码:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Window  {
    visible: true
    width: 600
    height: 600

    Rectangle {
        id: rec1
        x: 200
        y: 200
        width: 200
        height: 200
        color: "green"
        opacity: 0.5
    }

    Rectangle {
        id: rec2
        width: 200
        height: 200
        anchors.centerIn: parent

        color: "blue"
        opacity: 0.5
    }

    Component.onCompleted: {
        console.info("NOPE! :(")
        var cords = rec1.mapToItem(null, 0, 0)
        console.info("rec1: " + cords.x + "  " + cords.y)
        cords = rec2.mapToItem(null, 0, 0)
        console.info("rec2: " + cords.x + "  " + cords.y)
    }

    Component.onDestruction: {
        console.info("YES! :)")
        var cords = rec1.mapToItem(null, 0, 0)
        console.info("rec1: " + cords.x + "  " + cords.y)
        cords = rec2.mapToItem(null, 0, 0)
        console.info("rec2: " + cords.x + "  " + cords.y)
        cords = rec2.mapToItem(null, 100, 100)      // (100, 100) of second rec is...
        console.info("rec2: " + cords.x + "  " + cords.y)   // correctly (300, 300)  !!
    }
}

输出:

qml: NOPE! :(
qml: rec1: 200  200
qml: rec2: -100  -100
qml: YES! :)
qml: rec1: 200  200
qml: rec2: 200  200
qml: rec2: 300  300