当前位置：首页 > VUE

vue3实现画图

2026-01-21 17:48:19VUE

Vue3 实现画图功能

在 Vue3 中实现画图功能可以通过以下几种方式完成，具体选择取决于需求复杂度。

使用 HTML5 Canvas

Canvas 是 HTML5 提供的原生画图 API，适合需要高性能或复杂绘图的场景。

vue3实现画图

<template>
  <canvas ref="canvas" width="500" height="500"></canvas>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const canvas = ref(null);

onMounted(() => {
  const ctx = canvas.value.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100);
});
</script>

使用 SVG

SVG 是基于矢量的图形技术，适合需要缩放或交互的场景。

<template>
  <svg width="200" height="200">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </svg>
</template>

使用第三方库

对于更复杂的绘图需求，可以使用以下流行库：

vue3实现画图

Fabric.js: 提供丰富的图形操作功能
Konva.js: 专注于高性能 Canvas 绘图
D3.js: 适合数据可视化场景

<template>
  <div ref="container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Konva from 'konva';

const container = ref(null);

onMounted(() => {
  const stage = new Konva.Stage({
    container: container.value,
    width: 500,
    height: 500,
  });

  const layer = new Konva.Layer();
  stage.add(layer);

  const circle = new Konva.Circle({
    x: 100,
    y: 100,
    radius: 70,
    fill: 'green',
  });
  layer.add(circle);
});
</script>

实现交互式绘图

以下示例展示如何实现鼠标绘图功能：

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

<script setup>
import { ref } from 'vue';

const canvas = ref(null);
const isDrawing = ref(false);

function startDrawing(e) {
  isDrawing.value = true;
  const ctx = canvas.value.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
  if (!isDrawing.value) return;
  const ctx = canvas.value.getContext('2d');
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
}

function stopDrawing() {
  isDrawing.value = false;
}
</script>

保存绘图结果

可以通过以下方法将画布内容保存为图片：

function saveImage() {
  const link = document.createElement('a');
  link.download = 'drawing.png';
  link.href = canvas.value.toDataURL('image/png');
  link.click();
}

选择合适的方法取决于项目需求，Canvas 适合像素级操作，SVG 适合矢量图形，而第三方库可以简化复杂图形的实现。

标签: 画图