Set rotation point of Rectangle

Question

Is there a way to set rotation point in Rectangle and simply use rotation property without any other additional component? I want to rotate a Rectangle with binding property of rotation: value * 180 like this

Rectangle{
    id: body
    rotation: value
    anchors.centerIn: parent.Center
    antialiasing: true
}
onValueChanged: body.rotation = value

I got only rotation around the left upper corner of parent. Please help me to understand this behavior or suggest me another way to implement rotation on the center.

Answer 1

rotation property rotates item clockwise around its transformOrigin property which could be one of these nine points :

So you can rotate around one of them like :

Rectangle{
    id: body
    rotation: value
    transformOrigin: Item.Center
    anchors.centerIn: parent.Center
    antialiasing: true
}

If you want to rotate around an arbitrary point you should use Rotation transform type :

Rectangle{
    id: body
    transform: Rotation { origin.x: 25; origin.y: 25; angle: value}
    anchors.centerIn: parent.Center
    antialiasing: true
}