请用代码示例 在vue中使用Fabric.js '5.3.0' 通过点击鼠标对两张静态图片用圆点进行标记

好的，以下是一个简单的示例代码，可以在Vue中使用Fabric.js '5.3.0'来对两张静态图片进行标记：

<template>
  <div>
    <canvas ref="canvas1"></canvas>
    <canvas ref="canvas2"></canvas>
  </div>
</template>

<script>
import fabric from 'fabric';

export default {
  mounted() {
    // 初始化fabric canvas
    const canvas1 = new fabric.Canvas(this.$refs.canvas1);
    const canvas2 = new fabric.Canvas(this.$refs.canvas2);

    // 加载两张静态图片
    fabric.Image.fromURL('/path/to/image1.png', (img) => {
      canvas1.add(img);
    });
    fabric.Image.fromURL('/path/to/image2.png', (img) => {
      canvas2.add(img);
    });

    // 监听canvas鼠标点击事件
    canvas1.on('mouse:down', (e) => {
      // 在鼠标点击位置添加一个圆点
      const circle = new fabric.Circle({
        radius: 5,
        fill: 'red',
        left: e.e.clientX - e.target.getBoundingClientRect().left,
        top: e.e.clientY - e.target.getBoundingClientRect().top
      });
      canvas1.add(circle);
    });
    canvas2.on('mouse:down', (e) => {
      // 在鼠标点击位置添加一个圆点
      const circle = new fabric.Circle({
        radius: 5,
        fill: 'blue',
        left: e.e.clientX - e.target.getBoundingClientRect().left,
        top: e.e.clientY - e.target.getBoundingClientRect().top
      });
      canvas2.add(circle);
    });
  }
}
</script>

这段代码会在页面中渲染出两个canvas元素，并加载两张静态图片。当用户在canvas中点击鼠标时，会在点击位置添加一个半径为5的圆点，红色的圆点会添加到第一个canvas中，蓝色的圆点会添加到第二个canvas中。