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

Question

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

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

是的，我知道这不是真正的 "wrong" 结果，但我如何才能获得两个矩形（即 (200,200)）相对于其父项的真实项目坐标？

Answer 1

两个矩形坐标相同但时间不同:

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);
        onXChanged: console.log("rec2.x: " + rec2.x);
        onYChanged: console.log("rec2.y: " + rec2.y);
    }
}

Answer 2

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)

这就是理论。但是，在这种特殊情况下（正如其他人所指出的），布局管理尚未设置坐标属性，因此这些方法失败了。这似乎与初始化期间 items 下降的不一致状态有关。实际上，如果我们在 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

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

Wrong coordinates white getting real position of item relative to its parent

qt

qml

qt-quick

qtquick2