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

在Vue组件的mounted()方法中，使用Fabric.js对两张图片进行标记，并监听鼠标点击事件：

mounted() {
  // 加载图片1
  fabric.Image.fromURL(this.image1, (img) => {
    // 创建canvas对象
    const canvas1 = new fabric.Canvas('canvas1');
    // 设置canvas大小
    canvas1.setWidth(img.width);
    canvas1.setHeight(img.height);
    // 添加图片到canvas
    canvas1.add(img);

    // 监听鼠标点击事件
    canvas1.on('mouse:down', (event) => {
      // 获取鼠标点击位置
      const x = event.e.offsetX;
      const y = event.e.offsetY;
      // 绘制圆点
      const circle = new fabric.Circle({
        radius: 5,
        fill: 'red',
        left: x,
        top: y
      });
      // 添加圆点到canvas
      canvas1.add(circle);
    });
  });

  // 加载图片2
  fabric.Image.fromURL(this.image2, (img) => {
    // 创建canvas对象
    const canvas2 = new fabric.Canvas('canvas2');
    // 设置canvas大小
    canvas2.setWidth(img.width);
    canvas2.setHeight(img.height);
    // 添加图片到canvas
    canvas2.add(img);

    // 监听鼠标点击事件
    canvas2.on('mouse:down', (event) => {
      // 获取鼠标点击位置
      const x = event.e.offsetX;
      const y = event.e.offsetY;
      // 绘制圆点
      const circle = new fabric.Circle({
        radius: 5,
        fill: 'blue',
        left: x,
        top: y
      });
      // 添加圆点到canvas
      canvas2.add(circle);
    });
  });
}

最后在Vue组件的模板中添加canvas元素：

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

这样就可以实现在Vue中使用Fabric.js通过点击鼠标对两张静态图片用圆点进行标记了。