Qml-Item的仿射变换
仿射变换：通俗来讲就是对Item进行旋转、平移、缩放的一系列单一或者组合操作
Item仿射变换相关的属性
- 属性scale ：控制Item的缩放，0~1是缩小,>1是放大，负数是镜像缩放；
- 属性rotation ：控制Item的旋转，顺时针为正，
- 属性transform ：由list 队列构成，可以做跟细致控制。
- 属性transformOrigin ：控制旋转和缩放的变换原点；transformOrigin的提供了9个原点控制，如图所示
Item缩放属性的实例代码
1.此处以Image类作为实验demo;便于观察Item缩放为负数效果。 2.Item 默认缩放的点为中心点，即transformOrigin：Item.Center。 3.当scale：值为负数，会镜像，如果为Item.Center 则已中心点水平+垂直方向都会发生镜像，效果如下。
Item{
height: 480
width: 320
Image{
id:idRecRote
width: 200
height: 200
source:"qrc:/qt/qml/text/imgtag/images/affine.jpeg";
opacity: 0.5 //透明度0.5 （范围 0.0~1.0）
scale: 1
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.margins: 10
transformOrigin: Item.Center //默认是已中心缩放和镜像
}
Image{
id:idRecRote1
width: 200
height: 200
source:"qrc:/qt/qml/text/imgtag/images/affine.jpeg";
opacity: 0.5 //透明度0.5 （范围 0.0~1.0）
scale: -1 //缩放 如果是复数，渲染时会镜像
anchors.verticalCenter: parent.verticalCenter
anchors.right:parent.right
anchors.margins: 10
}
}
Item缩放效果实例效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/e2d378fd7d504f8290b613ab67b68acf.png
Item的旋转属性实例代码
Item{
height: 480
width: 320
//定义一个行布局
Row{
id:idRow1
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 20
spacing: 50
Rectangle{
width: 100
height: 100
color:"lightblue"
Rectangle{
width: 100
height: 100
anchors.fill: parent
color:"red"
opacity: 0.5
rotation: 30
transformOrigin: Item.Center //默认是中心点旋转
}
}
Rectangle{
width: 100
height: 100
color:"lightblue"
Rectangle{
width: 100
height: 100
anchors.fill: parent
color:"red"
opacity: 0.5
rotation: -30
transformOrigin: Item.Center //默认是中心点旋转
}
}
Rectangle{
width: 100
height: 100
color:"lightblue"
Rectangle{
width: 100
height: 100
anchors.fill: parent
color:"red"
opacity: 0.5
rotation: 30
transformOrigin: Item.BottomRight //以右下点为旋转点
}
}
}
}
Item旋转属性效果图
Item 任意位置的旋转和缩放
- Item 默认提供了9个点的旋转和缩放，也可以通过属性 transform 设置基于任意点的 旋转，平移和缩放等操作
- 基于任意点的旋转需要使用类型 Scale, Scale 有 4个属性： origin.x: 缩放点 x坐标， origin.y: 缩放点 y坐标 xScale: x轴缩放系数 yScale: y轴缩放系数 实例代码如下
Item{
height: 480
width: 320
//任意位置缩放
Rectangle{
width: 100
height: 100
color:"lightblue"
anchors.centerIn: parent
//实现代码
}
Rectangle{
width: 100
height: 100
color:"transparent"
//opacity: 0.5
anchors.centerIn: parent
border.width:1
border.color:"red"
transform:
//Scale类控制缩放
Scale{
origin.x:-20 //相对于父对象的坐标点，从此位置开始。负值沿着坐标轴 正值开始
origin.y:-20
xScale:2 //x 方向缩放倍数
yScale:2 //y 方向缩放倍数
}
}
Rectangle{
width: 100
height: 100
color:"transparent"
//opacity: 0.5
anchors.centerIn: parent
border.width:1
border.color:"blue"
transform:
//Scale类控制缩放
Scale{
origin.x:0 //缩放点
origin.y:0
xScale:2 //x 方向缩放倍数
yScale:2 //y 方向缩放倍数
}
}
Rectangle{
width: 100
height: 100
color:"transparent"
//opacity: 0.5
anchors.centerIn: parent
border.width:1
border.color:"green"
transform:
//Scale类控制缩放
Scale{
origin.x:50 //缩放点
origin.y:50
xScale:2 //x 方向缩放倍数
yScale:2 //y 方向缩放倍数
}
}
}
基于Scale类的效果如下 
-
基于任意点的旋转是由Rotate类型控制，具体可以参看Qt的帮助文档；实例代码如下
Item{ height: 480 width: 320 Rectangle{ width: 100 height: 100 color:"lightblue" anchors.centerIn: parent //实现代码 Rectangle{ width: 100 height: 100 color:"transparent" //opacity: 0.5 anchors.centerIn: parent border.width:1 border.color:"green" antialiasing: true transform:[ //旋转类 Rotation{ //对于2D,默认是绕Z轴旋转 origin.x:0 origin.y:0 angle: 30 } ] } Rectangle{ width: 100 height: 100 color:"transparent" //opacity: 0.5 anchors.centerIn: parent border.width:1 border.color:"blue" antialiasing: true transform:[ //旋转类 Rotation{ //对于2D,默认是绕Z轴旋转 origin.x:50 origin.y:50 angle: 45 } ] } }
} ~~~
基于Rotation 旋转效果如下： 
