QML Book 第四章 入门 4

4.7 简单的转换效果

转换效果的操纵对象的几何形状。QML 项目可以被转换，旋转和缩放。有一种简单的操作方式和一种更高级的方式。

让我们从简单的转换开始。这是我们作为出发点的场景。

一个简单的翻译是通过改变 x，y 的位置来完成的。旋转是利用 rotation 属性来完成的，它的值通常是在度数（0～360）之间。

缩放是使用 scale 属性完成的，它的值小于 1 意味着元素被缩小，而大于 1 意味着元素被放大。旋转和缩放不会真正的改变我们的几何形状。x、y、width、height 都没有改变。只是绘制的显示效果被改变了。

在我们展示这个例子之前，我想先介绍一个小帮手：ClickableImage 元素，它只是一个带有 MouseArea 元素的 Image 元素。这就引出了一个有用的经验法则 —— 如果我们已经将一段代码复制了三次，那么最好是将它提取到一个组件中。

// ClickableImage.qml

// Simple image which can be clicked

import QtQuick 2.5

Image {
    id: root
    signal clicked

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

objects

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

// transformation.qml


import QtQuick 2.5

Item {
    // set width based on given background
    width: bg.width
    height: bg.height

    Image { // nice background image
        id: bg
        source: "assets/background.png"
    }

    MouseArea {
        id: backgroundClicker
        // needs to be before the images as order matters
        // otherwise this mousearea would be before the other elements
        // and consume the mouse events
        anchors.fill: parent
        onClicked: {
            // reset our little scene
            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: {
            // increase the x-position on click
            x += 20
        }
    }

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

    ClickableImage {
        id: triangle
        x: 248; y: 68
        source: "assets/triangle_red.png"
        antialiasing: true
        onClicked: {
            // several transformations
            rotation += 15
            scale += 0.05
        }
    }

    function _test_transformed() {
        circle.x += 20
        box.rotation = 15
        triangle.scale = 1.2
        triangle.rotation = -15
    }

    function _test_overlap() {
        circle.x += 40
        box.rotation = 15
        triangle.scale = 2.0
        triangle.rotation = 45
    }

}

objects_transformed

圆圈在每次单击时增加 x 位置，并且在每次单击时，该框将旋转。三角形将在每次单击时旋转并缩放图像，以演示合并后的转换。对于缩放和旋转操作，我们设置了 antialiasing: true 用于启用反锯齿，由于性能原因，它通常是被关闭的（这类似于我们对 clip 属性的处理）。在工作中，当我们看到我们的图形中的一些光栅化的边缘时，我们可以切换到平滑效果。

** 注意： **
为了达到更好的视觉效果，当缩放图像时，建议将图像缩小而不是放大。用更大的比例因子来缩放图像会导致缩放失真（模糊的图像）。当缩放图像时，您应该考虑使用 antialiasing:true 以便使用更高质量的过滤器。

后台 MouseArea 覆盖整个背景，并重新设置对象值。

** 注意： **
在代码前面出现的元素有一个较低的堆栈顺序（称为 z 序列）。如果你在圆上点击足够长的时间，你会看到它在正方形的下面移动。z 序列也可以由一个 Item 的 z 属性来操作。

objects_overlap

这是因为在代码中 box 是后实现的。同样的情况也适用于鼠标区域。代码后面的一个鼠标区域将会重叠在代码的前面一个鼠标区域（并因此截获鼠标事件）。

请记住：QML 文档中的元素顺序很重要。

本文参考链接：Quick Starter