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

问题描述

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

I have simple scene with only 2 Rectangles. The difference is that first one uses absolute coordinates and second one uses anchors. In this case both of rectangles are placed on the same place. But I get different coordinates at all.

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)?

Yes, I know that it's not really "wrong" result, but how can I get real item coordinates relative to its parent for both of rectangles, i.e. (200,200)?

推荐答案

Item 提出mapToItem函数:

映射点 (x, y) 或 rect (x, y, width, height)，在这个项目的坐标系，到项目的坐标系，并返回一个具有 x 和 y(以及可选的宽度和高度)属性的对象匹配映射的坐标.

如果 item 是 null 值，这会将点或矩形映射到坐标根 QML 视图的系统.

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

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

Since the coordinate must be in item' system, the correct way to call the function in your case would be:

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

其中(0, 0)是坐标系的原点.

由于在这种情况下父项不是 Item 本身，我们可以利用文档描述的方法的 null 版本并编写:

Since in this case the parent is not an Item itself, we can exploit the null version of the method described by documentation and write:

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

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

---

That's the theory. However, in this particular case (as noted by others), the layout management has not set the coordinate properties yet and thus the methods fail. That seems to be related to the non-consistent state in which items fall during initialisation. Indeed, if we use the function in the onDestruction handler, i.e. when we are sure that initialisation has finished, they give the expected results. See your modified code below:

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

这篇关于错误的坐标白色获取项目相对于其父项的实际位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！