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 设置这些值。我看过以下网站，但我不明白。

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点没有移动并且是旋转的中心。

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