转换操作改变了一个对象的几何状态。QML元素对象通常能够被平移，旋转，缩放。下面我们将讲解这些简单的操作和一些更高级的用法。 我们先从一个简单的转换开始。用下面的场景作为我们学习的开始。

    • 简单的位移是通过改变x，y坐标来完成的。
    • 旋转是改变rotation（旋转）属性来完成的，这个值使用角度作为单位（0~360）。
    • 缩放是通过改变scale（比例）的属性来完成的，小于1意味着缩小，大于1意味着放大。

    旋转与缩放不会改变对象的几何形状，对象的x,y（坐标）与width/height（宽/高）也类似。只有绘制指令是被转换的对象。

    在我们展示例子之前我想要介绍一些东西：ClickableImage元素（ClickableImage element），ClickableImage仅仅是一个包含鼠标区域的图像元素。我们遵循一个简单的原则，三次使用相同的代码描述一个用户界面最好可以抽象为一个组件。

    代码

    1. // ClickableImage.qml
    3. import QtQuick 2.15
    5. // 抽象出来的组件
    6. Image {
    7.     id:root
    8.     signal  clicked
    10.     MouseArea {
    11.         anchors.fill: parent
    12.         onClicked: root.clicked()
    13.     }
    14. }
    1. // transformation.qml
    3. import QtQuick 2.15
    4. import QtQuick.Window 2.15
    7. Rectangle {
    8.        width: 350
    9.        height: 400
    11.        // widget的点击事件
    12.        MouseArea {
    13.            id: backgroundClicker
    14.            // 由于顺序的关系，需要在图像之前，否则这个鼠标区域将在其他元素之前并使用鼠标事件
    15.            anchors.fill: parent
    16.            onClicked: {
    17.                // reset our little scene
    18.                rocket1.x = 20
    19.                rocket2.rotation = 0
    20.                rocket3.rotation = 0
    21.                rocket3.scale = 1.0
    22.            }
    23.        }
    25.        // rocket1点击时右移
    26.        ClickableImage {
    27.            id: rocket1
    28.            x: 20; y: 100
    29.            source: "assets/rocket.png"
    30.            onClicked: {
    31.                x += 5
    32.            }
    33.        }
    35.        // rocket2点击时旋转
    36.        ClickableImage {
    37.            id: rocket2
    38.            x: 140; y: 100
    39.            source: "assets/rocket.png"
    40.            smooth: true // 增加反锯齿
    41.            onClicked: {
    42.                rotation += 5
    43.            }
    44.        }
    46.        // rocket3点击时会缩小
    47.        ClickableImage {
    48.            id: rocket3
    49.            x: 240; y: 100
    50.            source: "assets/rocket.png"
    51.            smooth: true // 增加反锯齿
    52.            onClicked: {
    53.                rotation += 5
    54.                scale -= 0.05
    55.            }
    56.        }
    57. }

    效果：
    GC{23C$EB2RLNZ{2@RMM42X.png![]E(UC5@4YPED3_W8OWX0VJ.png

    注意：

    1. 为了获得更好的显示效果，当缩放图片时推荐使用已缩放的图片来替代，过量的放大可能会导致图片模糊不清。当你在缩放图片时你最好考虑使用smooth: true来提高图片显示质量。
    2. 在代码中先出现的元素有更低的堆叠顺序（叫做z顺序值z-order），如果你点击火箭1足够多次，你会看见火箭1移动到了火箭2下面。z轴顺序也可以使用元素对象的z-property来控制。

    由于火箭2后出现在代码中，火箭2将会放在火箭1上面。这同样适用于MouseArea（鼠标区域），一个后出现在代码中的鼠标区域将会与之前的鼠标区域重叠，后出现的鼠标区域才能捕捉到鼠标事件。

    1. 请记住：文档中元素的顺序很重要。