dataset-viewer

组件提供画线条、多边形、像素混合功能和例子。 基本涵盖常见算法输出的数据。

在线demo

Installation

yarn add datasetviewer

Documentation

Usage

  import DatasetViewer from 'datasetviewer'

  const config:DatasetViewerConfig = {...}

  const viewer = new DatasetViewer(config)

  viewer.init()

调用例子代码调用例子代码调用例子代码调用例子代码调用例子代码调用例子代码

DatasetViewerConfig

| name | type | descriptions | | --- | --- | --- | | canvasInstance | HTMLCanvasElement | canvas标签，ref | | url | string | 展示图片地址 | | data | Array | canvas绘画的每一项数据 | | opreationsConfig | OpreationsConfig | 能否缩放拖动的控制 | | isDraw | boolean | 控制是否绘画数据 |

DataItem

| 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 | 是否需要画点 |

OpreationsConfig

| name | type | descriptions | | --- | --- | --- | | zoom | boolean | 是否缩放 |

数据转换例子

注意：如果项目比较注重性能，请注意源数据的精度，最好把浮点数去掉

简单来说，检测就是画框。单目3D也是画框，不过是多个不规则多边形的组合。 姿态检测类型的就是线段、或者折线的绘画。

分割比较特殊，需要看算法怎么输出mask数据类型。一般是用像素存储数据,看你们怎么规定约束条件。用canvas像素diff数据，混合就行。（最简单的混合就是srgb+颜色/2完事）。这一块和这个绘图组件无关，更多的是canvas操作数据问题。

分类可以忽略，直接绝对定位一个标签就行。

car_pose_detection (单目3d同理)

detection （简单的画框）

pose_detection

通用分割