Strange offset after rotating a rectangle
-
What happens to the space surrounding a Rectangle after it's rotated? I have observed that if I rotate +/- 90 degrees a Rectangle with these anchors:
@
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
@or these anchors
@
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
@the Rectangle is offset from the edge of its parent. However, if I create a Rectangle of the same size but with the width and height swapped, the Rectangle is drawn at the edge of its parent as I intended.
The code and screenshot below illustrates the situation. The 150 X 40 yellow "Configure" Rectangle is not rotated. It is drawn where it should be: at the right edge of the Blue rectangle and centered on the blue Rectangle's vertical center. The 40 X 150 green "Help" Rectangle is rotated. While it is centred on the blue Rectangle's vertical center, it is many pixels to the right of the left edge of the blue Rectangle.
!http://farm6.static.flickr.com/5037/5836913375_cb01db8918_d.jpg(Screenshot of the Rectangle example)!
@
import QtQuick 1.0Rectangle {
id: container
height: 480
width: 800
color: "blue"Rectangle {id: rightButton
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: 40
height: 150
color: "yellow"Text {
id: rightButtonText
text: "Configure"
rotation: 90
anchors.centerIn: parent
}
}Rectangle {id: leftButton
rotation: -90
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: 150
height: 40
color: "green"Text {
id: leftButtonText
text: "Help"
anchors.centerIn: parent
}
}Text {text: "Click to Exit"
anchors.centerIn: parent
}MouseArea {anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
@ -
Such behavior is ok. It's all because of transformOrigin property is Center by default, so your rotation is done from center of your rectangle. In your case you need TopLeft value and don't forget to set correct verticalCenterOffset (because your rectangle will be a bit higher than needed)