qml 简单变换

有3个圣诞树：

点击第1个圣诞树，每点击一次，向右平移10px；

点击第2个圣诞树，每点击一次，旋转角度增加20度；

点击第3个圣诞树，每点击一次，旋转角度增加20度，同时放大0.1。

最后，点击空白处还原所有圣诞树。

?

02.qml

import QtQuick

// x、y - 平移：通过改变x、y的位置完成简单的平移
// rotation - 旋转：值以角度表示（0 ~ 360）
// scale - 缩放：大于1表示放大，小于1表示缩小

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("简单变换")

    //还原所有图像的变化
    MouseArea {
        anchors.fill: parent
        onClicked: {
            p1.x = 0
            p2.rotation = 0
            
            p3.rotation = 0
            p3.scale = 0.5
        }
    }

    ClickedChangeImage {
        id: p1
        source: "images/Christmas tree.png"
        scale: 0.5
        x: 0
        y: 0
        onClicked: {
            x += 10
        }
    }

    ClickedChangeImage {
        id: p2
        source: "images/Christmas tree.png"
        scale: 0.5
        x: 150
        y: 0

        onClicked: {
            rotation += 20
        }
    }

    ClickedChangeImage {
        id: p3
        source: "images/Christmas tree.png"
        scale: 0.5
        x: 300
        y: 0

        onClicked: {
            rotation += 20 //旋转角度增加20度
            scale += 0.1 //比例放大10%
        }
    }
}

ClickedChangeImage.qml

import QtQuick

Image {
    id: root
    signal clicked

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}