canvas-comment

canvas-comment

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
  });