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

2023-12-21 18:14:33

一、改变物体的几何状态，实现对象的平移、旋转和缩放。

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 --> 简单平移、旋转和缩放

码农公寓

相关文章