QML小程序:简单的转换

实现点击图片，让图片平移，旋转，缩放

演示图如下：

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Simple Transformations")

    //组件名称必须以大写字母开头
    Tansformation {

    }
}

ClickableImage.qml

import QtQuick 2.0

//该组件为可以被点击的图片

Image {
    id: root    //组件id
    signal clicked  //点击信号

    //鼠标区域元素
    MouseArea {
        anchors.fill: parent    //锚定填充整个组件
        onClicked: root.clicked()   //点击
    }
}

Tansformation.qml

import QtQuick 2.0

Item {

    width: bg.width     //组件宽度
    height: bg.height   //组件高度

    //图片元素
    Image {
        id: bg  //图片id
        source: "assets/background.png" //图片路径
    }

    //鼠标区域元素
    MouseArea {
        id: backgroundClicker   //鼠标区域id
        anchors.fill: parent    //锚定填充：整个组件

        //点击操作
        onClicked: {
            rocket1.x = 20  //水平位置默认值
            rocket2.rotation = 0    //旋转默认值，0表示为旋转
            rocket3.rotation = 0    //旋转默认值，0表示为旋转
            rocket3.scale = 1.0     //缩放默认值，1.0表示未缩放
        }
    }

    //可点击的图片组件rocket1
    ClickableImage {
        id: rocket1     //组件id
        x: 20; y: 100   //组件位置
        source: "assets/rocket.png" //组件路径

        //点击操作
        onClicked: {
            x += 5  //点击一次，向右平移5个像素
        }
    }

    //可点击的图片组件rocket2
    ClickableImage {
        id: rocket2     //组件id
        x: 140; y:100   //组件位置
        source: "assets/rocket.png" //组件路径
        smooth: true    //平滑:true为反锯齿

        //点击操作
        onClicked: {
            rotation += 5   //点击一次，向右旋转5个像素
        }
    }

    //注意：rocket1不断的平移直到与rocket2重合，会看到rocket1在后面，rocket2在前面，这是因为代码中先出现的元素有更低的堆叠顺序导致；
    //可以用z顺序值来控制。
    //MouseArea也是，后出现的会覆盖前面出现的鼠标区域
    //文档中元素的顺序很重要！

    //可点击的图片组件rocket3
    ClickableImage {
        id: rocket3     //组件id
        x: 240; y: 100  //组件位置
        source: "assets/rocket.png" //组件路径
        smooth: true    //平滑:true为反锯齿

        //点击操作
        onClicked: {
            rotation += 5   //点击一次，向右旋转5个像素
            scale -= 0.05   //点击一次，缩小0.05
        }
    }
}