QML Rotate Image

6
votes

Im trying to rotate an image when I show it in an Image control. Currently the image is showing up like this:

enter image description here

I would like to rotate it 90 degrees to the right. My current code looks like this:'

Image {
    id: imagePhoto
    anchors.fill: parent
    width: parent.width
    height: parent.height


    transform: Rotation{                       
        id: rotateImagePhoto
        angle: 0
        origin.x: 0
        origin.y: 0

    }
}

So I tried playing with the angle:

transform: Rotation{                       
    id: rotateImagePhoto
    angle: 90
    origin.x: 700
    origin.y: 700

}

It shows up correctly:

enter image description here

What I'm not understanding is why I had to put those values for the x/y. I've looked at that following site, but I'm not understanding.

1
qtqmlqt5

1 Answers

8
votes

The transformations of Scale and Rotation take a point called transformOrigin as a reference, in your case it is the point with respect to which the image rotates, so you are probably establishing the center of the image, if you change position the rotation will be different.

In your case the general solution for any size is:

transform: Rotation{
    id: rotateImagePhoto
    angle: 90
    origin.x: imagePhoto.width/2
    origin.y: imagePhoto.height/2
}

Or better using rotation.

Image {
    id: imagePhoto
    anchors.fill: parent
    width: parent.width
    height: parent.height
    transformOrigin: Item.Center
    rotation: 90
}

That point is a fixed point, that is to say that it will remain invariant before the rotation, for example let's establish the point in the topLeft and rotate 30 degrees:

transform: Rotation{
    id: rotateImagePhoto
    angle: 30
    origin.x: 0
    origin.y: 0
}

enter image description here

Note that the topLeft point has not moved and is the center of the rotation.

In conclusion in the case of rotation the origin is the center of rotation.