Qt QML 第五章第五节: 简单转换

简单转换

转换操纵对象的几何形状。通常，QML 项可以被平移、旋转和缩放。这些操作有一种简单的形式和一种更高级的方法。

让我们从简单的转换开始。这是我们的起点场景。

一个简单的平移是通过改变x，y的位置来完成的。使用rotation属性进行旋转。该值以度(0..360)提供.使用 scale 属性进行缩放，值 < 1表示元素被缩小，> 1表示元素被放大。旋转和缩放不会改变项目的几何形状: x、 y 和 width/height 没有改变; 只有绘制指令被转换。

在展示示例之前，我想介绍一个小帮手: ClickableImage 元素。ClickableImage只是一个带有鼠标区域的图像。这带来了一个有用的经验法则——如果您已经复制了一段代码三次，那么将其提取到一个组件中。

// ClickableImage.qml
// 可以被点击的简单图片
import QtQuick

Image {
    id: root
    signal clicked

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

我们使用我们的可点击的图像呈现三个对象(框，圆，三角形)。每个对象在单击时执行一个简单的转换。单击背景将重置场景。

// TransformationExample.qml

import QtQuick

Item {
    //根据给定的背景图片设置宽高
    width: bg.width
    height: bg.height

    Image { // 背景图
        id: bg
        source: "assets/background.png"
    }

    MouseArea {
        id: backgroundClicker
        //需要放在图像之前，因为顺序很重要
        //否则，这个鼠标区域将在其他元素之前
        //并消费鼠标事件
        anchors.fill: parent
        onClicked: {
            // 重置
            circle.x = 84
            box.rotation = 0
            triangle.rotation = 0
            triangle.scale = 1.0
        }
    }

    ClickableImage {
        id: circle
        x: 84; y: 68
        source: "assets/circle_blue.png"
        antialiasing: true
        onClicked: {
            //单击时x值递增
            x += 20
        }
    }

    ClickableImage {
        id: box
        x: 164; y: 68
        source: "assets/box_green.png"
        antialiasing: true
        onClicked: {
            rotation += 15
        }
    }

    ClickableImage {
        id: triangle
        x: 248; y: 68
        source: "assets/triangle_red.png"
        antialiasing: true //抗锯齿打开
        onClicked: {
            rotation += 15
            scale += 0.05
        }
    }
  

圆圈在每次点击时递增 x 位置，矩形在每次点击时旋转。三角形将旋转和缩放的图像在每次点击，以演示一个组合变换。对于缩放和旋转操作，我们设置了antialiasing: true 以启用反锯齿，出于性能原因，它默认是关闭的(与剪辑属性clip相同)。在你自己的工作中，当你在图形中看到一些栅格化的边时，你可能应该打开平滑开关。

The background MouseArea covers the whole background and resets the object values.

背景 MouseArea 覆盖整个背景并重置对象值。

【Next】
【Previous】
【Contents】