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

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