组件提供画线条、多边形、像素混合功能和例子。 基本涵盖常见算法输出的数据。
yarn add ai-datasetviewer
import DatasetViewer from 'datasetviewer'
const config:DatasetViewerConfig = {...}
const viewer = new DatasetViewer(config)
viewer.init(callback)
| name | type | descriptions |
|---|---|---|
| canvasInstance | HTMLCanvasElement | canvas标签，ref |
| url | string | 展示图片地址 |
| data | Array | canvas绘画的每一项数据 |
| opreationsConfig | OpreationsConfig | 能否缩放拖动的控制 |
| isDraw | boolean | 控制是否绘画数据 |
| name | type | descriptions |
|---|---|---|
| type | CustomRect | polyline | CustomPolygon | 更多请查看fabric | 必填项，这是画布应该用什么工具处理数据的前提 |
| label | string | 标签名 |
| points | Array<{x:number, y:number}> | 多边形或者折线的坐标点 |
| stroke | string | 颜色 |
| fill | string | 颜色 |
| rectData | [x,y,w,h] | 起点坐标，宽高 |
| drawPoint | boolean | 是否需要画点 |
| name | type | descriptions |
|---|---|---|
| zoom | boolean | 是否缩放 |
注意：如果项目比较注重性能，请注意源数据的精度，最好把浮点数去掉 简单来说，检测就是画框。单目3D也是画框，不过是多个不规则多边形的组合。 姿态检测类型的就是线段、或者折线的绘画。 分割比较特殊，需要看算法怎么输出mask数据类型。一般是用像素存储数据,看你们怎么规定约束条件。用canvas像素diff数据，混合就行。（最简单的混合就是srgb+颜色/2完事）。这一块和这个绘图组件无关，更多的是canvas操作数据问题。 分类可以忽略，直接绝对定位一个标签就行。
car_pose_detection (单目3d同理) detection （简单的画框） pose_detection 通用分割