fly-barrage 前端弹幕库（2）：弹幕内容支持混入渲染图片的设计与实现

项目官网地址：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）：顶部、底部弹幕的设计与实现

如果弹幕内容只支持文字的话，只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。
但如果想同时支持渲染图片和文字的话，需要以下几个步骤：

1. 设计一个面向用户的数据结构，用于描述弹幕应该渲染哪些文字和图片；
2. 框架内部对上述数据结构进行解析，解析出文字部分和图片部分；
3. 计算出各个部分相对于弹幕整体左上角的 top 偏移量和 left 偏移量；
4. 弹幕渲染时，首先计算出弹幕整体左上角距离 canvas 原点的 top 和 left（这块的计算是后续的内容，后续再说），然后再根据弹幕整体的 top 和 left 结合各个部分的 top、left 偏移量循环渲染各个部分。

整体逻辑如下图所示：

相关 API 可以看官网的这里：https://fly-barrage.netlify.app/guide/barrage-image.html

下面着重说说上面几点具体是如何实现的。

1：面向用户的数据结构，用于描述弹幕应该渲染哪些文字和图片

设计的数据结构如下所示：

export type BaseBarrageOptions = {
   
  // 弹幕的内容（eg：文本内容[图片id]文本内容[图片id]文本内容）
  text: string;
}

例如：“[0001]新年快乐[0003]”，它的渲染效果就是如下这样子的。

2：对上述结构进行解析，解析出文字以及图片部分

这块对应源码中的 class BaseBarrage --> analyseText 方法，源码如下所示：

/**
 * 弹幕类
 */
export default abstract class BaseBarrage {
   
  /**
   * 解析 text 内容
   * 文本内容[图片id]文本内容[图片id] => ['文本内容', '[图片id]', '文本内容', '[图片id]']
   * @param barrageText 弹幕文本
   */
  analyseText(barrageText: string): Segment[] {
   
    const segments: Segment[] = [];

    // 字符串解析器
    while (barrageText) {
   
      // 尝试获取 ]
      const rightIndex = barrageText.indexOf(']');
      if (rightIndex !== -1) {
   
        // 能找到 ]，尝试获取 rightIndex 前面的 [
        const leftIndex = barrageText.lastIndexOf('[', rightIndex);
        if (leftIndex !== -1) {
   
          // [ 能找到
          if (leftIndex !== 0) {
   
            // 如果不等于 0 的话，说明前面是 text
            segments.push({
   
              type: 'text',
              value: barrageText.slice(0, leftIndex),
            })
          }
          segments