fly-barrage 是我寫的一個(gè)前端彈幕庫(kù)，由于經(jīng)常在 Bilibili 上看視頻，所以對(duì)網(wǎng)頁(yè)的彈幕功能一直蠻感興趣的，所以做了這個(gè)庫(kù)，可以幫助前端快速的實(shí)現(xiàn)彈幕功能。

項(xiàng)目官網(wǎng)地址：https://fly-barrage.netlify.app/；

本系列博客主要講解框架的內(nèi)部設(shè)計(jì)實(shí)現(xiàn)，用法方面可以直接看官網(wǎng)。

本篇博客先簡(jiǎn)要介紹下項(xiàng)目，說(shuō)說(shuō)有哪些功能。

如果感覺(jué)項(xiàng)目還不錯(cuò)的話，還請(qǐng)點(diǎn)下 star ?*｡?(ˊωˋ*)??*。
github：https://github.com/feiafei27/fly-barrage；
gitee：https://gitee.com/fei_fei27/fly-barrage；

1：功能完善，支持滾動(dòng)彈幕、頂部彈幕、底部彈幕、高級(jí)彈幕。

彈幕的相關(guān)配置可以看：https://fly-barrage.netlify.app/guide/barrage.html。

具體渲染效果如下所示：

2：彈幕內(nèi)容支持圖片和文字任意混搭。

export type BaseBarrageOptions = {// 彈幕的內(nèi)容（eg：文本內(nèi)容[圖片id]文本內(nèi)容[圖片id]文本內(nèi)容）text: string;
}

如果想在彈幕內(nèi)容中渲染圖片的話，只需要在彈幕文本中加上“[圖片id]”即可，框架內(nèi)部會(huì)對(duì)彈幕的 text 屬性進(jìn)行解析，解析出純文本以及圖片 id 的部分，然后在渲染時(shí)，根據(jù)圖片 id 獲取圖片資源并渲染到 canvas 上。

需要渲染的圖片也需要進(jìn)行配置，配置方式如下所示：

/*** 彈幕渲染器 class 構(gòu)造函數(shù)的參數(shù)*/
export type RendererOptions = {// 彈幕中渲染圖片的配置barrageImages?: BarrageImage[];
}/*** 彈幕中渲染圖片的配置*/
export type BarrageImage = {// 彈幕圖片的唯一標(biāo)識(shí)id: string;// 圖片的地址url: string;// 渲染時(shí)的寬width: number;// 渲染時(shí)的高height: number;
}

3：彈幕提供自定義渲染接口，可以高度自定義彈幕的渲染操作。

具體 API 如下所示：

export type BaseBarrageOptions = {// 自定義 render 相關(guān)配置customRender?: CustomRender;
}/*** 自定義 render 相關(guān)配置*/
export type CustomRender = {// 彈幕的寬（彈幕實(shí)際的寬由具體的渲染操作決定，所以這里由用戶自行傳入）width: number;// 彈幕的高（彈幕實(shí)際的高由具體的渲染操作決定，所以這里由用戶自行傳入）height: number;// 彈幕自定義渲染函數(shù)renderFn: RenderFn;
}/*** 自定義 render 函數(shù)*/
export type RenderFn = (options: CustomRenderOptions) => void;

項(xiàng)目的完整 DEMO 中就使用了自定義渲染實(shí)現(xiàn)了發(fā)送祝福的功能，渲染效果如下所示：

4：彈幕的 fontSize 可以取不同的大小，并且滾動(dòng)彈幕可以設(shè)置成不重疊布局

使用虛擬軌道算法進(jìn)行不同 fontSize 大小滾動(dòng)彈幕的防重疊布局計(jì)算。

實(shí)現(xiàn)如下的渲染效果（這里有兩種 fontSize 的彈幕，24px 和 34px，并且相互不會(huì)重疊）：

5：提供多種全局渲染相關(guān)的配置

相關(guān) API 如下所示：

export type RendererOptions = {// 渲染相關(guān)配置renderConfig?: Partial<RenderConfig>;
}export type RenderConfig = {// 自定義彈幕過(guò)濾器，返回 false，彈幕就會(huì)被過(guò)濾掉barrageFilter?: (barrage: BaseBarrage) => boolean;// Canvas 元素默認(rèn)和 container 等高，為了避免彈幕渲染遮擋住播放器的控制欄，// 可以設(shè)置減少一定的高度heightReduce: number;// 彈幕運(yùn)行速度，僅對(duì)滾動(dòng)彈幕有效（每秒多少像素）speed: number;// 顯示區(qū)域，只針對(duì)滾動(dòng)彈幕，有效值 0 ~ 1renderRegion: number;// 滾動(dòng)彈幕水平最小間距minSpace: number;// 是否重疊，只適用于滾動(dòng)彈幕avoidOverlap: boolean;// 透明度，有效值 0 ~ 1opacity: number;// 彈幕字體fontFamily: string;// 字體粗細(xì)fontWeight: string;
}

• barrageFilter：彈幕過(guò)濾器，可實(shí)現(xiàn)相關(guān)彈幕的屏蔽操作，例如不渲染滾動(dòng)彈幕。
• speed：用于配置滾動(dòng)彈幕的運(yùn)動(dòng)速度。
• renderRegion：用于配置滾動(dòng)彈幕能夠渲染多大比例的 canvas 區(qū)域，可借此實(shí)現(xiàn)半屏渲染或 1/4 屏的渲染滾動(dòng)彈幕。
• minSpace：設(shè)置前后滾動(dòng)彈幕的最小間距，避免挨得太近。
• avoidOverlap：當(dāng)設(shè)置為 true 的時(shí)候，會(huì)使用虛擬軌道算法對(duì)滾動(dòng)彈幕進(jìn)行布局計(jì)算，防止?jié)L動(dòng)彈幕相互重疊。
• opacity：設(shè)置全局的渲染透明度，有的用戶喜歡半透明的彈幕，可以借此進(jìn)行實(shí)現(xiàn)。
• fontFamily：設(shè)置彈幕渲染時(shí)使用的字體。
• fontWeight：設(shè)置彈幕渲染時(shí)使用的字體粗細(xì)。

總結(jié)

以上就是目前能夠提供的大體功能，可以借助這些 API 實(shí)現(xiàn)和 Bilibili 差不多的渲染效果。
項(xiàng)目還在持續(xù)迭代中，如果大家有好的想法，歡迎提供寶貴意見(jiàn)，謝謝。