Canvas Comment

Install

use npm

npm i canvas-comment

Usage

import CanvasComment from 'canvas-comment';

const cc = new CanvasComment({
  container: '.container',
  image: 'https://cdn-health.zhongan.com/hic/library/resource/613b041f23e187001cab3a3f/diaCLksvKr.png',
});

// When canvas loaded will trigger load event
cc.on('load', () => {

  // You can set inital data. ex.
  cc.setData([
    {
      type: 'rect',
      label: '这里不合规',
      coor: [
        [128, 687],
        [617, 722],
      ],
    },
    {
      type: 'rect',
      label: '率表有误',
      coor: [
        [381, 503],
        [669, 531],
      ],
    },
  ]);
});

API

Options

| 属性 | 默认值 | 默认值 | 是否必填 | 说明 | | :------- | :----- | :----- | :----- |:------- | | container | - | - | 是 | canvas 容器 | | image | - | - | 是 | 要渲染的图片 |

Functions & Props

• setData(data: Shape[]) // 设置批注

• update() // 更新视图

• clean() // 清空批注

• on(event: string, fn: Function) // 事件监听

• createType: string // 设置当前批注类型

• readonly: boolean // 设置只读状态

• createLabelFillStyle: string // 设置当前批注文本的颜色

• createRectStrokeStyle: string // 设置当前批注形状线条的颜色

• activeShape: Shape // 获取/设置当前激活状态的批注

• dataset: Shape[] // 获取当前批注内容

Shape

| 属性 | 类型 | 默认值 | 说明 | | :------- | :----- | :----- |:------- | | type | string | - | 批注类型 | | label | string | - | 批注文字 | | coor | Array<[number, number]> | - | 点位坐标信息 |

Event

• load // 图片加载完成
• updated // 绘图过程
• add // 绘图完成
• delete // 删除批注

  cc.on('load', () => {
    // ...do something
  });