Qml组件之Image的变换

• Image继承自Item
• 在使用的过程中可以对其进行变换
• 主要包括缩放、沿某个方向缩放、2d平面旋转，3d立体旋转
• 所有继承自Item的元素都可以应用变换，不止Image

常用属性

旋转

• rotation : real

顺时针旋转

默认0度

在2d平面内旋转（即绕z轴旋转）

默认的旋转中心是整个元素的中心点

比如下面旋转30度

Image {
	id: img

	anchors.centerIn: parent
	width: 400
	height: 400

	source: "./11.jpg"
	fillMode: Image.PreserveAspectFit

	//顺时针旋转30度
	rotation: 30
}

变换源点

• transformOrigin : enumeration

可以指定变换的源点，scale缩放属性和rotation旋转属性的变换源点都会使用这个

是一个枚举，取值如下：

比如上面的旋转指定旋转中心为 TopRight

Image {
	id: img

	anchors.centerIn: parent
	width: 400
	height: 400

	source: "./11.jpg"
	fillMode: Image.PreserveAspectFit

	//顺时针旋转
	rotation: 30
	transformOrigin: Item.TopRight
}

缩放

• scale : real

x方向和y方向同时缩放

默认1.0，不缩放

默认绕Image中心缩放，可以指定transformOrigin确定缩放点

scale>1.0或者scale<-1.0，放大

-1.0<scale<1.0，缩小

scale为负数会导致图片水平垂直同时镜像

Window {
	width: 640
	height: 480
	visible: true
	title: qsTr("Hello World")

	Image {
		id: img
		anchors.centerIn: parent
		width: 400
		height: 400

		source: "./11.jpg"
		fillMode: Image.PreserveAspectFit

		scale: 1.0
	}

	Button {
		anchors.left: parent.left
		anchors.top: parent.top
		width: 100
		height: 30
		text: "缩放"

		//点击按钮，图片放大
		onClicked: {
			img.scale += 0.1
		}
	}
}

精准变换

• transform : list<Transform> [read-only] 

可以看到该属性是一个元素数组

可以同时指定多个Transform类型的元素：比如旋转、缩放、平移、矩阵变换，如下：

Image {
	id: img

	//一次性指定多种变换
	transform: [
		Scale {
			
		},
		Rotation {

		},
		Translate {

		}
	]
}

旋转元素Rotation

其属性有

angle：指定旋转角度，默认0

axis：是一个属性组，指定绕哪个轴旋转，指定哪个轴，哪个轴的值就为1，默认绕z轴（2d平面）

比如绕y轴3d立体旋转：axis{x:0;y:1;z:0}（属性组的赋值方式，可一次性赋值，也可单独对每个赋值）

origin：是一个属性组，指定旋转中心点的坐标，默认（0,0）

缩放元素Scale

xScale：指定x方向的缩放因子默认1.0

yScale：指定y方向的缩放因子，默认1.0 

origin：是一个属性组，指定缩放中心点的坐标，默认（0,0）

平移元素Translate

即y方向移动多少，y方向移动多少 

比如下面的例子：

点击按钮沿x方向缩放图片

点击按钮绕y轴旋转图片

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Image{
        id:img
        anchors.centerIn: parent
        width: 400
        height: 400

        source: "./11.jpg"
        fillMode: Image.PreserveAspectFit

        //开放属性给外部
        //x方向缩放因子
        property double xScaleValue: 1.0
        //旋转角度
        property int rotateAngle: 0

         //在变换里面指定缩放和旋转
        transform: [
            Scale{
                id:sca
                origin.x:0
                origin.y:0
                xScale: img.xScaleValue//绑定开放出去的缩放因子
                yScale: 1.0
            },
            Rotation{
                id:rot

                angle: img.rotateAngle绑定开放出去的旋转角度
                axis.x:0
                axis.y:1//指定绕y轴旋转
                axis.z:0
                origin.x:img.width/2//绕图片中心旋转
                origin.y:img.height/2
            }
        ]
    }

    Row{
        anchors.left: parent.left
        anchors.top: parent.top
        spacing: 10

        Button{

            width: 100
            height: 30
            text: "缩放"

            //点击按钮，图片放大
            onClicked: {
                img.xScaleValue+=0.1;
            }

        }
        Button{

            width: 100
            height: 30
            text: "旋转"

            //点击按钮，图片绕y轴旋转
            onClicked: {
                img.rotateAngle+=5;
            }

        }
    }

}