当前位置：首页 > VUE

vue实现画图

2026-02-10 03:07:17VUE

Vue 实现画图功能

Vue 结合 HTML5 的 Canvas 或 SVG 可以轻松实现画图功能。以下是几种常见的实现方式：

使用 Canvas 绘制图形

在 Vue 中，可以通过 ref 获取 Canvas 元素，并使用 JavaScript 的 Canvas API 进行绘制。

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      ctx: null,
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.ctx.strokeStyle = '#000000';
    this.ctx.lineWidth = 5;
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

使用 SVG 绘制图形

SVG 是一种矢量图形格式，适合在 Vue 中动态生成图形。

vue实现画图

<template>
  <svg width="400" height="400" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing">
    <path :d="pathData" stroke="black" stroke-width="5" fill="none" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      pathData: '',
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      this.startX = e.offsetX;
      this.startY = e.offsetY;
      this.pathData = `M ${this.startX} ${this.startY}`;
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.pathData += ` L ${e.offsetX} ${e.offsetY}`;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

使用第三方库

Vue 生态中有许多第三方库可以简化画图功能，例如：

Vue Konva：基于 Konva 的 Vue 封装，适合复杂的图形绘制。

vue实现画图

npm install vue-konva konva

<template>
  <v-stage ref="stage" :config="stageConfig">
    <v-layer>
      <v-line :config="lineConfig" />
    </v-layer>
  </v-stage>
</template>

Fabric.js：功能强大的 Canvas 库，支持交互式图形。
```
npm install fabric
```
```
import { fabric } from 'fabric';
```

实现画板功能

结合事件监听和状态管理，可以实现一个完整的画板功能。

<template>
  <div>
    <canvas ref="canvas" width="800" height="600" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas>
    <div>
      <button @click="clearCanvas">Clear</button>
      <input type="color" v-model="strokeColor" />
      <input type="range" v-model="lineWidth" min="1" max="20" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      ctx: null,
      strokeColor: '#000000',
      lineWidth: 5,
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.updateCanvasStyle();
  },
  methods: {
    updateCanvasStyle() {
      this.ctx.strokeStyle = this.strokeColor;
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.lineCap = 'round';
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    },
  },
  watch: {
    strokeColor() {
      this.updateCanvasStyle();
    },
    lineWidth() {
      this.updateCanvasStyle();
    },
  },
};
</script>