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

纷飞丿

已于 2024-03-08 11:36:19 修改

阅读量1.3k

点赞数 25

分类专栏： Fly Barrage 文章标签：前端 typescript javascript

于 2024-02-25 13:31:39 首次发布

本文链接：https://blog.csdn.net/f18855666661/article/details/136280628

版权

Fly Barrage 专栏收录该内容

6 篇文章 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）：顶部、底部弹幕的设计与实现

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

设计一个面向用户的数据结构，用于描述弹幕应该渲染哪些文字和图片；
框架内部对上述数据结构进行解析，解析出文字部分和图片部分；
计算出各个部分相对于弹幕整体左上角的 top 偏移量和 left 偏移量；
弹幕渲染时，首先计算出弹幕整体左上角距离 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.push({
            type: rightIndex - leftIndex > 1 ? 'image' : 'text',
            value: barrageText.slice(leftIndex, rightIndex + 1),
          });
          barrageText = barrageText.slice(rightIndex + 1);
        } else {
          // [ 找不到
          segments.push({
            type: 'text',
            value: barrageText.slice(0, rightIndex + 1),
          })
          barrageText = barrageText.slice(rightIndex + 1);
        }
      } else {
        // 不能找到 ]
        segments.push({
          type: 'text',
          value: barrageText,
        });
        barrageText = '';
      }
    }

    // 相邻为 text 类型的需要进行合并
    const finalSegments: Segment[] = [];
    let currentText = '';
    for (let i = 0; i < segments.length; i++) {
      if (segments[i].type === 'text') {
        currentText += segments[i].value;
      } else {
        if (currentText !== '') {
          finalSegments.push({ type: 'text', value: currentText });
          currentText = '';
        }
        finalSegments.push(segments[i]);
      }
    }
    if (currentText !== '') {
      finalSegments.push({ type: 'text', value: currentText });
    }

    return finalSegments;
  }
}

/**
 * 解析完成的片段
 */
export type Segment = {
  type: 'text' | 'image',
  value: string
}

analyseText 方法的作用就是将 “[0001]新年快乐[0003]” 解析成如下数据：

[
  {
    type: 'image',
    value: '[0001]'
  },
  {
    type: 'text',
    value: '新年快乐'
  },
  {
    type: 'image',
    value: '[0003]'
  },
]

这块的核心逻辑是字符串解析器，这里我借鉴了 Vue2 模板编译中解析器的实现（Vue 解析器的解析可以看我的这篇博客：https://blog.csdn.net/f18855666661/article/details/118422414）。

这里我使用 while 不断的循环解析 barrageText 字符串，一旦解析出一块内容，便将其从 barrageText 字符串中裁剪出去，并且将对应的数据 push 到 segments 数组中，当 barrageText 变成一个空字符串的时候，整个字符串的解析也就完成了。

具体的解析过程大家看我的注释即可，很容易理解。

3：计算出各个部分相对于弹幕整体左上角的 top 偏移量和 left 偏移量

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

/**
 * 弹幕类
 */
export default abstract class BaseBarrage {
  /**
   * 进行当前弹幕相关数据的计算
   */
  initBarrage() {
    const sectionObjects = this.analyseText(this.text);
    let barrageImage;

    // 整个弹幕的宽
    let totalWidth = 0;
    // 整个弹幕的高
    let maxHeight = 0;

    // 计算转换成 sections
    const sections: Section[] = [];
    sectionObjects.forEach(sectionObject => {
      // 判断是文本片段还是图片片段
      if (sectionObject.type === 'image' && (barrageImage = this.br.barrageImages?.find(bi => `[${bi.id}]` === sectionObject.value))) {
        totalWidth += barrageImage.width;
        maxHeight = maxHeight < barrageImage.height ? barrageImage.height : maxHeight;

        // 构建图片片段
        sections.push(new ImageSection({
          ...barrageImage,
          leftOffset: Utils.Math.sum(sections.map(section => section.width)),
        }));
      } else {
        // 设置好文本状态后，进行文本的测量
        this.setCtxFont(this.br.ctx);
        const textWidth = this.br.ctx?.measureText(sectionObject.value).width || 0;
        const textHeight = this.fontSize * this.lineHeight;

        totalWidth += textWidth;
        maxHeight = maxHeight < textHeight ? textHeight : maxHeight;

        // 构建文本片段
        sections.push(new TextSection({
          text: sectionObject.value,
          width: textWidth,
          height: textHeight,
          leftOffset: Utils.Math.sum(sections.map(section => section.width)),
        }));
      }
    })
    this.sections = sections;

    // 设置当前弹幕的宽高，如果自定义中定义了的话，则取自定义中的 width 和 height，因为弹幕实际呈现出来的 width 和 height 是由渲染方式决定的
    this.width = this.customRender?.width ?? totalWidth;
    this.height = this.customRender?.height ?? maxHeight;

    // 遍历计算各个 section 的 topOffset
    this.sections.forEach(item => {
      if (item.sectionType === 'text') {
        item.topOffset = (this.height - this.fontSize) / 2;
      } else {
        item.topOffset = (this.height - item.height) / 2;
      }
    });
  }
}

initBarrage 首先调用 analyseText 方法实现弹幕字符串的解析工作，然后对 analyseText 方法的返回值进行遍历处理。

在遍历的过程中，首先判断当前遍历的片段是文本片段还是图片片段，当片段的 type 是 image 并且对应的图片 id 已有对应配置的话，则表明当前是图片片段，否则就是文本片段。

然后需要根据片段的类型去计算对应片段的宽和高，图片类型的宽高不用计算，因为图片的尺寸是用户通过 API 传递进框架的，框架内部直接取就可以了。文本片段的宽使用渲染上下文的 measureText 方法可以计算出，文本片段的高等于弹幕的字号乘以行高。

各个片段的宽高计算出来之后，开始计算各个片段的 left 偏移量，由于每个计算好的片段都会被 push 到 sections 数组中，所以当前片段的 left 偏移量等于 sections 数组中已有片段的宽度总和。

top 偏移量需要知道弹幕整体的高度，弹幕整体的高度等于最高片段的高度，所以在循环处理 sectionObjects 的过程中，使用 maxHeight 变量判断记录最高片段的高度，在 sectionObjects 循环结束之后，就可以计算各个片段的 top 偏移量了，各个片段的 top 偏移量等于弹幕整体高度减去当前片段实际渲染高度然后除以 2。

4：弹幕渲染时的操作

弹幕渲染时，首先需要计算出弹幕整体左上角的定位，这个是后面的内容，之后再说，这里先假设某个弹幕渲染时整体左上角的定位是（10px，10px），各个片段的 top、left 偏移量已经计算出来了，结合这两块数据可以计算出各个片段左上角的定位。至此，循环渲染出各个片段即可完成整体弹幕的渲染操作，相关源码如下所示：

/**
 * 弹幕类
 */
export default abstract class BaseBarrage {
  // 用于描述渲染时弹幕整体的 top 和 left
  top!: number;
  left!: number;

  /**
   * 将当前弹幕渲染到指定的上下文
   * @param ctx 渲染上下文
   */
  render(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) {
    // 设置绘图上下文
    this.setCtxFont(ctx);
    ctx.fillStyle = this.color;
    // 遍历当前弹幕的 sections
    this.sections.forEach(section => {
      if (section.sectionType === 'text') {
        ctx.fillText(section.text, this.left + section.leftOffset, this.top + section.topOffset);
      } else if (section.sectionType === 'image') {
        ctx.drawImage(
          Utils.Cache.imageElementFactory(section.url),
          this.left + section.leftOffset,
          this.top + section.topOffset,
          section.width,
          section.height,
        )
      }
    })
  }
}

5：总结

ok，以上就是弹幕内容支持混入渲染图片的设计与实现，后面说说各种类型弹幕的具体设计。

纷飞丿

关注

25
点赞
踩
21

收藏

觉得还不错? 一键收藏
4
评论
fly-barrage 前端弹幕库（2）：弹幕内容支持混入渲染图片的设计与实现

如果弹幕内容只支持文字的话，只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。但如果想同时支持渲染图片和文字的话，需要以下几个步骤： 1. 设计一个面向用户的数据结构，用于描述弹幕应该渲染哪些文字和图片； 2. 框架内部对上述数据结构进行解析，解析出文字部分和图片部分； 3. 计算出各个部分相对于弹幕整体左上角的 top 偏移量和 left 偏移量； 4. 弹幕渲染时，需要计算出各个片段的左上角定位；
复制链接

扫一扫