动态更改 QML 元素的转换答案

【问题标题】：Dynamically change the transformation of a QML element动态更改 QML 元素的转换
【发布时间】：2018-10-14 19:39:39
【问题描述】：

我花了很长时间才弄清楚我在旋转 QML 对象时遇到的问题，所以我决定分享这个。

问题：如何动态更新 QML 元素（如图像）的旋转。我知道我可以设置，例如使用转换的旋转（在 MapQuickItem 的示例中）：

MapQuickItem
{
    sourceItem: Image
    {
        id: image
        anchors.centerIn: parent
        source: "image.png"
        sourceSize.width:  Screen.devicePixelRatio * 256
        sourceSize.height: Screen.devicePixelRatio * 256
        transform: Rotation { 
            origin { x: image.sourceSize.width/2; 
                     y: image.sourceSize.height/2; 
                     z: 0} 
            angle: 0
        }
    }
}

但是，如何动态更新角度（或transform 的其他部分）？

【问题讨论】：

标签： qt qml

【解决方案1】：

更简洁的方法是使用属性或别名：

MapQuickItem
{
    sourceItem: Image
    {
        id: image

        property alias rotationAngle: rotation.angle

        anchors.centerIn: parent
        source: "image.png"
        sourceSize.width:  Screen.devicePixelRatio * 256
        sourceSize.height: Screen.devicePixelRatio * 256
        transform: Rotation { 
            id: rotation
            origin { x: image.sourceSize.width/2; 
                     y: image.sourceSize.height/2; 
                     z: 0} 
            angle: 0
        }
    }
}

与：

function updatePositionAndRotation(angleDeg)
{
    image.rotationAngle = angleDeg
}

【讨论】：

【解决方案2】：

关键信息是transform 实际上是一个转换列表。

因此，上述问题的一种可能解决方案是这样的函数（例如更改旋转）：

function updateRotation(angleDeg)
{
    image.transform[0].angle = angleDeg;
}

【讨论】：