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

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

Answer 1

Item的文档提出了mapToItem函数：

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

如果item为 null 值，则会将point或rect映射到坐标   根QML视图的系统。

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

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

其中(0, 0)是<item_id>坐标系的原点。

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

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

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

Answer 2

两个矩形在不同时间具有相同的坐标：

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);
    }
}

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

2 个答案: