react-canvas-mark

canvas-mark 是react中的一个图片标记的组件

install

npm install canvas-mark --save

usage

<Mark
    imgSrc={imageSrc}
    graphMsg={graphs}
    tags={tags}
    drawTag={selectVal}
    getLib={setLib}
      />

• imgSrc: 图片的链接地址，string类型
• graphMsg: 后端返回的已经存在的坐标地址

[
  {
    type: 'Rect',
    tag: '黑猫',
    positions: [[620,244],[799,244],[799,441],[620,441]]
  }
]

position: 还支持另一个格式[{x: 620, 244}]的形式

• tags: 后端返回的所有的label标签，string[]类型
• drawTag：画图形前需要选择的label标签，string类型
• getLib：获取图形注册的实例，实例内部有许多方法可以调用，如：获取所有的图形，和坐标，function类型，一般采用useState返回的第二个参数

图形的缩放，绘制，移动采用的是mouse事件，对于图形的选择默认设置 mouseDown -> mouseUp 的时间大于50ms才能被选中，后续会修复这个问题

Future

1. 去除多边形内部的阴影
2. 选择图形问题