如何锚定到旋转的矩形边缘？

Question

我想在qml中绘制几行并相对放置它们（并使用小宽度的Rectangle）。

• 第2行旋转45度。
• 第3行固定在第1行和第2行。

问题是当我将第3行锚定到第2行时，它会在旋转前获取点数。有办法解决这个问题吗？

Rectangle {
    id: idLine1
    height: 2
    color: "white"
    width: idFluidStatus.width/3
    anchors.left: idRect.right
    anchors.verticalCenter: idRect.verticalCenter
}

Rectangle {
    id: idLine2
    height: 2
    color: "white"
    transformOrigin: Item.BottomLeft
    rotation: 45
    width: idFluidStatus.width/3
    anchors.left: idRect.horizontalCenter
    anchors.top: idLine1.bottom
}

Rectangle {
    id: idLine3
    height: 2
    color: "red"
    anchors.left: idLine2.right
    anchors.right: idLine1.right
    anchors.bottom: idLine2.bottom
}

预期：

获得：

添加运行示例代码：

import QtQuick 2.0

Rectangle {
    id: idFluidStatus
    width: 500; height: 400
    color: "darkgray"


    Rectangle {
        id: idLine1
        height: 2
        color: "white"
        width: idFluidStatus.width/3
        anchors.left: idRect.right
        anchors.verticalCenter: idRect.verticalCenter
    }

    Rectangle {
        id: idLine2
        height: 2
        color: "white"
        transformOrigin: Item.BottomLeft
        rotation: 45
        width: idFluidStatus.width/3
        anchors.left: idRect.horizontalCenter
        anchors.top: idLine1.bottom

        Component.onCompleted: {
            console.log(x, y, width, height)
        }
    }

    Rectangle {
        width: 50
        height: 50
        color: "green"
        x: idLine2.x+idLine2.width
        y: idLine2.y
    }

    Rectangle {
        id: idLine3
        height: 2
        color: "red"
        anchors.left: idLine2.right
        anchors.right: idLine1.right
        anchors.bottom: idLine2.bottom
    }

    Rectangle {
        width: idRect.width + 5
        height: width
        radius: width/2
        color: "white"
        anchors.centerIn: idRect
    }

    Rectangle {
        id: idRect
        width: (idFluidStatus.width < idFluidStatus.height) ? idFluidStatus.width/6 : idFluidStatus.height/6
        height: width
        radius: width/2
        color: "#155B5E"
        opacity: 0.7
        anchors {
            top: idFluidStatus.top
            topMargin: idFluidStatus.height/10
            left: idFluidStatus.left
            leftMargin: idFluidStatus.width/10
        }
    }
}