做培训体系的网站,wordpress主题更新教程,公司域名注册步骤,二次开发招聘如果弹幕内容只支持文字的话#xff0c;只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。 但如果想同时支持渲染图片和文字的话#xff0c;需要以下几个步骤#xff1a;
设计一个面向用户的数据结构#xff0c;用于描述弹幕应该渲染哪些文字和图片#x…如果弹幕内容只支持文字的话只需要借助 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 的话说明前面是 textsegments.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;// 计算转换成 sectionsconst 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 的 topOffsetthis.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弹幕渲染时的操作
弹幕渲染时首先需要计算出弹幕整体左上角的定位这个是后面的内容之后再说这里先假设某个弹幕渲染时整体左上角的定位是10px10px各个片段的 top、left 偏移量已经计算出来了结合这两块数据可以计算出各个片段左上角的定位。至此循环渲染出各个片段即可完成整体弹幕的渲染操作相关源码如下所示
/*** 弹幕类*/
export default abstract class BaseBarrage {// 用于描述渲染时弹幕整体的 top 和 lefttop!: number;left!: number;/*** 将当前弹幕渲染到指定的上下文* param ctx 渲染上下文*/render(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) {// 设置绘图上下文this.setCtxFont(ctx);ctx.fillStyle this.color;// 遍历当前弹幕的 sectionsthis.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以上就是弹幕内容支持混入渲染图片的设计与实现后面说说各种类型弹幕的具体设计。
