Question

我花了很长时间才弄清楚旋转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的其他部分）？

Answer 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
}

Answer 2

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

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

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

动态更改QML元素的转换

2 个答案: