How to anchor to a rotated rectangle edge? - qt

Question

I want to draw a few lines in qml and to relatively place them (and used Rectangle with small width for it).
Line 2 is rotated 45 degrees.
Line 3 is anchored to Line 1 and Line 2.
The issue is when I anchor a Line 3 to Line 2, it takes points before rotation. Is there a way to resolve this?
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
}
Expected:
Obtained:
Adding running example code:
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
}
}
}