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

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

2015年05月14日 09:20:08

阅读数：4896

Item的缩放和旋转属性

1、缩放：

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

1. import QtQuick 2.4

2.  

3. Rectangle {

4. color: "blue"

5. width: 100; height: 100

6. Rectangle {

7. color: "green"

8. width: 25; height: 25

9. }

10. Rectangle {

11. color: "red"

12. x: 25; y:25; width: 25; height:25

13. scale: 1.6 //放大1.6倍显示

14. }

15. }

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

 

设置原点：transfomOrigin: "TopLeft"

2、旋转

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

 

1. import QtQuick 2.4

2.  

3. Rectangle {

4. color: "blue"

5. width: 100; height: 100

6. Rectangle {

7. color: "green"

8. width: 25; height: 25

9. }

10. Rectangle {

11. color: "red"

12. x: 25; y:25; width: 25; height:25

13. scale: 1.6 //放大1.6倍显示

14. rotation: 30 //选择30度

15. }

16. }

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属性：可以指定顺时针旋转的度数

 

1. import QtQuick 2.4

2.  

3. Rectangle {

4. color: "blue"

5. width: 100; height: 100

6. Rectangle {

7. color: "green"

8. width: 25; height: 25

9. }

10. Rectangle {

11. color: "red"

12. x: 25; y:25; width: 25; height:25

13. scale: 1.6 //放大1.6倍显示

14. transform: Rotation {origin.x: 30; origin.y: 30

15. axis{x: 0; y: 1; z: 0}

16. angle: 72

17. }

18. }

19. }

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 }