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

import QtQuick.Window 2.2

Window{

    width: 450

    height: 300

    visible: true

    Image {

        source: "car.jpg"

        anchors.fill: parent

    }

    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: "bubble_1.png"

        alpha: 0.1

        colorVariation: 0.6

    }

    Emitter {

        width: 100

        height: parent.height/3

        anchors.top: parent.top

        anchors.topMargin: parent.height/4

        anchors.left:   parent.left

        anchors.margins: parent.width/4

        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

import QtQuick.Window 2.0

Window {

    width: 450

    height: 300

    visible: true

    Image {

        id: car

        anchors.fill: parent

        source: "car.jpg"

        sourceSize: Qt.size(parent.width, parent.height)

        smooth: true

        visible: false

    }

    DirectionalBlur {

        anchors.fill: car

        source: car

        angle: 90

        length: 8

        samples: 20

    }

}

说明 原文转载至：https://blog.csdn.net/ieearth/article/details/44493427