vue3实现画图
Vue3 实现画图功能
在 Vue3 中实现画图功能可以通过 HTML5 的 <canvas> 元素或第三方库（如 Fabric.js、Konva.js）来完成。以下是两种常见的实现方式：
使用原生 Canvas API
通过 Vue3 的 ref 和生命周期钩子直接操作 <canvas> 元素：
<template>
<canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const canvas = ref(null);
let isDrawing = false;
let ctx = null;
onMounted(() => {
ctx = canvas.value.getContext('2d');
canvas.value.width = window.innerWidth * 0.8;
canvas.value.height = window.innerHeight * 0.8;
});
const startDrawing = (e) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
};
const draw = (e) => {
if (!isDrawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
};
const stopDrawing = () => {
isDrawing = false;
};
</script>使用 Fabric.js 库
Fabric.js 是一个强大的 Canvas 库，适合需要复杂交互的场景：
<template>
<canvas ref="canvas" width="800" height="600"></canvas>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { fabric } from 'fabric';
const canvas = ref(null);
onMounted(() => {
const fabricCanvas = new fabric.Canvas(canvas.value);
// 绘制矩形
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 60,
height: 70,
fill: 'red'
});
fabricCanvas.add(rect);
// 自由绘制模式
fabricCanvas.isDrawingMode = true;
fabricCanvas.freeDrawingBrush.width = 5;
fabricCanvas.freeDrawingBrush.color = 'blue';
});
</script>关键点说明
- 响应式处理：通过 Vue3 的
ref绑定 DOM 元素，在onMounted生命周期中初始化画布。 - 事件监听：监听鼠标事件（如
mousedown、mousemove）实现自由绘制。 - 性能优化：对于复杂场景，使用
requestAnimationFrame替代直接绘制。 - 清除画布：调用
ctx.clearRect(0, 0, width, height)或 Fabric.js 的canvas.clear()。
扩展功能建议
- 保存图像：通过
canvas.toDataURL('image/png')导出为图片。 - 撤销/重做：使用 Fabric.js 的
undo/redo栈或手动记录绘图状态。 - 图形工具：添加按钮切换绘制模式（如矩形、圆形、文字）。
两种方式各有优劣：原生 API 更轻量但需要手动处理更多细节；Fabric.js 功能丰富但体积较大。根据项目需求选择合适方案。
