fly-barrage 前端弹幕库（3）：滚动弹幕的设计与实现

项目官网地址：https://fly-barrage.netlify.app/；
👑🐋🎉如果感觉项目还不错的话，还请点下 star 🌟🌟🌟。
Gitee：https://gitee.com/fei_fei27/fly-barrage（Gitee 官方推荐项目）；
Github：https://github.com/feiafei27/fly-barrage；

其他系列文章：
fly-barrage 前端弹幕库（1）：项目介绍
fly-barrage 前端弹幕库（2）：弹幕内容支持混入渲染图片的设计与实现
fly-barrage 前端弹幕库（3）：滚动弹幕的设计与实现
fly-barrage 前端弹幕库（4）：顶部、底部弹幕的设计与实现

今天和大家说说滚动弹幕的设计与实现，为了便于理解，我会由简到难的一步步解析说明，主要包括以下几块内容：

• 实现一条滚动弹幕的计算与渲染；
• 实现多条滚动弹幕的计算与渲染；
• 实现多条滚动弹幕相同字号并且不允许弹幕重叠的计算与渲染；
• 实现多条滚动弹幕不同字号并且不允许弹幕重叠的计算与渲染；

1：实现一条滚动弹幕的计算与渲染

滚动弹幕具有如下两个特性：

export type BaseBarrageOptions = {
   
  // 弹幕的出现时间（毫秒为单位）
  time: number;
}
export type RenderConfig = {
   
  // 弹幕运行速度，仅对滚动弹幕有效（每秒多少像素）
  speed: number;
}

time 属性表示这个弹幕在视频播放器的时间是 time 的时候，这个滚动弹幕的左侧应该紧贴 Canvas 的右侧，此时弹幕的左侧距离 Canvas 的左侧距离正好是 Canvas 的宽，逻辑图如下所示：

speed 属性用于描述滚动弹幕的速度，意为每秒会移动多少像素。

每个滚动弹幕都有一个 originalLeft 属性，它标识着当播放进度是 0 的时候，滚动弹幕左侧距离 Canvas 左侧的距离，它的算法如下所示：

// 计算公式是：Canvas 元素的宽 + 弹幕出现时间 * 弹幕速度
this.originalLeft = this.br.canvasSize.width + (this.time / 1000) * this.br.renderConfig.speed;

如果某一个滚动弹幕的 time 属性为 0 的话，它的 originalLeft 正好等于 Canvas 的宽。

除了计算 originalLeft，还需要计算弹幕文本的宽，用于辅助计算某条滚动弹幕应不应该被 Canvas 实际渲染出来，弹幕宽度的计算方式可以看我的上一篇博客。

然后随着视频的播放ÿ