当前位置：首页 > VUE

vue实现绘图工具

2026-03-10 09:50:15VUE

Vue 实现绘图工具的核心方法

使用 Vue 实现绘图工具需要结合 Canvas 或 SVG 技术，以下是关键实现步骤：

初始化画布

在 Vue 组件中通过 ref 获取 Canvas 元素，并设置绘图上下文。

vue实现绘图工具

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

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    this.ctx = canvas.getContext('2d');
    // 设置画布尺寸（可选：响应式调整）
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
}
</script>

绘制逻辑实现

通过鼠标事件监听实现基础绘图功能（如画笔、直线、矩形等）。

data() {
  return {
    isDrawing: false,
    lastX: 0,
    lastY: 0,
    currentTool: 'pen' // 工具类型：pen/line/rectangle
  };
},
methods: {
  startDrawing(e) {
    this.isDrawing = true;
    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
  },
  draw(e) {
    if (!this.isDrawing) return;
    const { offsetX, offsetY } = e;
    switch (this.currentTool) {
      case 'pen':
        this.ctx.beginPath();
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(offsetX, offsetY);
        this.ctx.stroke();
        [this.lastX, this.lastY] = [offsetX, offsetY];
        break;
      case 'rectangle':
        // 实时绘制矩形（需清除上一帧）
        this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
        this.ctx.strokeRect(this.lastX, this.lastY, offsetX - this.lastX, offsetY - this.lastY);
        break;
    }
  },
  stopDrawing() {
    this.isDrawing = false;
  }
}

扩展功能

工具切换
通过按钮绑定切换绘图工具：

vue实现绘图工具

<button @click="currentTool = 'pen'">画笔</button>
<button @click="currentTool = 'rectangle'">矩形</button>

颜色与线宽控制
动态设置绘图样式：

changeColor(color) {
  this.ctx.strokeStyle = color;
},
changeLineWidth(width) {
  this.ctx.lineWidth = width;
}

保存与清除
导出画布为图片或清空画布：

saveCanvas() {
  const link = document.createElement('a');
  link.download = 'drawing.png';
  link.href = this.$refs.canvas.toDataURL('image/png');
  link.click();
},
clearCanvas() {
  this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
}