QML旋转图像

Question

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

我想将它旋转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

“缩放”和“旋转”的变换将一个名为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点未移动且是旋转的中心。

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