QML --> 简单平移、旋转和缩放
一、改变物体的几何状态,实现对象的平移、旋转和缩放。
1、平移:
简单的平移是通过改变x,y坐标来实现的。
2、旋转:
旋转是通过改变rotation属性来实现的,这个值是使用角度来作为单位的(0,360)
3、缩放:
缩放是通过关键字scale属性来实现的,小于1表示缩小,大于1表示放大。
4、Item{}:
作用:防止用户修改我们设计的按钮颜色,并可以提供更多相关控制的API接口。
二、实现
1、组件(由于会多次的使用相同的代码,所以我们可以抽象出一个组件)
// Clickable.qml import QtQuick 2.0 Image{ id:root signal clicked MouseArea{ anchors.fill: parent onClicked: root.clicked() } }
2、实现
import QtQuick 2.0 Item { width:bd.width; height: bd.height; Image { id: bd; source: "./2.png"; } MouseArea{ id:back; anchors.fill: parent; onClicked: { rock1.x = 20; rock2.rotation = 0; rock3.rotation = 0; rock3.scale = 1.0; } } Clickable{ id:rock1; x:20; y:100; source: "./1.png"; onClicked: { x += 5 } } Clickable{ id:rock2; x:540; y:100; source: "./1.png"; smooth:true; // 打开平滑来增加反锯齿 onClicked: { rotation += 5; } } Clickable{ id:rock3; x:1040; y:100; source: "./1.png"; smooth:true; onClicked: { rotation += 5; scale -= 0.05; } } }