vue实现勾选画图

Vue 实现勾选画图功能

使用 Vue 和 Canvas 实现基础勾选画图

在 Vue 中实现勾选画图功能，可以通过结合 Canvas 和鼠标事件监听来实现。以下是一个基础的实现方法：

1. 创建 Vue 组件并引入 Canvas
   在 Vue 组件的模板中，添加一个 Canvas 元素，并为其绑定鼠标事件。

   <template>
     <div>
       <canvas
         ref="canvas"
         @mousedown="startDrawing"
         @mousemove="draw"
         @mouseup="stopDrawing"
       ></canvas>
     </div>
   </template>

2. 初始化 Canvas 并定义绘图状态
   在 Vue 的 data 或 setup 中定义绘图所需的状态变量，如是否正在绘图、起始点坐标等。

   data() {
     return {
       isDrawing: false,
       lastX: 0,
       lastY: 0,
     };
   },
   mounted() {
     const canvas = this.$refs.canvas;
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     this.ctx = canvas.getContext('2d');
   },

3. 实现鼠标事件处理函数
   监听鼠标按下、移动和释放事件，实现绘图逻辑。

   methods: {
     startDrawing(e) {
       this.isDrawing = true;
       [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
     },
     draw(e) {
       if (!this.isDrawing) return;
       this.ctx.beginPath();
       this.ctx.moveTo(this.lastX, this.lastY);
       this.ctx.lineTo(e.offsetX, e.offsetY);
       this.ctx.stroke();
       [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
     },
     stopDrawing() {
       this.isDrawing = false;
     },
   },

添加勾选功能

如果需要实现勾选（如复选框或勾选标记），可以在 Canvas 上绘制特定的图形（如对勾）。

1. 绘制勾选标记
   在 Canvas 上绘制一个对勾符号，可以通过路径绘制实现。

   drawCheckmark(x, y) {
     this.ctx.beginPath();
     this.ctx.moveTo(x, y + 10);
     this.ctx.lineTo(x + 5, y + 15);
     this.ctx.lineTo(x + 15, y + 5);
     this.ctx.stroke();
   },

2. 绑定勾选事件
   通过点击事件触发勾选功能，例如点击某个区域后绘制对勾。

   handleClick(e) {
     const x = e.offsetX;
     const y = e.offsetY;
     this.drawCheckmark(x, y);
   },

使用第三方库（如 Fabric.js）

如果需要更复杂的绘图功能（如交互式图形、缩放等），可以使用第三方库如 Fabric.js。

1. 安装 Fabric.js
   通过 npm 安装 Fabric.js：

   npm install fabric

2. 在 Vue 中集成 Fabric.js
   在 Vue 组件中初始化 Fabric Canvas 并添加图形。

   import { fabric } from 'fabric';
   export default {
     mounted() {
       this.canvas = new fabric.Canvas(this.$refs.canvas);
       this.canvas.on('mouse:down', this.handleMouseDown);
     },
     methods: {
       handleMouseDown(options) {
         const pointer = this.canvas.getPointer(options.e);
         const checkmark = new fabric.Path('M 0 10 L 5 15 L 15 5', {
           left: pointer.x,
           top: pointer.y,
           stroke: 'black',
         });
         this.canvas.add(checkmark);
       },
     },
   };

清除绘图或勾选

如果需要清除绘图内容，可以通过清除 Canvas 或移除特定对象实现。

clearCanvas() {
  this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
},

对于 Fabric.js：

clearCanvas() {
  this.canvas.clear();
},

通过以上方法，可以在 Vue 中实现基础的勾选画图功能，并根据需求扩展交互逻辑。