使用 Fabric.js 构建一个在线白板组件（支持绘图 / 拖拽 / 导出）

一、前言

在线白板在教育、远程协作、设计等场景中越来越常见。如果用原生 Canvas 来实现白板，绘图、交互、变换、导出等功能实现起来会非常复杂，而 Fabric.js 提供了一个强大的封装库，大幅降低了开发成本。

本篇文章将基于 Vue 3 + Fabric.js 实现一个功能完整的白板组件，支持：

• ✏️ 手绘线条
• 🔲 拖拽图形（矩形 / 圆形）
• 📦 添加文字
• 💾 导出画布为图片
• ♻️ 清空画布
• ↩️ 撤销 / 重做
• 🔒 锁定图形
• 🎨 颜色 / 线宽自定义
• 📋 复制 / 粘贴 / 删除图形

---

二、技术栈

• Vue 3 + <script setup>：组件式开发体验
• Fabric.js：Canvas 图形绘制封装
• Vite：快速构建工具

---

三、项目初始化

npm create vite@latest vue-whiteboard --template vue
cd vue-whiteboard
npm install
npm install fabric

---

四、创建基础白板组件

4.1 Whiteboard.vue 基础结构

<template><div class="toolbar"><button @click="drawLine">画线</button><button @click="addRect">矩形</button><button @click="addCircle">圆形</button><button @click="addText">文字</button><button @click="exportImage">导出</button><button @click="clearCanvas">清空</button></div><canvas id="canvas" width="1000" height="600"></canvas>
</template><script setup>
import { onMounted, ref } from 'vue';
import { fabric } from 'fabric';let canvas = null;
const isDrawing = ref(false);onMounted(() => {canvas = new fabric.Canvas('canvas', {isDrawingMode: false,backgroundColor: '#ffffff'});
});
</script>

4.2 绘图和形状功能

function drawLine() {canvas.isDrawingMode = true;
}function addRect() {const rect = new fabric.Rect({left: 100,top: 100,fill: 'skyblue',width: 100,height: 60});canvas.add(rect);canvas.isDrawingMode = false;
}function addCircle() {const circle = new fabric.Circle({left: 200,top: 200,fill: 'lightgreen',radius: 40});canvas.add(circle);canvas.isDrawingMode = false;
}function addText() {const text = new fabric.IText('请输入文字', {left: 300,top: 300,fontSize: 24,fill: '#333'});canvas.add(text);canvas.isDrawingMode = false;
}function exportImage() {const dataURL = canvas.toDataURL({format: 'png',quality: 1});const link = document.createElement('a');link.href = dataURL;link.download = 'whiteboard.png';link.click();
}function clearCanvas() {canvas.clear();canvas.setBackgroundColor('#ffffff', () => {});
}

---

五、功能增强

5.1 撤销 / 重做

const undoStack = [];
const redoStack = [];function saveState() {redoStack.length = 0;const json = canvas.toJSON();undoStack.push(json);
}canvas.on('object:added', saveState);
canvas.on('object:modified', saveState);
canvas.on('object:removed', saveState);function undo() {if (undoStack.length > 0) {const last = undoStack.pop();redoStack.push(canvas.toJSON());canvas.loadFromJSON(last, () => canvas.renderAll());}
}function redo() {if (redoStack.length > 0) {const next = redoStack.pop();undoStack.push(canvas.toJSON());canvas.loadFromJSON(next, () => canvas.renderAll());}
}

5.2 删除选中对象

function deleteActiveObject() {const active = canvas.getActiveObject();if (active) {canvas.remove(active);}
}window.addEventListener('keydown', (e) => {if (e.key === 'Delete') {deleteActiveObject();}
});

5.3 复制 / 粘贴图形

let clipboard = null;function copy() {const active = canvas.getActiveObject();if (active) {active.clone((cloned) => {clipboard = cloned;});}
}function paste() {if (clipboard) {clipboard.clone((clonedObj) => {canvas.discardActiveObject();clonedObj.set({left: clonedObj.left + 20,top: clonedObj.top + 20});canvas.add(clonedObj);canvas.setActiveObject(clonedObj);canvas.requestRenderAll();});}
}window.addEventListener('keydown', (e) => {if (e.ctrlKey && e.key === 'c') copy();if (e.ctrlKey && e.key === 'v') paste();
});

5.4 自定义线条颜色和宽度

<div class="toolbar"><input type="color" v-model="lineColor" /><input type="range" v-model="lineWidth" min="1" max="20" />
</div>

const lineColor = ref('#000000');
const lineWidth = ref(2);watch([lineColor, lineWidth], () => {canvas.freeDrawingBrush.color = lineColor.value;canvas.freeDrawingBrush.width = lineWidth.value;
});onMounted(() => {canvas.freeDrawingBrush.color = lineColor.value;canvas.freeDrawingBrush.width = lineWidth.value;
});

5.5 图形锁定 / 解锁

function toggleLock() {const active = canvas.getActiveObject();if (active) {const locked = !active.lockMovementX;active.set({lockMovementX: locked,lockMovementY: locked,hasControls: !locked,selectable: !locked});canvas.requestRenderAll();}
}

---

六、样式优化

<style scoped>
.toolbar {margin-bottom: 10px;
}
button {margin-right: 8px;padding: 6px 12px;
}
canvas {border: 1px solid #ccc;
}
</style>

---

七、页面使用示例

<template><Whiteboard />
</template><script setup>
import Whiteboard from './components/Whiteboard.vue';
</script>

---

八、总结与拓展方向

我们基于 Vue 3 和 Fabric.js 构建了一个功能完整的在线白板组件，涵盖了从基本的绘图到高阶的图层操作、撤销重做、导出等常见需求。

如果你希望把它进一步升级成生产级组件，可以继续扩展以下方向：

• 🧠 协同绘图：结合 WebSocket 实现多人实时操作同步
• 🧩 图层管理面板：可见性、锁定、命名等功能
• 🧲 对齐吸附 / 网格背景
• ☁️ 白板 JSON 文件存储 / 导入
• 🖼️ 拖入图片编辑支持

Fabric.js 是一款非常适合前端开发者构建图形编辑器的工具，配合 Vue 等现代框架可以开发出媲美专业工具的应用。

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕