Vue入门必备：轻松掌握标注图绘制技巧

1. 环境搭建

首先，确保你的项目中已经安装了Vue和fabric.js。可以通过以下命令进行安装：

npm install vue --save
npm install fabric --save

2. 组件创建

创建一个新的Vue组件，命名为AnnotationTool.vue。

<template>
  <div>
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

<script>
import fabric from 'fabric';

export default {
  name: 'AnnotationTool',
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = new fabric.Canvas(this.$refs.canvas);
      // 这里可以添加更多初始化代码
    }
  }
}
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}
</style>

3. 绘制标注

在AnnotationTool.vue组件中，我们需要添加绘制标注的功能。这里以绘制矩形为例。

methods: {
  initCanvas() {
    const canvas = new fabric.Canvas(this.$refs.canvas);

    // 绑定鼠标事件
    canvas.on('mouse:down', (e) => {
      this.startX = e.e.offsetX;
      this.startY = e.e.offsetY;
      this.rect = new fabric.Rect({
        originX: 'left',
        originY: 'top',
        left: this.startX,
        top: this.startY,
        fill: 'red',
        width: 0,
        height: 0
      });
      canvas.add(this.rect);
      canvas.renderAll();
    });

    canvas.on('mouse:move', (e) => {
      if (this.rect) {
        this.rect.set({
          width: e.e.offsetX - this.startX,
          height: e.e.offsetY - this.startY
        });
        canvas.renderAll();
      }
    });

    canvas.on('mouse:up', () => {
      // 可以在这里添加代码保存标注数据
    });
  }
}
</script>

4. 踩坑与注意事项

在绘制标注时，注意处理鼠标从右向左画框的bug。可以通过比较startX和endX，startY和endY的大小，来确保标注框始终按照正确的方向绘制。

当用户绘制多个标注时，需要确保每个标注都能正常显示。可以通过为每个标注设置唯一的ID或名称来实现。

在保存标注数据时，可以考虑将数据转换为JSON格式，以便于在服务器端进行处理。

5. 总结

通过本文的讲解，相信你已经掌握了使用Vue和fabric.js绘制标注图的基本技巧。在实际开发过程中，可以根据需求进行扩展，例如添加绘制圆形、椭圆、文本等标注类型，以及实现标注的编辑、删除等功能。祝你开发顺利！