QML 旋转图像

Posted 2023-02-16

【中文标题】QML 旋转图像

【英文标题】：QML Rotate Image

【发布时间】：2018-05-17 17:38:01

【问题描述】：

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

我想将它向右旋转 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之后的那个，但我不明白。

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

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