当前位置：首页 > VUE

vue怎么实现画图

2026-01-17 15:37:00VUE

Vue 实现画图的方法

使用 HTML5 Canvas

Vue 可以结合 HTML5 Canvas 实现画图功能。Canvas 提供了一系列 API 用于绘制图形、线条和文本。

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

<script>
export default {
  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');
  },
  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;
    },
  },
};
</script>

使用 SVG

SVG 是一种基于 XML 的矢量图形格式，Vue 可以直接操作 SVG 元素来实现画图功能。

<template>
  <svg @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing">
    <path v-for="(path, index) in paths" :key="index" :d="path" fill="none" stroke="black" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      paths: [],
      currentPath: '',
    };
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      const { offsetX, offsetY } = e;
      this.currentPath = `M ${offsetX} ${offsetY}`;
    },
    draw(e) {
      if (!this.isDrawing) return;
      const { offsetX, offsetY } = e;
      this.currentPath += ` L ${offsetX} ${offsetY}`;
      this.paths = [...this.paths.slice(0, -1), this.currentPath];
    },
    stopDrawing() {
      this.isDrawing = false;
      this.paths.push(this.currentPath);
      this.currentPath = '';
    },
  },
};
</script>

使用第三方库

Vue 可以结合第三方画图库（如 Fabric.js、Konva.js 或 Paper.js）来实现更复杂的画图功能。

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    const canvas = new fabric.Canvas(this.$refs.canvas);
    canvas.setWidth(800);
    canvas.setHeight(600);

    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 50,
      height: 50,
      fill: 'red',
    });
    canvas.add(rect);
  },
};
</script>

响应式画图

Vue 的响应式特性可以用于动态更新画图内容，例如根据用户输入调整图形属性。

<template>
  <canvas ref="canvas"></canvas>
  <input v-model="color" placeholder="Enter color" />
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
    };
  },
  watch: {
    color(newColor) {
      this.drawRectangle(newColor);
    },
  },
  mounted() {
    this.drawRectangle(this.color);
  },
  methods: {
    drawRectangle(color) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = color;
      ctx.fillRect(50, 50, 100, 100);
    },
  },
};
</script>

以上方法可以根据具体需求选择，Canvas 适合高性能画图，SVG 适合矢量图形，第三方库提供更丰富的功能。

vue怎么实现画图