Svelte 弹幕大屏项目

本项目是一个基于 Svelte + Vite 的弹幕大屏前端实现，适用于会议、活动、直播等场景的弹幕展示。

功能特性

• 💬 弹幕效果丰富：支持颜色、字体、特效、速度、随机轨道等属性。
• 🖥️ 全屏自适应：自动适配浏览器窗口，无滚动条。
• 🖼️ 自定义背景：右键画布弹出菜单，可选择本地图片作为背景。
• 🔄 Mock 弹幕数据：内置 mock WebSocket，自动推送模拟弹幕，便于前端独立开发和演示。
• ⚡ 高性能渲染：基于 <canvas> 实现，动画流畅。

快速开始

1. 安装依赖：

   pnpm install
   # 或 npm install / yarn install
   

2. 启动开发服务器：

   pnpm dev
   # 或 npm run dev / yarn dev
   

3. 浏览器访问 http://localhost:5173 即可看到弹幕大屏效果。

使用说明

• 弹幕展示：页面自动接收 mock 弹幕数据并滚动显示。
• 更换背景：在画布区域右键，选择“修改背景”，可上传本地图片作为大屏背景。
• 自适应：窗口大小变化时，弹幕和背景会自动适配。

目录结构

src/
  lib/
    BarrageCanvas.svelte   // 弹幕渲染主组件
    barrage.js             // 弹幕对象和管理逻辑
    ws-mock.js             // mock WebSocket 服务
  App.svelte               // 挂载弹幕大屏
  main.js                  // 入口文件
  app.css                  // 全局样式

开发说明

• 仅包含大屏端弹幕展示功能，后端数据通过 mock 实现。
• 可根据实际需求扩展弹幕属性、特效、轨道分配等。
• 如需接入真实后端 WebSocket，只需替换 ws-mock.js 的实现。

适用场景

• 会议、活动、展会大屏弹幕互动
• 直播间弹幕墙
• 现场抽奖、互动留言墙

本项目为 Svelte + Vite 技术栈实践，适合前端学习、演示和实际场景快速搭建弹幕大屏。

功能规划（TODO）

• 霸屏弹幕（全屏高亮弹幕）
• 弹幕轨道智能分配与防重叠
• 进场/退场动画特效
• 顶部/底部固定弹幕
• 彩色描边、渐变、发光等高级样式
• Emoji、图片弹幕支持
• 弹幕互动（点赞、举报、屏蔽）
• 弹幕参数实时调节（数量、速度、透明度等）
• 弹幕历史回放、暂停、清屏
• 动态背景与多主题
• 性能优化（大屏高并发弹幕）