# 弹幕组件库

**Repository Path**: looha/barrage-component-library

## Basic Information

- **Project Name**: 弹幕组件库
- **Description**: 鸿蒙版本轻量级弹幕组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-11-29
- **Last Updated**: 2024-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 弹幕组件库

## 🏆简介

这是一个用于显示弹幕的组件库。它支持多种自定义选项，易于集成到现有项目中。

## 🧜‍♂️特性

- 支持多种弹幕样式
- 高度可定制化
- 轻量级，性能优越
- 易于集成

## 🌞安装

你可以通过 ohpm 安装此组件库：

```npm
ohpm install @esky/barrage
```

## 🌟预览截图

![preview.gif](preview.gif)
![preview.gif](https://s21.ax1x.com/2024/10/24/pAwPvCT.jpg)

## 🚁配置选项

在使用弹幕组件时，你可以通过 `BarrageOption` 接口来配置弹幕的整体设置。以下是可用的配置选项：

- `maxLine` (number): **必需**，指定弹幕显示的最大行数。
- `trackLine` (number): 可选，指定弹幕的轨道行数。如果未设置，默认值将根据 `maxLine` 自动计算。
- `textSize` (number): 可选，指定弹幕文字的大小。默认值为 20。
- `speed` (number): 可选，指定弹幕移动的速度。默认值为 1。
- `textAlpha` (number): 可选，指定弹幕文字的透明度，范围为 0 到 1。默认值为 1。
- `isShowFPS` (boolean): 可选，是否显示 FPS（帧率）。默认值为 `false`。

### 使用示例

以下是一个使用 `barrage-master` 库的完整示例，展示如何创建一个弹幕组件并进行交互：

```typescript
BarrageView({
  onTouchBarrage: (item: BarrageItem) => {
  
  },
  barrageController: this.barrageController,
  option: {
    maxLine: this.maxLine,
    textSize: this.textSize,
    textAlpha: this.alpha,
    speed: this.speed,
  },
  onCanvasReady: () => {
    this.addRandomBarrage(1000);
  }
})
  .width('100%')
  .height(400)
```

### 说明

- **barrageController**: 控制弹幕的核心控制器。
- **option**: 配置弹幕的显示选项，包括最大轨道数量、文字大小、透明度和速度。
- **onCanvasReady**: 画布准备好后的回调函数，用于初始化弹幕。
- **布局设置**: 使用 .width() 和 .height() 设置组件的尺寸。

## 🚅BarrageItem 类

`BarrageItem` 类用于定义每个弹幕的具体属性和行为。以下是可用的属性：

- `id` (string): 弹幕的唯一标识符。默认使用 `util.generateRandomUUID()` 生成。
- `x` (number): 弹幕的 x 坐标。
- `y` (number): 弹幕的 y 坐标。
- `padding` (number): 弹幕的内边距。默认值为 5。
- `margin` (number): 弹幕的外边距。默认值为 5。
- `isSelf` (boolean): 是否是自己发送的弹幕。若为 `true`，则自动添加外边框。
- `textWidth` (number): 弹幕文字的宽度。
- `textHeight` (number): 弹幕文字的高度。
- `textSize` (number): 弹幕文字的大小，单位为 vp。默认值为 20。
- `textColor` (Array<string>): 弹幕文字的颜色/渐变色[]。默认值为 [`#ffffffff`]。
- `text` (string): 弹幕的文字内容。
- `borderColor` (string): 边框颜色。默认值为 `#ffffffff`。
- `borderWidth` (number): 边框的粗细大小。默认值为 2。
- `borderRadius` (number): 边框的圆角大小。默认值为 10。
- `speed` (number): 弹幕的滚动速度。不同的弹幕文字可以有不同的速度。默认值为 1。
- `timeStamp` (string): 弹幕的时间戳，用于排序优先级。
- `priority` (number): 弹幕的优先级。默认值为 0。

### 示例

以下是一个使用 `BarrageItem` 的示例：

```typescript
import { BarrageItem } from 'barrage-master';

const barrageItem = new BarrageItem();
barrageItem.text = 'Hello, world!';
barrageItem.textColor = ['#ff0000ff'];
barrageItem.isSelf = true;
barrageItem.speed = 1;

// 其他属性设置
```

通过这些属性，你可以灵活地调整每个弹幕的显示效果，以满足不同的需求。

## 🤕约束与限制

在下述版本验证通过：

DevEco Studio: NEXT Developer Beta1(5.0.3.900), SDK: API12(5.0.0.71)

## 👨‍💻贡献代码

使用过程中发现任何问题都可以提 [Issue](https://gitee.com/wuhan-yihai-cloud-peak/barrage-component-library/issues) 给我们；

当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/wuhan-yihai-cloud-peak/barrage-component-library/pulls) 。

## 🪪许可证

此项目基于 MIT 许可证开源。详情请参阅 [LICENSE](https://gitee.com/wuhan-yihai-cloud-peak/barrage-component-library/blob/master/BarrageMaster/LICENSE) 文件。


## 📧联系方式

如果你有任何问题或建议，可以通过以下邮箱地址联系我们。  
[liulu@eseasky.cn](mailto:liulu@eseasky.cn)  
[hulianghao@eseasky.cn](mailto:hulianghao@eseasky.cn)  
[liaoyuhang@eseasky.cn](mailto:liaoyuhang@eseasky.cn)  
[gongjianqiu@eseasky.cn](mailto:gongjianqiu@eseasky.cn)  
[chenjiaming1@eseasky.cn](mailto:chenjiaming1@eseasky.cn)