美文网首页Qt QML 杂记
QML Book 第四章 入门 4

QML Book 第四章 入门 4

作者: 赵者也 | 来源:发表于2017-07-05 20:25 被阅读48次

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

相关文章

网友评论

  • 伏閣受讀:function _test_overlap()这个函数和上面的函数在这里起什么作用?
    伏閣受讀: @赵者也 谢谢
    赵者也:这两个函数可以在 上面的 接收点击的控件中调用 以便测试用的

本文标题:QML Book 第四章 入门 4

本文链接:https://www.haomeiwen.com/subject/bvmdqxtx.html