背景
正如我這篇文章《vue.js如何演示思維導(dǎo)圖》所言，我要?jiǎng)?chuàng)作一個(gè)作品。然而，我覺得演示思維導(dǎo)圖還是不夠，我覺得還要添加一個(gè)新奇的、絢麗的、富有新春氣息的東西。嗯，該是什么好呢？想來想去，覺得煙花最合適。我在全網(wǎng)搜索別人做的煙花，終于在微信里找到一篇比較合適的文章《「萬事勝意」你可能不知道的煙花秀》。然而，這樣的文字煙花是用純粹的JavaScript寫的，而且它的煙花圖標(biāo)、背景都不適合我的作品，因此，我決定把它的代碼移植過來。
實(shí)現(xiàn)
1、底層依賴
| dependency | version |
|---|---|
| vue | 2.7.7 |
| pixi.js | 7.3.3 |
核心技術(shù)其實(shí)是 pixi，你可以去它的官網(wǎng)研究下。
2、導(dǎo)入依賴
在 .vue 文件中的 <script> 內(nèi)添加以下代碼：
import * as PIXI from 'pixi.js';
3、初始化
我需要初始化炸煙花相關(guān)的變量。
// 注意，一定要把`requestAnimationFrame()`用到的變量定義在`window`作用域中，否則動(dòng)畫非常慢
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
現(xiàn)在需要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 ？原因請(qǐng)到參考原文里看。此時(shí)還需要樣式：
<style scoped>
#textFireWorksCanvas {
display: none;
}
#textFireWorksDiv {
position: relative;
z-index: 1;
}
</style>
5、data
請(qǐng)主要，我剛剛使用了 :width="canvasWidth" 和 :height="canvasHeight" ，那么，就進(jìn)入 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,
// 文字大小，只要把文字放在之前思維導(dǎo)圖的位置就可以了
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() 中調(diào)用了 initCanvas() ，它的實(shí)現(xiàn)是
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);// 水平居中，頂端對(duì)齊
ctx.fillText('新春快樂', this.canvasWidth/2, this.fontSize+15);// 寫在下面，并且行距大一點(diǎn)
// 獲取畫布位置
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) {
// 當(dāng)前像素塊相對(duì)于畫布的索引位置
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() 中還調(diào)用了 initTextFireworks() ，它的實(shí)現(xiàn)是
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);
}
// 清空像素，釋放內(nèi)存
this.textPixels = [];
}
這個(gè)函數(shù)調(diào)用了 shuffle() ，它的實(shí)現(xiàn)是
shuffle(array) {// 打亂位置
let currentIndex = array.length,
temporaryValue,
randomIndex;
while (0 !== currentIndex) {
// 選擇一個(gè)剩余的元素
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
這個(gè)函數(shù)也調(diào)用了 createEmojiFirework() ，它的實(shí)現(xiàn)是
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 ，它的實(shí)現(xiàn)如下：
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]);
}
}
}
// 將對(duì)象渲染到其 WebGL 視圖。
renderer.render(stage);
}
這個(gè)函數(shù)還使用了 explodeFirework ，它的實(shí)現(xiàn)如下：
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、啟動(dòng)
最后，我希望能在頁面加載時(shí)，就發(fā)射煙花。最好的方法自然是在 mounted 里寫了。
mounted() {
this.startTextFireworks();
}
結(jié)語
本篇文章其實(shí)不是在教你怎么寫發(fā)射文字煙花，因?yàn)樵髡咭呀?jīng)在《vue.js如何演示思維導(dǎo)圖》寫了。本篇文章其實(shí)是將原作者的代碼移植到vue.js中。
我所有的代碼都放在GitHub里，歡迎來看看??bless-szse-2024
