QML的粒子系统及图形渲染

在QML中，有两种特效可以让UI更加绚丽多彩，一种是粒子系统，另一种是图形渲染。

下面先来看一下粒子系统。

粒子系统主要有四个QML类型，分别是ParticleSystem、Emitter、ParticlePainter和Affector。在使用这些类型之前，首先要导入QtQuick.Particles模块。

ParticleSystem将其它的类型绑在了一起，也就是说，其它的类型之间想要交互的话就必须在同一个ParticleSystem中。

Emitter用来发射逻辑粒子，TrailEmitter也是一个发射器，两者的粒子发射位置不同，这些粒子都有自己的轨迹和生命期，但它们却是不可见的，想要可见的话就要用到ParticlePainter了，而且粒子的初始属性在其生命期内也是可以改变的，使用Affector。

ParticlePainter继承自Item元素，使用时要注意它的z属性，以明确粒子与其它可见元素的层次关系。ParticlePainter是个基本类型，本身并不描画任何东西，具体描画要使用其子类型ImageParticle、CustomParticle、ItemParticle。ImageParticle用来渲染照片，CustomParticle允许使用自定义的shader着色器来渲染，是作为vertex顶点数据来处理的，这个就涉及到OpenGl了，ItemParticle可以指定QML对象作为delegate来描画。

Affector是粒子系统中一个可选的组件，主要用来在粒子的生命期内改变其运行轨迹或提前结束其生命，不过出于性能考虑，在大容量的粒子系统中是不推荐使用Affector的。

在粒子系统中，还有几个重要的概念。每一个粒子都是粒子组（ParticleGroup）的成员，通过其name属性区分，当没有指定粒子所属的粒子组时，这些粒子默认也都在一个粒子组，不过name属性值是个空字符串，粒子组主要是为了方便地控制粒子行为状态。粒子系统的一个特性就是其随机性，如果不想要参数的随机变化也是可以取消的。关于粒子的方向，x和y属性影响的是矩形区域，角度angle和振幅magnitude影响的是在某个特定点的圆弧。形状（Shape）本身不可见，只是用来在其区域内随机选择一个点，默认的width和height都是0。

说了这么多，下面看一个简单的例子。

import QtQuick 2.3
import QtQuick.Particles 2.0

Item {
    width: 450
    height: 300

    Image {
        source: "graphical_car.png"
    }

    Text {
        text: "Left click to start/stop"
        color: "white"
        font.pixelSize: 20
    }

    MouseArea {
        anchors.fill: parent
        onClicked: particles.running = !particles.running
    }

    ParticleSystem {
        id: particles
        running: false
    }

    ImageParticle {
        system: particles
        source: "star.png"
        alpha: 0.1
        colorVariation: 0.6
    }

    Emitter {
        width: 100
        height: parent.height
        anchors.right: parent.right
        system: particles
        emitRate: 10
        lifeSpan: 1000
        size: 30
        sizeVariation: 10
    }
}

初始界面——

单击鼠标时会开始或暂停粒子发射，位置是图片右边的一个矩形区域，如下图片是粒子暂停发射时的状态——

再来说一下图形渲染，是用来创建图像组合效果的，需要导入QtGraphicalEffects模块，作用对象是QML可视化元素。

图像组合效果包括对象混合、颜色属性调整、渐变色彩、元素像素改变、阴影、模糊、运动式模糊、光晕及Mask效果，详细介绍可参考如下网址（Qt文档）：

http://doc.qt.io/qt-5/graphicaleffects.html

下面是运动式模糊效果的一个例子，使用了DirectionalBlur类型，即在某个指定的方向设置模糊效果。

import QtQuick 2.3
import QtGraphicalEffects 1.0

Item {
    width: 450
    height: 300

    Image {
        id: car
        source: "graphical_car.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    DirectionalBlur {
        anchors.fill: car
        source: car
        angle: 90
        length: 30
        samples: 18
    }
}

原图片——

DirectionalBlur效果——