CODEWITHSUNDEEP
qtrotationqmlqtquick2qt-quick
user3417815
user3417815

Reputation: 635

Set rotation point of Rectangle

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.

Upvotes: 3

Views: 5998

Answers (1)

Nejat
Nejat

Reputation: 32635

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

enter image description here

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
}

Upvotes: 11

Related Questions