【QML之·简单变换】

系列文章目录

---

---

前言

变换是指改变组件的位置、大小、旋转和透明度等属性，从而改变组件在屏幕上的呈现方式。可以使用QML提供的属性和动画来实现这些变换。

---

一、 概述

以下是QML中常用的几种简单变换：

• 位置变换： 可以使用x和y属性来改变组件在屏幕上的位置。例如，设置x: 100和y: 200将使组件相对于其父项在x轴和y轴上移动100和200像素。

• 大小变换： 可以使用width和height属性来改变组件的宽度和高度。例如，设置width: 200和height: 100将使组件的宽度为200像素，高度为100像素。

• 旋转变换： 可以使用rotation属性来改变组件的旋转角度。例如，设置rotation: 45将使组件顺时针旋转45度。

• 透明度变换： 可以使用opacity属性来改变组件的透明度。例如，设置opacity: 0.5将使组件变为50%透明。

二、 简单变换

• 包括平移、旋转和缩放操作。
  • 平移:通过改变x、y位置完成简单的平移。·旋转:值以度（0-360）表示。
  • 缩放:大于1表示放大，小于1表示缩小。
  • 在展示示例之前，介绍一个小助手:Clickablelmage元素。一个带有鼠标区的图像。

三、实例演示

示例1：

# ClickableImage.qml
import QtQuick 2.0

Image {
    id: root
    signal clicked
    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

import QtQuick 2.9
import QtQuick.Window 2.3

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

    MouseArea {
        anchors.fill: parent
        onClicked: {
            circle.x = 50;
            box.rotation = 0;
            triangle.rotation = 0;
            triangle.scale = 1;
        }
    }

    ClickableImage {
        id: circle
        x: 50;y: 50
        source: "./images/circle_blue.png"

        onClicked: {
            x += 10;
        }
    }

    ClickableImage {
        id: box
        x: 50;y: 200
        source: "./images/box_green.png"

        onClicked: {
            rotation += 10;
        }
    }

    ClickableImage {
        id: triangle
        x: 50;y: 350
        source: "./images/triangle_red.png"

        onClicked: {
            rotation += 10;
            scale += 0.1;
        }
    }
}

运行结果：

---

总结