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;
        }
    }
}

 

QML --> 简单平移、旋转和缩放

上一篇:表格标签


下一篇:从word中复制内容包含图片到百度ueditor编辑器中