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.3import QtQuick.Particles 2.0Item {    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.3import QtGraphicalEffects 1.0Item {    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效果——