jayu-fireworks

一个轻量的烟花渲染引擎，支持：

• 原生 Canvas（任意框架/无框架）
• Vue 3 组件封装（可选依赖）

包为 ESM（"type": "module"）。

安装

npm i jayu-fireworks

快速开始（Canvas）

HTML：

<div class="canvas-container" style="width:100vw;height:100vh">
  <canvas id="trails-canvas"></canvas>
  <canvas id="main-canvas"></canvas>
</div>

JS：

import { createFireworksEngine, FIREWORKS_PRESETS } from 'jayu-fireworks';

const container = document.querySelector('.canvas-container');
const trailsCanvas = document.getElementById('trails-canvas');
const mainCanvas = document.getElementById('main-canvas');

const engine = createFireworksEngine({
  container,
  trailsCanvas,
  mainCanvas,
  autoStart: true,
  interactive: true,
  config: {
    quality: FIREWORKS_PRESETS.QUALITY_NORMAL,
    skyLighting: FIREWORKS_PRESETS.SKY_LIGHT_NORMAL,
    shell: 'Random',
    size: 2,
    autoLaunch: true,
    finale: false,
    longExposure: false,
    scaleFactor: 1,
    sound: false
  }
});

function resizeToContainer() {
  const rect = container.getBoundingClientRect();
  engine.resize(Math.floor(rect.width), Math.floor(rect.height));
}

resizeToContainer();
window.addEventListener('resize', resizeToContainer);

交互说明：

• interactive: true 时，默认在 mainCanvas 上监听 pointerdown，点击即发射
• 想自己接管交互：传 interactive: false，然后用 engine.launchAt() / engine.launchNormalized() 控制

Vue 3 使用

安装后可直接引入组件：

<template>
  <div style="width: 100vw; height: 100vh">
    <FireworksCanvas ref="fw" :config="config" :autoStart="true" :interactive="true" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { FireworksCanvas } from 'jayu-fireworks/vue';
import { FIREWORKS_PRESETS } from 'jayu-fireworks';

const fw = ref(null);
const config = {
  quality: FIREWORKS_PRESETS.QUALITY_NORMAL,
  autoLaunch: true
};

function boom() {
  fw.value?.launchRandom();
}
</script>

组件通过 ref 暴露的方法：

• engine
• start() / stop()
• launchAt(x, y) / launchNormalized(x, y) / launchRandom()
• startSequence()
• setConfig(next)
• resize()

API（引擎）

创建：

import { createFireworksEngine } from 'jayu-fireworks';
const engine = createFireworksEngine(options);

常用方法：

• engine.resize(width, height)
• engine.start() / engine.stop() / engine.destroy()
• engine.setConfig(partialConfig) / engine.getConfig()
• engine.launchAt(x, y)
• engine.launchNormalized(xNorm, yNorm)
• engine.launchRandom()
• engine.startSequence()

配置（config）

可通过 engine.setConfig() 动态更新。

• quality: 1 | 2 | 3（也可用 FIREWORKS_PRESETS.QUALITY_*）
• shell: 'Random' 或 engine.shellNames 里的名称
• size: 数字
• autoLaunch: 自动发射序列
• finale: 终曲模式（通常需要 autoLaunch: true 才明显）
• skyLighting: 0 | 1 | 2（也可用 FIREWORKS_PRESETS.SKY_LIGHT_*）
• longExposure: 长曝光拖尾
• scaleFactor: 画面缩放（> 0）
• sound: 预留字段（当前实现不播放声音）

纯浏览器引入说明

本包是 ESM。浏览器直接打开 file:// 页面通常无法加载模块，请用任意静态服务器方式运行页面（例如 dev server / 本地静态服务）。