QML入门教程：五、元素的简单转换

转换操作改变了一个对象的几何状态。QML元素对象通常能够被平移，旋转，缩放。简单的位移是通过改变x,y坐标来完成的。旋转是改变rotation（旋转）属性来完成的，这个值使用角度作为单位（0~360）。缩放是通过改变scale（比例）的属性来完成的，小于1意味着缩小，大于1意味着放大。旋转与缩放不会改变对象的几何形状，对象的x,y（坐标）与width/height（宽/高）也类似。只有绘制指令是被转换的对象。
首先介绍：：ClickableImage元素（ClickableImageelement）
ClickableImage仅仅是一个包含鼠标区域的图像元素。

//  ClickableImage.qml
//  Simple  image   which   can be  clicked
import  QtQuick 2.0
Image   {
                id: root
                signal  clicked
                MouseArea   {
                                anchors.fill:   parent
                                onClicked:  root.clicked()
                }
}

下面分别介绍位移、旋转、缩放：
1、位移
每次点击，图片右移5个像素

    ClickableImage  {
                    id: rocket1
                    x:  20; y:  100
                    source: "assets/rocket.png"
                    onClicked:  {
                                    //  increase    the x-position  on  click
                                    x   +=  5
                    }
    }

2、旋转

    ClickableImage  {
                    id: rocket2
                    x:  140;    y:  100
                    source: "assets/rocket.png"
                    smooth: true    //  need    antialising
                    onClicked:  {
                                    //  increase    the rotation    on  click
                                    rotation    +=  5
                    }
    }

每次点击， 中心旋转5度

3、缩放

            ClickableImage  {
                            id: rocket3
                            x:  240;    y:  100
                            source: "assets/rocket.png"
                            smooth: true    //  need    antialising
                            onClicked:  {
                                            //  several transformat
                                            scale   -=  0.05
                            }
            }

注意：
1、为了获得更好的显示效果，当缩放图片时推荐使用已缩放的图片来替代，过量的放大可能会导致图片模糊不清。上述代码中都使用了smooth:true来抗锯齿以提高图片显示质量。
2、在代码中先出现的元素有更低的堆叠顺序（叫做z顺序值z-order），。z轴顺序也可以使用元素对象的z-property来控制。当坐标重叠时，后出现的元素将会在先出现的元素的上面。同理，对于MouseArea（鼠标区域），一个后出现在代码中的鼠标区域将会与之前的鼠标区域重叠，后出现的鼠标区域才能捕捉到鼠标事件。