The canvas-select from heylight

<script setup lang="ts">
import CanvasSelect from 'canvas-select'
let instance:any = ref(null);
let canvasWidth = ref(800);
let canvasHeight = ref(500);

onMounted(()=>{
  instance = new CanvasSelect(
    ".canvas_container",
    "https://gd-hbimg.huaban.com/cf8c6c0ccff0356a46b3ebe3e6fbb3992442398245a34-ivJ4iC"
  );
})
</script>

在vue项目中报错”Uncaught TypeError: Cannot read properties of undefined (reading 'save') at index.ts:822:22“

<template>
  <canvas class="container"></canvas>
</template>

<script setup>
import CanvasSelect from "canvas-select";

const instance = new CanvasSelect(
    ".container",
    "https://cdn.jsdelivr.net/npm/@heylight/cdn@%5E1/img/onepiece.png"
);
const option = [
  {
    label: "rect",
    labelFillStyle: "#f00",
    textFillStyle: "#fff",
    fillStyle: "rgba(130,22,220,.6)",
    coor: [
      [184, 183],
      [275, 238]
    ],
    type: 1
  },
  {
    label: "polygon",
    active: true,
    coor: [
      [135, 291],
      [129, 319],
      [146, 346],
      [174, 365],
      [214, 362],
      [196, 337],
      [161, 288]
    ],
    type: 2
  },
  {
    label: "dot",
    coor: [345, 406],
    type: 3
  },
  {
    label: "line",
    coor: [
      [470, 155],
      [503, 230],
      [506, 298]
    ],
    type: 4
  },
  {
    label: "circle",
    coor: [369, 197],
    radius: 38,
    type: 5
  }
];
instance.labelMaxLen = 10;
instance.setData(option);
// 选中
instance.on("load", (src) => {
  console.log("image loaded", src);
});
// 添加
instance.on("add", (info) => {
  console.log("add", info);
  window.info = info;
});
// 删除
instance.on("delete", (info) => {
  console.log("delete", info);
  window.info = info;
});
// 选中
instance.on("select", (shape) => {
  console.log("select", shape);
  window.shape = shape;
});
instance.on("updated", (result) => {
  // console.log('标注结果', result)
  const list = [...result];
  list.sort((a, b) => a.index - b.index);
  output.value = JSON.stringify(list, null, 2);
});

function change(num) {
  instance.createType = num;
}

function zoom(type) {
  instance.setScale(type);
}

function fitting() {
  instance.fitZoom();
}

function changeData() {
  const data = JSON.parse(output.value);
  instance.setData(data);
}

function onFocus() {
  instance.setFocusMode(!instance.focusMode);
}
</script>

<style scoped>

</style>

屏闪问题

使用环境：
vue3.2 + vite4.3

问题呈现：
canvas标签在template中固定时，通过ref获取到canvas后，绘制正常；
动态更新src后，mousedown时就会一直屏闪复现上一图层标注后的shape

safari 下图片稍大时标注会卡顿闪屏

每次 mousemove 均会清除图片以及标注，然后重新绘制图片和标注。是否考虑给 mousemove 事件加上节流，否则一次标注触发上百次重绘了

取消选中事件

作者您好，能不能加一个取消选中监听事件

label事件

建议作者添加标签label的鼠标选中事件

请教大佬如何设置固定尺寸

如题：
我看到实例上有 instance.scale 的属性能拿到具体尺寸，但是setScale()方法貌似不支持设置比例大小，只能通过设置ture不断增大尺寸。

谢谢作者，看到这个项目，我毫不犹豫地点了一个小星星，有个问题咨询下，我如何获取到当前选中的标记。

我的需求是，如果在按一下删除键，这时如果选中了某个标签，我就把这个标签删除掉，现在有选中事件，但如果我选中一个标签，然后又点了一下图片，这时所有图片都未选中，但这时并没有事件触发，如果这是按了一下删除键，但这时我又不知道这个标签是不是实际选中状态的，所以我不知道该不该删除这个标签，不知道我说明白了没。辛苦作者了，谢谢！

希望能支持下旋转

希望矩形那些能支持下旋转不同角度，谢谢

MAC触控板双指放大的时候会把页面也放大

通过哪个回调显示点标注移动之后的位置？

是否提供禁用右键拖拽画布的参数？如果没有，有无好的建议？感谢！

如何获取多边形的面积？

labelFont设置不生效

在VUE中一直提示"HTMLCanvasElement is required!"

<template>
  <main>
    <div class="part0"></div>
    <div class="part1">
      <canvas class="can0"></canvas>
    </div>
    <div class="part2">
      <div></div>
      <div></div>
    </div>
  </main>
</template>

<script setup>
import {watch} from "vue";
import CanvasSelect from "canvas-select";

const can1 = new CanvasSelect('can0', 'https://unpkg.com/[email protected]/one.jpg');
let props = defineProps({
  int0: {
    type: Number,
    default: 0
  }
});
watch(props, (val) => {
  console.log(val.int0);
});
</script>