当前位置：首页 > VUE

vue实现画图

2026-01-07 18:51:39VUE

Vue 实现画图功能

在 Vue 中实现画图功能通常需要结合 HTML5 的 <canvas> 元素或第三方库。以下是几种常见的方法：

使用原生 Canvas API

通过 Vue 直接操作 <canvas> 元素，实现基础的绘图功能：

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = window.innerWidth - 20;
      this.canvas.height = window.innerHeight - 20;
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.draw(e);
    },
    draw(e) {
      if (!this.isDrawing) return;

      this.ctx.lineWidth = 5;
      this.ctx.lineCap = 'round';
      this.ctx.strokeStyle = '#000000';

      this.ctx.lineTo(e.clientX, e.clientY);
      this.ctx.stroke();
      this.ctx.beginPath();
      this.ctx.moveTo(e.clientX, e.clientY);
    },
    stopDrawing() {
      this.isDrawing = false;
      this.ctx.beginPath();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  }
}
</script>

使用第三方库

对于更复杂的绘图需求，可以使用专门的绘图库：

Fabric.js - 功能强大的 Canvas 库
```
import { fabric } from 'fabric';
```

export default { mounted() { const canvas = new fabric.Canvas(this.$refs.canvas); const rect = new fabric.Rect({ left: 100, top: 100, width: 60, height: 70, fill: 'red' }); canvas.add(rect); } }


2. Konva.js - 高性能的 2D 绘图库
```javascript
import Konva from 'konva';

export default {
  mounted() {
    const stage = new Konva.Stage({
      container: this.$refs.container,
      width: 800,
      height: 600
    });

    const layer = new Konva.Layer();
    const circle = new Konva.Circle({
      x: 100,
      y: 100,
      radius: 50,
      fill: 'green'
    });

    layer.add(circle);
    stage.add(layer);
  }
}

使用 SVG 绘图

Vue 原生支持 SVG，可以直接在模板中使用 SVG 元素：

<template>
  <svg width="200" height="200">
    <circle cx="50" cy="50" r="40" fill="blue" />
    <rect x="100" y="100" width="50" height="50" fill="red" />
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" 
          stroke="black" fill="transparent"/>
  </svg>
</template>

响应式绘图

结合 Vue 的响应式特性，实现动态绘图：

vue实现画图

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <input type="range" v-model="brushSize" min="1" max="20">
    <input type="color" v-model="brushColor">
  </div>
</template>

<script>
export default {
  data() {
    return {
      brushSize: 5,
      brushColor: '#000000'
    }
  },
  methods: {
    draw(e) {
      if (!this.isDrawing) return;

      this.ctx.lineWidth = this.brushSize;
      this.ctx.strokeStyle = this.brushColor;

      // 绘图逻辑...
    }
  }
}
</script>