一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 6 天，点击查看活动详情。

📒博客首页：何名取的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️ 期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

Emitter的Shape属性探究

前言

前面已经介绍了粒子系统的一些知识，包括粒子系统ParticleSystem、发射器Emitter的属性和函数。发射器Emitter的属性较多，前两篇文章无法一次将其介绍完，本节将继续探究Emitter的shape属性。

shape属性介绍

前面已经列出了发射器Emitter的属性，在这里还是稍微提一下。

shape : Shape
shape应用于发射器的大小。粒子将从该形状覆盖的任何区域随机发射。
默认形状是一个填充的矩形，它对应于发射器的完整边界框。

shape可以理解为一个罩子，可以自己定义这个罩子的形状。定义好这个罩子后，发射器会在这个罩子的范围内发射粒子。比如，下面我会用一个心形的透明背景的图片来做遮罩，粒子在心形遮罩上发射。

shape的值

shape的值为Shape QML类型的返回值。这样说可能有点绕，下面会在例子中体现出来。现在简单理解shape的值包含三个特定的形状，分别为EllipseShape、LineShape和MaskShape。接下来我会使用到MaskShape。

实战使用

素材

我所使用的素材是从网上下载的心形透明背景图片，免费的不需要版权。我将已这个图片作为遮罩，用发射器向心形部分发射粒子，组成一个粒子动态心形。

代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Particles 2.2

Window {
    width: 640
    height: 640
    visible: true
    title: qsTr("emitter mask")

    color: "#fff"
    Text {
        id: txt
        text: qsTr("love")
        anchors.centerIn: parent
        color: "blue"
        font.pointSize: 28
        font.family: "黑体"
    }
    ParticleSystem {
        anchors.fill: parent
        anchors.centerIn: parent

        ImageParticle {
            source: "qrc:///particleresources/glowdot.png"
            z: 2
            anchors.fill: parent
            color: "red"
            colorVariation: 0.2
        }

        Emitter {
            anchors.fill: parent
            emitRate: 6000
            lifeSpan: 1080
            size: 6
            //! [0]
            shape: MaskShape {
                source: "qrc:/mask.png"
            }
            //! [0]
        }
    }
}

代码分析

            shape: MaskShape {
                source: "qrc:/mask.png"
            }

shape属性的使用就在这里，以心形图片作为遮罩。MaskShape的属性只有一条，就是图片的url。因此，将心形透明背景图片的url设置为source的值就可以了。

运行效果

我这里使用的是白色背景，红色粒子，蓝色字体。也可以设置成其他颜色的。

QML粒子系统-Emitter(3)