vue3+ts项目采用canvas模拟批注功能

在Vue 3和TypeScript项目中，可以使用以下方法来模拟批注功能：

1. 创建一个Vue组件，其中包含canvas元素。
2. 使用TypeScript定义组件的数据和方法。
3. 实现绘制和处理canvas上的鼠标事件来模拟批注功能。

以下是一个简单的示例代码：

<template>
  <canvas ref="canvas" @mousedown="startAnnotation" @mousemove="draw" @mouseup="endAnnotation"></canvas>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, Ref } from 'vue';
 
export default defineComponent({
  setup() {
    const canvas: Ref<HTMLCanvasElement | null> = ref(null);
    const isDrawing = ref(false);
    const lastX = ref(0);
    const lastY = ref(0);
 
    onMounted(() => {
      const ctx = canvas.value!.getContext('2d');
      if (ctx) {
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
      }
    });
 
    const startAnnotation = (event: MouseEvent) => {
      if (canvas.value) {
        const ctx = canvas.value.getContext('2d');
        if (ctx) {
          ctx.beginPath();
          isDrawing.value = true;
          [lastX.value, lastY.value] = [event.offsetX, event.offsetY];
          ctx.moveTo(lastX.value, lastY.value);
        }
      }
    };
 
    const draw = (event: MouseEvent) => {
      if (isDrawing.value && canvas.value) {
        const ctx = canvas.value.getContext('2d');
        if (ctx) {
          const [newX, newY] = [event.offsetX, event.offsetY];
          ctx.lineTo(newX, newY);
          ctx.stroke();
        }
      }
    };
 
    const endAnnotation = () => {
      if (isDrawing.value) {
        isDrawing.value = false;
      }
    };
 
    return {
      canvas,
      startAnnotation,
      draw,
      endAnnotation
    };
  }
});
</script>

在这个例子中，我们定义了一个简单的canvas元素，并在组件挂载时获取了canvas的上下文。我们实现了startAnnotation、draw和endAnnotation方法来处理鼠标事件，这样用户就可以在canvas上绘制批注。这个例子提供了一个基本框架，您可以根据需要添加更多功能，例如批注样式选择、批注修改和删除等。