旋转文本时边界问题

Question

我无法理解为什么Text的边界不会改变，仍然像旋转前一样。

我这么做：

Text {
     font.family: "Arial"
     color: "#3ba3e4"
     font.pixelSize: 12
     font.letterSpacing: 2
     text: "Vasya was here"
     anchors.left: parent.left
     rotation: -90
}

当你与parent对齐时，它会显示间隙，我希望它会被旋转并一直放在parent的左侧，但现在有width的一半的间隙先前未旋转的元素。

Answer 1

rotation属性以项目顺时针方向围绕其transformOrigin保持项目的旋转。 transformOrigin属性保存缩放和旋转变换的原点。有九种变换来源，如下图所示。默认转换原点为Item.Center。

此示例围绕其右下角旋转图像。

Image {
    source: "myimage.png"
    transformOrigin: Item.BottomRight
    rotation: 45
}

评论中已经提供了一种方法。

Text {
     font.family: "Arial"
     color: "#3ba3e4"
     font.pixelSize: 12
     font.letterSpacing: 2
     text: "Vasya was here"
     transform: Rotation { 
             origin.x: 25; 
             origin.y: 25; 
             angle: -90
         }     
}