背景

正如我这篇文章《vue.js如何演示思维导图》所言，我要创作一个作品。然而，我觉得演示思维导图还是不够，我觉得还要添加一个新奇的、绚丽的、富有新春气息的东西。嗯，该是什么好呢？想来想去，觉得烟花最合适。我在全网搜索别人做的烟花，终于在微信里找到一篇比较合适的文章《「万事胜意」你可能不知道的烟花秀》。然而，这样的文字烟花是用纯粹的JavaScript写的，而且它的烟花图标、背景都不适合我的作品，因此，我决定把它的代码移植过来。

实现

1、底层依赖

dependency	version
vue	2.7.7
pixi.js	7.3.3

核心技术其实是 pixi，你可以去它的官网研究下。

2、导入依赖

在 .vue 文件中的 <script> 内添加以下代码：

import * as PIXI from 'pixi.js';

3、初始化

我需要初始化炸烟花相关的变量。

// 注意，一定要把`requestAnimationFrame()`用到的变量定义在`window`作用域中，否则动画非常慢
const stage = new PIXI.Container();
const renderer = PIXI.autoDetectRenderer({
  backgroundAlpha: 0, // 0:完全透明
  width: window.innerWidth,
  height: window.innerHeight
});
const particles = [];
const fireworks = [];

注意，正如以上代码中的注释所写的，不要把这些变量放在 data 里。

4、HTML

现在需要HTML代码。话不多说，看代码：

<template>
  <div ref="textFireWorksContainer">
    <canvas id="textFireWorksCanvas"
            ref="textFireWorksCanvas"
            :width="canvasWidth"
            :height="canvasHeight"></canvas>
    <div id="textFireWorksDiv"
         ref="textFireWorksDiv"></div>
  </div>
</template>

咦？这是啥？怎么既 canvas ，又有 div ？原因请到参考原文里看。此时还需要样式：

<style scoped>
#textFireWorksCanvas {
  display: none;
}

#textFireWorksDiv {
  position: relative;
  z-index: 1;
}
</style>

5、data

请主要，我刚刚使用了 :width="canvasWidth" 和 :height="canvasHeight" ，那么，就进入 data 吧。

data() {
  const width = window.innerWidth,
        height = window.innerHeight,
        lineGap = 15,
        fontSize = Math.ceil((width - 605) / 5),
        yOffset = (height - (fontSize * 2 + 15)) / 3 - lineGap;
  return {
    // 使画布遮瞒全屏
    canvasWidth: width,
    canvasHeight: height,
    // 文字大小，只要把文字放在之前思维导图的位置就可以了
    fontSize: fontSize,
    // 行距
    lineGap: lineGap,
    // 垂直偏移量，也就是顶端空出多少
    yOffset: yOffset,
    textPixels: []
  }
}

6、开始文字烟花

startTextFireworks() {
  // 添加PIXI画布
  this.$refs.textFireWorksDiv.appendChild(renderer.view);
  renderer.resize(this.canvasWidth, this.canvasHeight);

  this.initCanvas();
  this.initTextFireworks();
  requestAnimationFrame(this.fireWorksAnimate);
}

7、初始化画布

以上 startTextFireworks() 中调用了 initCanvas() ，它的实现是

initCanvas() {// 初始化HTML5画布
  const canvas = this.$refs.textFireWorksCanvas;
  const ctx = canvas.getContext('2d');

  // 写字
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.font = `${this.fontSize}px "宋体"`;
  ctx.fillStyle = '#fff';
  ctx.fillText('深交所', this.canvasWidth/2, 0);// 水平居中，顶端对齐
  ctx.fillText('新春快乐', this.canvasWidth/2, this.fontSize+15);// 写在下面，并且行距大一点

  // 获取画布位置
  let pix = ctx.getImageData(0, 0, this.canvasWidth, this.canvasHeight).data, gap = 6;
  for (let h = 0; h < this.canvasHeight; h += gap) {
    for (let w = 0; w < this.canvasWidth; w += gap) {
      // 当前像素块相对于画布的索引位置
      let position = (this.canvasWidth * h + w) * 4;
      let r = pix[position],
          g = pix[position + 1],
          b = pix[position + 2];
      if (r + g + b !== 0) {
        this.textPixels.push({ x: w, y: h });
      }
    }
  }
}

8、初始化文字烟花

startTextFireworks() 中还调用了 initTextFireworks() ，它的实现是

initTextFireworks() {// 初始化文字烟花
  this.shuffle(this.textPixels);
  const textures = PIXI.Texture.from('images/fu.svg');
  for (let i = 0, l = this.textPixels.length; i < l; i++) {
    this.createEmojiFirework(textures, this.textPixels[i], i);
  }
  // 清空像素，释放内存
  this.textPixels = [];
}

这个函数调用了 shuffle() ，它的实现是

shuffle(array) {// 打乱位置
  let currentIndex = array.length,
      temporaryValue,
      randomIndex;
  while (0 !== currentIndex) {
    // 选择一个剩余的元素
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

这个函数也调用了 createEmojiFirework() ，它的实现是

createEmojiFirework(text, pos, i) {
  setTimeout(() => {
    let size = 20, firework = new PIXI.Sprite(text);
    firework.explodePosition = {
      x: pos.x,
      y: pos.y + this.yOffset,
    };
    firework.position.x = Math.random() * this.canvasWidth;
    firework.position.y = this.canvasHeight + Math.random() * 40;
    firework.width = size;
    firework.height = size;
    firework.speed = 0.001 + Math.random() * 0.05;
    firework.image = text;
    fireworks.push(firework);
    stage.addChild(firework);
  }, i * 10);
}

9、放射烟花

startTextFireworks() 最后还使用了 fireWorksAnimate ，它的实现如下：

fireWorksAnimate() {
  requestAnimationFrame(this.fireWorksAnimate);
  for (let i = 0, l = particles.length; i < l; i++) {
    particles[i].position.x += particles[i].speed.x;
    particles[i].position.y += particles[i].speed.y;
    particles[i].speed.y += 0.03;
    particles[i].alpha -= 0.01;
  }
  for (let i = 0; i < fireworks.length; i++) {
    fireworks[i].position.x += (fireworks[i].explodePosition.x - fireworks[i].position.x) * fireworks[i].speed;
    fireworks[i].position.y += (fireworks[i].explodePosition.y - fireworks[i].position.y) * fireworks[i].speed;
    if (!fireworks[i].exploded) {
      if (Math.abs(fireworks[i].position.x - fireworks[i].explodePosition.x) +
          Math.abs(fireworks[i].position.y - fireworks[i].explodePosition.y) <
          100
      ) {
        fireworks[i].exploded = true;
        this.explodeFirework(fireworks[i]);
      }
    }
  }
  // 将对象渲染到其 WebGL 视图。
  renderer.render(stage);
}

这个函数还使用了 explodeFirework ，它的实现如下：

explodeFirework(firework) {
  for (let i = 0; i < 10; i++) {
    let size = this.fontSize / 10 + (Math.random() * this.fontSize) / 10;
    let particle = new PIXI.Sprite(firework.image);
    let angle = Math.random() * (2 * Math.PI);
    particle.speed = {
      x: Math.cos(angle) * (2 + Math.random() * 10) * 0.4,
      y: Math.sin(angle) * (2 + Math.random() * 10) * 0.4,
    };
    particle.position.x = firework.position.x;
    particle.position.y = firework.position.y;
    particle.width = size;
    particle.height = size;
    particles.push(particle);
    stage.addChild(particle);
  }
}

10、启动

最后，我希望能在页面加载时，就发射烟花。最好的方法自然是在 mounted 里写了。

mounted() {
  this.startTextFireworks();
}

结语

本篇文章其实不是在教你怎么写发射文字烟花，因为原作者已经在《vue.js如何演示思维导图》写了。本篇文章其实是将原作者的代码移植到vue.js中。

我所有的代码都放在GitHub里，欢迎来看看👉bless-szse-2024