深浅模式
FlowLine 流光线条
常用于可视化大屏添加流光线条，增添动态效果
提示
精灵图推荐使用TexturePacker进行制作,不过它是要收费的
如果你想使用免费的工具制作精灵图，有大佬制作了工具Flint，选择图集打包，图集格式采用PixiJS进行制作
另外需要注意：无论是TexturePacker还是Flint，都不要采用旋转，目前暂时不支持旋转属性;同时精灵图名称使用0、1、2、3...进行命名
安装
sh
npm install @poggi/flowline
pnpm add @poggi/flowline
yarn add @poggi/flowline基础用法
设定路径即可按照路径绘制流光线条
loading
多线条
可以同时绘制多条流光
loading
贝塞尔曲线
流光也支持贝塞尔曲线
二次贝塞尔曲线
loading
三次贝塞尔曲线
loading
案例
loading
loading
API
FlowLineRender 类
Methods
resize(width?: number, height?: number)
画布尺寸变化时同步
render
执行渲染
setSource(option: IKeyframesSource)
设置资源
destroy
销毁
Interfaces
IFlowLineRenderConstructorOptions
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| container | 容器 | HTMLCanvasElement | 是 | - |
| lines | 流光参数 | IFlowLineConstructorOptions[] | 是 | - |
| dpr | 设备像素比 | number | 否 | devicePixelRatio |
| useWorker | 是否使用worker | boolean | 否 | true |
IFlowLineConstructorOptions
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| path | 路径 | IPathNode[] | 是 | - |
| sampleInterval | 采样精细度,越小越平滑 | number | 否 | 2 |
| color | 流光颜色 | string | 否 | #00f3ff |
| lineWidth | 流光线条宽度 | number | 否 | 1 |
| headFade | 流光线条本身的头部渐变长度 | number | 否 | 20 |
| tailFade | 流光线条本身的尾部渐变长度 | number | 否 | 20 |
| pathStartFade | 路径起点的渐变淡入长度 | number | 否 | 50 |
| pathEndFade | 路径终点的渐变淡出长度 | number | 否 | 50 |
| speed | 移动速度（每帧移动的索引数） | number | 否 | 2 |
| delay | 初始延迟播放的时间（毫秒 ms） | number | 否 | 0 |
| interval | 每次循环播放完毕后的等待间隔时间（毫秒 ms） | number | 否 | 0 |
| showTrack | 是否显示路径底色轨道线 | boolean | 否 | false |
| trackWidth | 底色轨道线宽度 | number | 否 | 1 |
| trackColor | 底色轨道线颜色 | number | 否 | rgba(255, 255, 255, 0.1) |
| isClosed | 是否闭环，即首尾相连 | boolean | 否 | false |
IPathNode extends IKeyframesSource
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| type | 流光类型 | 'line' | 'curve' | 是 | - |
| controlPoints | 贝塞尔曲线控制点，当type为'curve'时生效 | IPoint[] | 否 | - |
IPoint
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| x | 水平坐标（像素点） | number | 是 | - |
| y | 垂直坐标（像素点） | number[] | 是 | - |