# Fireworks 烟花组件

一个基于 Canvas 的烟花效果组件，支持多种形状和自定义图片，包含精美的生日蛋糕 SVG 动画。

## 功能特性

- 🎆 支持多种粒子形状：矩形、正方形、圆形、三角形、椭圆形
- 🖼️ 支持自定义图片粒子
- 🎂 内置生日蛋糕 SVG 动画
- 🎨 丰富的颜色配置
- ⚡ 高性能对象池设计
- 🎯 事件驱动的触发机制
- ⌨️ 快捷键支持 (Ctrl/Cmd + Shift + P)

## 使用方法

### 基础使用

1. 在模板中引入组件：

```vue
<template>
  <div>
    <!-- 生日蛋糕SVG动画展示 -->
    <div class="birthday-cake-container">
      <object data="./img/birthday-cake.svg" type="image/svg+xml" width="200" height="240"></object>
    </div>

    <!-- 烟花组件 -->
    <BiFireworks />
  </div>
</template>

<script>
export default {
  // 组件已全局注册，无需手动导入
}
</script>
```

2. 触发烟花效果：

```javascript
// 触发默认烟花
this.$root.$emit('triggerFireworks')

// 使用自定义图片
this.$root.$emit('triggerFireworks', imageUrl)

// 生日庆祝模式（多阶段烟花表演）
this.handleBirthdayFireworks()
```

### 事件触发

组件监听 `triggerFireworks` 事件来触发烟花效果：

```javascript
// 单次烟花
this.$root.$emit('triggerFireworks')

// 使用图片的烟花
import hbImage from './imgs/hb.png'
this.$root.$emit('triggerFireworks', hbImage)

// 使用生日蛋糕
import cakeImage from './imgs/mini-cake.svg'
this.$root.$emit('triggerFireworks', cakeImage)
```

### 快捷键

- **Ctrl + Shift + P** (Windows/Linux)
- **Cmd + Shift + P** (macOS)

## 配置说明

### 内置图片

组件内置了以下图片资源：

- `hb.png` - 红包图片
- `sd.png` - 雪花图片
- `yd.png` - 其他装饰图片
- `xc.png` - 小丑红包图片
- `mini-cake.svg` - 小型生日蛋糕图标

### SVG 动画文件

- `birthday-cake.svg` - 完整的生日蛋糕动画，包含：
  - 三层蛋糕设计
  - 蜡烛火焰动画
  - 装饰樱桃跳动效果
  - 漂浮的生日祝福文字
  - 旋转的星星装饰
  - 心形和气泡动画

### 粒子配置

可以通过修改 `CONFIG` 对象来调整烟花效果：

```javascript
const CONFIG = {
  PARTICLES_PER_BURST: 200,  // 每次爆炸的粒子数量
  COLORS: [...],             // 粒子颜色数组
  SHAPES: [...],             // 粒子形状数组
  SIZES: {...},              // 各种形状的尺寸配置
  ROTATION: {...}            // 旋转相关参数
}
```

## 生日庆祝功能

### 多阶段烟花表演

```javascript
handleBirthdayFireworks() {
  // 第一阶段：蛋糕烟花
  this.$root.$emit('triggerFireworks', cakeImage)

  // 第二阶段：红包雨 (800ms后)
  // 第三阶段：更多蛋糕 (1600ms后)
  // 第四阶段：混合烟花 (2400ms后)
  // 第五阶段：大结局 (3200ms后)
}
```

## 浏览器兼容性

- 现代浏览器：完整支持所有功能包括 SVG 动画
- 老版本浏览器：自动降级处理（椭圆形会降级为圆形）
- SVG 支持：IE9+、Chrome、Firefox、Safari、Edge

## 性能优化

- 使用对象池避免频繁创建销毁对象
- 异步创建粒子避免阻塞主线程
- 粒子超出屏幕范围时自动回收
- 透明度渐变优化视觉效果
- SVG 图像预加载机制

## 注意事项

1. 组件会创建一个全屏的 Canvas 元素，z-index 为 9999
2. Canvas 设置了 `pointer-events: none`，不会影响页面交互
3. 图片资源需要考虑跨域问题
4. SVG 动画在某些老版本浏览器可能不支持
5. 建议在节假日或特殊场景下使用，避免影响正常业务

## 文件结构

```
packages/Fireworks/
├── index.vue          # 主组件
├── index.js           # 组件导出
├── README.md          # 使用说明
└── imgs/              # 图片资源
    ├── hb.png         # 红包
    ├── sd.png         # 雪花
    ├── yd.png         # 装饰
    └── xc.png         # 小丑红包

src/views/img/
├── birthday-cake.svg  # 完整生日蛋糕动画
└── mini-cake.svg      # 小型蛋糕图标
```