// 构造函数CanvasSelect 参数1表示canvas dom节点，可选参数2表示需要标注的图片链接
const instance = new CanvasSelect('.container', '/one.jpg');
// or
// const instance = new CanvasSelect('.container');
// instance.setImage('/one.jpg')

let option = [
  {
    label: '矩形标注', // label (非必填)
    type: 1, // 矩形 （必填）
    coor: [
      // 矩形坐标，由2个点表示 (必填)
      [10, 10],
      [100, 100],
    ],
  },
  {
    label: '多边形标注',
    type: 2, // 多边形 （必填）
    coor: [
      // 多边形坐标，由3个以上点表示 (必填)
      [30, 150],
      [120, 100],
      [50, 200],
    ],
  },
  {
    label: '点标注',
    type: 3, // 点标注 （必填）
    coor: [800, 800],
  },
  {
    label: '折线标注',
    type: 3, // 折线标注 （必填）
    coor: [
      // 由2个以上点表示 (必填)
      [30, 150],
      [120, 100],
      [50, 200],
    ],
  },
];
// 加载数据
instance.setData(option);
// 0 不创建(默认)，1创建矩形，2创建多边形，3点标注
instance.createType = 1;
instance.on('select', (info) => {
  console.log('select', info);
  // 可对选中对参数info进行修改
  // 修改标签：info.label="hello"
  // 单个形状修改填充颜色：info.fillStyle="#0f0"
  // 然后调用instance.update()更新视图
});