Fly Barrage
文章平均质量分 87
纷飞丿
我的前端开源库:
fly-barrage:功能完善,强大的 web 端弹幕库。包含完整 DEMO,可快速上手;
fly-gesture-unlock:功能完善,强大的 web 端手势解锁库。包含完整 DEMO,可快速上手;
展开
-
fly-barrage 前端弹幕库(6):实现人像免遮挡
前端弹幕库实现人像免遮挡;原创 2024-06-03 15:06:14 · 312 阅读 · 0 评论 -
fly-barrage 前端弹幕库(5):高级弹幕的设计与实现
高级弹幕的计算是最简单的,因为每个高级弹幕和其他弹幕是无交互的,不需要处理相互重叠的问题,只需要根据当前视频的播放时间计算出高级弹幕处于的位置即可。原创 2024-03-16 10:20:09 · 506 阅读 · 0 评论 -
fly-barrage 前端弹幕库(4):顶部、底部弹幕的设计与实现
今天和大家说说顶部、底部弹幕的设计与实现,这块的逻辑相对简单些,为了方便,这里把顶部、底部弹幕统一叫固定弹幕。原创 2024-03-08 11:35:27 · 853 阅读 · 0 评论 -
fly-barrage 前端弹幕库(3):滚动弹幕的设计与实现
今天和大家说说滚动弹幕的设计与实现,为了便于理解,我会由简到难的一步步解析说明,主要包括以下几块内容: - 实现一条滚动弹幕的计算与渲染; - 实现多条滚动弹幕的计算与渲染; - 实现多条滚动弹幕相同字号并且不允许弹幕重叠的计算与渲染; - 实现多条滚动弹幕不同字号并且不允许弹幕重叠的计算与渲染;原创 2024-03-01 22:51:58 · 1099 阅读 · 0 评论 -
fly-barrage 前端弹幕库(2):弹幕内容支持混入渲染图片的设计与实现
如果弹幕内容只支持文字的话,只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。但如果想同时支持渲染图片和文字的话,需要以下几个步骤: 1. 设计一个面向用户的数据结构,用于描述弹幕应该渲染哪些文字和图片; 2. 框架内部对上述数据结构进行解析,解析出文字部分和图片部分; 3. 计算出各个部分相对于弹幕整体左上角的 top 偏移量和 left 偏移量; 4. 弹幕渲染时,需要计算出各个片段的左上角定位;原创 2024-02-25 13:31:39 · 1311 阅读 · 4 评论 -
fly-barrage 前端弹幕库(1):项目介绍
fly-barrage 是我写的一个前端弹幕库,由于经常在 Bilibili 上看视频,所以对网页的弹幕功能一直蛮感兴趣的,所以做了这个库,可以帮助前端快速的实现弹幕功能。原创 2024-02-23 20:10:11 · 1508 阅读 · 3 评论