【OpenHarmony】 鸿蒙 UI开发之DanmakuFlameMaster

别说我什么都不会2025-01-01 11:27

简介

DanmakuFlameMaster是一款弹幕框架，支持发送纯文本弹幕、设置弹幕在屏幕的显示区域、控制弹幕播放状态等功能

下载安装

bash 复制代码 
ohpm install @ohos/danmakuflamemaster

使用说明

初始化：并设置弹幕显示相关属性

kotlin 复制代码 
 this.model.setWidth(lpx2px(720))
    this.model.setHeight(lpx2px(720))
    let maxLinesPair: Map<number, number> = new Map();
    maxLinesPair.set(BaseDanmaku.TYPE_SCROLL_RL, 5);
    let overlappingEnablePair: Map<number, boolean> = new Map();
    overlappingEnablePair.set(BaseDanmaku.TYPE_SCROLL_RL, true);
    overlappingEnablePair.set(BaseDanmaku.TYPE_FIX_TOP, true);
    this.mContext = DanmakuContext.create();
    this.mContext.setDanmakuStyle(DANMAKU_STYLE_STROKEN, 3)
      .setDuplicateMergingEnabled(false)
      .setScrollSpeedFactor(1.2)
      .setScaleTextSize(1.2)
      .setCacheStuffer(new SpannedCacheStuffer(), this.mCacheStufferAdapter) // 图文混排使用SpannedCacheStuffer
      .setMaximumLines(maxLinesPair)
      .preventOverlapping(overlappingEnablePair)
      .setDanmakuMargin(40);
    let that = this
    if (this.model != null) {
      this.mParser = this.createParser();
      this.model.setCallback(new Call(that));
      this.model.setOnDanmakuClickListener(new OnDanMu(that))
      this.model.prepare(this.mParser, this.mContext);
      this.model.showFPS(true);
    }
  class Call implements Callback {
  private that: ESObject;

  constructor(that: ESObject) {
    this.that = that
  }

  public updateTimer(timer: DanmakuTimer): void {
  }

  public drawingFinished(): void {

  }

  public danmakuShown(danmaku: BaseDanmaku): void {
  }

  public prepared(): void {
    this.that.model.start();
  }
}
class OnDanMu implements OnDanmakuClickListener {
  private that:ESObject;
  constructor(that :ESObject) {
    this.that = that
  }
  onDanmakuClick(danmakus: IDanmakus): boolean{
    console.log('DFM onDanmakuClick: danmakus size:' + danmakus.size())
    let latest: BaseDanmaku = danmakus.last()
    if (null != latest) {
      console.log('DFM onDanmakuClick: text of latest danmaku:' + latest.text)
      return true
    }
    return false
  };

  onDanmakuLongClick(danmakus: IDanmakus): boolean{
    return false
  };

  onViewClick(view: IDanmakuView): boolean{
    this.that.isVisible = true
    return false
  };
}

添加弹幕

ini 复制代码 
let danmaku: BaseDanmaku = this.mContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);
    danmaku.text = "这是一条弹幕" + SystemClock.uptimeMillis();
    danmaku.padding = 5;
    danmaku.priority = 0; // 可能会被各种过滤器过滤并隐藏显示
    danmaku.isLive = isLive.valueOf();
    danmaku.setTime(this.model.getCurrentTime() + 1200);
    danmaku.textSize = 25 * (this.mParser.getDisplayer().getDensity() * 0.8);
    danmaku.textColor = 0xffff0000;
    danmaku.textShadowColor = 0xffffffff;
    danmaku.borderColor = 0xff00ff00;
    this.model.addDanmaku(danmaku);

DD一下： 鸿蒙开发各类文档，可关注公众号<程序猿百晓生>获取。

erlang 复制代码 
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

添加gif弹幕

ini 复制代码 
let file = fs.openSync(this.gifPath, fs.OpenMode.READ_ONLY)
const imageSource = image.createImageSource(file.fd);
imageSource.createPixelMapList().then((pixelMapListParam: Array<image.PixelMap>)=> {
  let danmaku: BaseDanmaku = this.mContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);
  //设置gif弹幕的帧数据，用于canvas的绘制
  danmaku.setPixelMapList(pixelMapListParam)
  //判断是否是gif格式，当传入gif格式图片时需要设置为true，默认是false
  danmaku.setIsAnimation(true)
  danmaku.text = "<img src=\"" + this.gifPath + "\" width=\"" + 99 + "\" height=\"" + 99 + "\"/>";
  danmaku.padding = 0;
  danmaku.priority = 1;
  danmaku.isLive = islive;
  danmaku.setTime(this.model.getCurrentTime() + 1200);
  danmaku.textShadowColor = 0;
  this.model.addDanmaku(danmaku);
})

使用注意

typescript 复制代码 
// V1装饰器下的使用方式
import { DanmakuView } from '@ohos/danmakuflamemaster'

@State model: DanmakuView.Model = new DanmakuView.Model()

DanmakuView({ model: $model }).backgroundColor(Color.Gray)

// V2装饰器下的使用方式
import { DanmakuViewV2 } from '@ohos/danmakuflamemaster'

@Local model: DanmakuViewV2.Model = new DanmakuViewV2.Model()

DanmakuViewV2({ model: this.model!! }).backgroundColor(Color.Gray)

接口说明

V1装饰器下使用:model: DanmakuView.Model = new DanmakuView.Model()

V2装饰器下使用:model: DanmakuViewV2.Model = new DanmakuViewV2.Model()

接口 描述
model.addDanmaku(danmaku) 添加弹幕
model.getCurrentTime() 获取当前弹幕时间
model.hide() 弹幕隐藏
model.show() 弹幕显示
model.pause() 弹幕暂停播放
model.resume() 弹幕继续播放
model.setWidth(lpx2px(1280)) 设置弹幕显示区域宽度
model.setHeight(lpx2px(720)) 设置弹幕显示区域高度
model.prepare(this.mParser, this.mContext) 启动弹幕播放
model.showFPS(true) 显示弹幕播放的fps
model.setOnDanmakuClickListener() 设置弹幕点击回调
setIsAnimation(boolean) 判断弹幕是否是gif格式
setPixelMapList(pixelMapListParam) 设置gif弹幕的帧数据，用于canvas的绘制

DanmakuContext()

接口 描述
public static create(): DanmakuContext DanmakuContext构造器
public getBaseComparator(): BaseComparator 获取弹幕排序器
public setBaseComparator(baseComparator: BaseComparator) 设置弹幕排序器
public getDisplayer(): AbsDisplayer<ESObject, ESObject> 获取弹幕显示器
public setTypeface(font: string): DanmakuContext 设置字体样式
public setDanmakuTransparency(p: number): DanmakuContext 设置弹幕透明度
public setScaleTextSize(p: number): DanmakuContext 设置缩放字体大小
public setDanmakuMargin(m: number): DanmakuContext 设置弹幕显示外边距
public setMarginTop(m: number): DanmakuContext 设置弹幕显示上边距
public getFTDanmakuVisibility(): boolean 获取是否显示顶部弹幕
public setFBDanmakuVisibility(visible: boolean): DanmakuContext 设置是否显示底部弹幕
public getL2RDanmakuVisibility(): boolean 获取是否显示左右滚动弹幕
public setL2RDanmakuVisibility(visible: boolean): DanmakuContext 设置是否显示左右滚动弹幕
public getR2LDanmakuVisibility(): boolean 获取是否显示右左滚动弹幕
public setR2LDanmakuVisibility(visible: boolean): DanmakuContext 设置是否显示右左滚动弹幕
public getSpecialDanmakuVisibility(): boolean 获取是否显示特殊弹幕
public setSpecialDanmakuVisibility(visible: boolean): DanmakuContext 设置是否显示特殊弹幕
public setMaximumVisibleSizeInScreen(maxSize: number): DanmakuContext 设置同屏弹幕密度，-1自动 0无限制
public setDanmakuStyle(style: number, ...values: number[]): DanmakuContext 设置描边样式
public setDanmakuBold(bold: boolean): DanmakuContext 设置弹幕是否粗体显示
public setColorValueWhiteList(colors: number[]): DanmakuContext 设置色彩过滤弹幕白名单
public getColorValueWhiteList(): number[] 获取色彩过滤弹幕白名单
public setUserHashBlackList(hashes: string[]): DanmakuContext 设置屏蔽特定用户的弹幕
public removeUserHashBlackList(hashes: string[]): DanmakuContext 移除黑名单的用户
public addUserHashBlackList(hashes: string[]): DanmakuContext 增加黑名单的用户
public getUserHashBlackList(): string[] 获取黑名单用户
public blockGuestDanmaku(block: boolean): DanmakuContext 是否屏蔽游客弹幕
public setScrollSpeedFactor(p: number): DanmakuContext 设置滚动弹幕速率
public setDuplicateMergingEnabled(enable: boolean): DanmakuContext 设置是否启用合并重复弹幕
public isDuplicateMergingEnabled(): boolean 获取是否启用合并重复弹幕
public alignBottom(enable: boolean): DanmakuContext 设置底部是否可以有弹幕
public isAlignBottom(): boolean 获取底部是否可以有弹幕的状态
public setMaximumLines(pairs: Map<number, number>): DanmakuContext 设置最大弹幕显示行数
public setOverlapping(pairs: Map<number, boolean>): DanmakuContext 设置防止弹幕重叠
public isMaxLinesLimited(): boolean 获取是否有最大行数限制
public isPreventOverlappingEnabled(): boolean 获取是否开启防止弹幕重叠功能
public setDanmakuSync(danmakuSync: AbsDanmakuSync): DanmakuContext 设置弹幕同步器
public setCacheStuffer(cacheStuffer: BaseCacheStuffer, cacheStufferAdapter: Proxy): DanmakuContext 设置弹幕缓存填充器
public registerConfigChangedCallback(listener: ConfigChangedCallback): void 设置配置信息改变回调接口
public unregisterConfigChangedCallback(listener: ConfigChangedCallback): void 取消配置信息改变回调接口
public registerFilter(filter: BaseDanmakuFilter<ESObject>): DanmakuContext 设置弹幕过滤器
public unregisterFilter(filter: BaseDanmakuFilter<ESObject>): DanmakuContext 取消弹幕过滤器
public resetContext(): DanmakuContext 重置DanmakuContext

Proxy()

接口 描述
public abstract prepareDrawing(danmaku: BaseDanmaku, fromWorkerThread: boolean) 预绘制缓存弹幕
public abstract releaseResource(danmaku: BaseDanmaku) 释放弹幕资源

DanmakuTimer()

接口 描述
public update(curr: number): number 更新定时器时间
public add(mills: number): number 增加计时的时间
public getLastInterval(): number 获取距离计时结束剩余的时间

Duration()

接口 描述
public setValue(initialDuration: number) 设置弹幕初始持续时间
public setFactor(f: number) 设置弹幕初始持续时间系数

DD一下： 鸿蒙开发各类文档，可关注公众号<程序猿百晓生>获取。

erlang 复制代码 
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

SpecialDanmaku()

接口 描述
public getLeft(): number 获取顶部固定弹幕的左边距
public getTop(): number 获取顶部固定弹幕的上边距
public getRight(): number 获取顶部固定弹幕的右边距
public getBottom(): number 获取顶部固定弹幕的下边距
public getType(): number 获取弹幕的类型
public setTranslationData(beginX: number, beginY: number, endX: number, endY: number, translationDuration: number, translationStartDelay: number) 设置特效弹幕平移数据
public setAlphaData(beginAlpha: number, endAlpha: number, alphaDuration: number) 设置特效弹幕透明度变化数据

DanmakuUtils()

接口 描述
public static compare(obj1: BaseDanmaku, obj2: BaseDanmaku): number 比较两个弹幕是否相同
public static isDuplicate(obj1: BaseDanmaku, obj2: BaseDanmaku): boolean 弹幕是否重复
public static create(): DanmakuFactory 创建弹幕工厂

约束与限制

在下述版本验证通过：

  • DevEco Studio: NEXT Release-5.0.3.901, SDK: API12 Release(5.0.0.71)

  • DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)

  • DevEco Studio 版本： 4.1 Canary(4.1.3.317),OpenHarmony SDK:API11 (4.1.0.36)

目录结构

lua 复制代码 
|---- DanmakuFlameMaster  
|     |---- entry  # 示例代码文件夹
|     |---- library  # DanmakuFlameMaster库文件夹
|           |---- src\main\ets\components\common\master\flame\danmaku  # 源代码文件夹
|           		|---- control   # 弹幕状态控制实现
|           		|---- danmaku 	# 弹幕基础类库
|           		|---- ui 		# 弹幕自定义显示控件
|           |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法                    
|     |---- README_zh.md  # 安装使用方法
相关推荐
Rossy Yan4 分钟前
【HarmonyOS应用开发——ArkTS语言】欢迎界面（启动加载页）的实现【合集】
前端·typescript·harmonyos·arkts·web app·鸿蒙应用开发·合集
轻口味12 小时前
【每日学点鸿蒙知识】RelativeContainer组件、List回弹、Flutter方法调用、Profiler工具等
flutter·list·harmonyos
HarmonyOS开发者13 小时前
《HarmonyOS第一课》焕新升级，赋能开发者快速掌握鸿蒙应用开发
华为·harmonyos
塞尔维亚大汉15 小时前
【OpenHarmony】 鸿蒙网络请求库之httpclient
网络协议·harmonyos
我是全栈架构师17 小时前
HarmonyOS Next ArkUI @State @Prop @Link @Provide @Consume笔记
harmonyos·arkts
guo_zhen_qian18 小时前
鸿蒙工程签名编译和上架
华为·harmonyos
个案命题20 小时前
纯血鸿蒙ArkUI选项卡布局详解
华为·harmonyos
HarderCoder20 小时前
仓颉中的类型型变
harmonyos
马剑威（威哥爱编程）21 小时前
鸿蒙NEXT开发中使用星闪服务
华为·harmonyos·星闪
李游Leo1 天前
自学记录鸿蒙API 13：PreviewKit从文件预览到应用开发
人工智能·pytorch·深度学习·华为·harmonyos
热门推荐
01半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)02新手学习VR全景需要知道的几个问题03HCIA-datacom数通题库和录播视频资料04Coze扣子平台完整体验和实践（附国内和国际版对比）05【漏洞复现】CVE-2015-3337 Arbitrary File Reading06玄机平台应急响应—webshell查杀07【bug记录】清除僵尸进程，释放GPU显存08docker安装启动问题解决排查09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10Installing CMake (安装 CMake)