QML图像、状态和动画--缩放、旋转和平移

Item的缩放和旋转属性

1、缩放：

scale：值小于1，将项目缩小显示；大于1，项目放大显示；负值，镜像效果

import QtQuick 2.4

Rectangle {
    color: "blue"
    width: 100; height: 100
    Rectangle {
        color: "green"
        width: 25; height: 25
    }
    Rectangle {
        color: "red"
        x: 25; y:25; width: 25; height:25
        scale: 1.6  //放大1.6倍显示
    }
}

缩放是以transformOrigin属性指定的点为原点进行的，可以用的点一共9个，默认的原点是Center，即项目的中心。

设置原点：transfomOrigin: "TopLeft"

2、旋转

旋转度数：rotation， 默认值为0

import QtQuick 2.4

Rectangle {
    color: "blue"
    width: 100; height: 100
    Rectangle {
        color: "green"
        width: 25; height: 25
    }
    Rectangle {
        color: "red"
        x: 25; y:25; width: 25; height:25
        scale: 1.6  //放大1.6倍显示
        rotation: 30    //选择30度
    }
}

Item还有一个transform属性，需要指定一个Transform元素列表

Transform元素是一个基本类型，无法直接实例化，可用的Transform类型有3个：

Rotation：旋转

Scale：缩放

Translate：平移

这些元素可以通过专门的属性来进行更高级的变换设置

Rotation提供了坐标轴和原点属性，坐标轴有axis.x、axis.y、axis.z分别代表X轴、Y轴和Z轴，可以实现3D效果

原点由origin.x和origin.y来指定。简单的2D旋转是不需要指定坐标轴的，默认使用Z轴（axis(x: 0; y: 0; z: 0)）即可

对于典型的3D旋转，既需要指定原点，也需要指定坐标轴。

angle属性：可以指定顺时针旋转的度数

import QtQuick 2.4

Rectangle {
    color: "blue"
    width: 100; height: 100
    Rectangle {
        color: "green"
        width: 25; height: 25
    }
    Rectangle {
        color: "red"
        x: 25; y:25; width: 25; height:25
        scale: 1.6  //放大1.6倍显示
        transform: Rotation {origin.x: 30; origin.y: 30
            axis{x: 0; y: 1; z: 0}
            angle: 72
        }
    }
}

Scale中提供了origin.x和origin.y属性来设置原点，另外还可以使用XScale和月Scale来分别设置X轴和Y轴的比例因子，就是在X轴方向和Y轴方向的缩放值

transform: Scale {origin.x: 25; origin.y: 25; xScale:3}

Translate中提供了x和y属性来分别设置在X轴和Y轴方向的偏移量

transform: Translate{ y: -20 }