qt - QML 旋转图像

Question

当我在图像控件中显示图像时，我试图旋转图像。目前图像显示如下:



我想将它向右旋转 90 度。
我当前的代码如下所示:'

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


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

    }
}

所以我试着玩这个角度:

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

}

它正确显示:



我不明白的是为什么我必须为 x/y 设置这些值。
我看过以下 site ，但我不明白。

Answer 1

Scale 和 Rotation 的转换以一个名为 transformOrigin 的点为引用，在您的情况下，它是图像旋转的点，因此您可能正在建立图像的中心，如果更改位置，旋转将不同.

在您的情况下，任何尺寸的通用解决方案是:

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

或者更好地使用 rotation .

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

那个点是一个固定点，也就是说在旋转之前它会保持不变，比如我们在topLeft中建立一个点并旋转30度:

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

请注意 topLeft点没有移动并且是旋转的中心。

总之，在旋转的情况下，原点是旋转中心。