Fabric.js 完全指南：从入门到实战的Canvas绘图引擎详解

Fabric.js 是一款基于 HTML5 Canvas 的强大绘图库，它简化了 Canvas 原生 API 的复杂操作，提供了面向对象的编程模型，让开发者能轻松实现图形绘制、编辑、交互等功能。无论是开发简单的涂鸦工具，还是复杂的设计协作平台，Fabric.js 都是高效且可靠的选择。

本文将从基础到进阶，结合大量实战示例，全面讲解 Fabric.js 的核心功能与使用技巧，帮助你快速掌握这一工具的精髓。

一、Fabric.js 简介：为什么选择它？

Canvas 原生 API 虽然强大，但存在诸多痛点：

• 操作繁琐（绘制图形需手动调用 beginPath()、fill() 等一系列方法）；
• 缺乏对象概念（绘制的图形无法直接作为“对象”进行选中、移动等操作）；
• 状态管理复杂（无法直接保存/还原画布状态）。

Fabric.js 正是为解决这些问题而生：

• 面向对象：将图形、文本、图片等抽象为“对象”，支持直接操作（选中、移动、缩放等）；
• 丰富的API：内置大量图形类型（矩形、圆形、多边形等）和交互功能（拖拽、旋转、组合等）；
• 序列化支持：可将画布状态转为 JSON 数据，轻松实现保存、还原、跨端同步；
• 扩展性强：支持自定义对象、滤镜、动画等高级功能。

二、快速入门：环境搭建与基础操作

1. 环境搭建

Fabric.js 支持多种引入方式，根据项目需求选择：

方式1：CDN 引入（适合快速测试）

<!-- 引入最新版 -->
<script src="https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js"></script><!-- 页面中添加Canvas元素 -->
<canvas id="canvas" width="800" height="600" style="border: 1px solid #ccc;"></canvas>

方式2：npm 安装（适合工程化项目）

npm install fabric --save

引入使用：

import { fabric } from 'fabric';

2. 初始化画布

通过 fabric.Canvas 类创建画布实例，这是所有操作的基础：

// 获取Canvas DOM元素
const canvasElement = document.getElementById('canvas');// 初始化画布
const canvas = new fabric.Canvas(canvasElement, {// 可选配置width: 800,        // 画布宽度（默认使用Canvas元素宽高）height: 600,       // 画布高度backgroundColor: '#f5f5f5', // 背景色selectionColor: 'rgba(255, 255, 0, 0.3)', // 选中对象时的背景色selectionBorderColor: 'yellow', // 选中对象的边框色
});

3. 绘制基础图形

Fabric.js 内置了多种基础图形，通过简单的 API 即可创建并添加到画布：

示例1：绘制矩形

// 创建矩形对象
const rect = new fabric.Rect({left: 100,       // 左上角x坐标top: 100,        // 左上角y坐标width: 150,      // 宽度height: 100,     // 高度fill: 'red',     // 填充色stroke: 'blue',  // 边框色strokeWidth: 2,  // 边框宽度angle: 15,       // 旋转角度（度）opacity: 0.8,    // 透明度（0-1）
});// 添加到画布
canvas.add(rect);

示例2：绘制圆形

const circle = new fabric.Circle({left: 300,top: 200,radius: 50,      // 半径fill: 'green',stroke: 'black',strokeWidth: 1,
});canvas.add(circle);

示例3：绘制文本

const text = new fabric.Text('Hello Fabric.js', {left: 200,top: 300,fontSize: 24,    // 字体大小fill: '#333',    // 文字颜色fontWeight: 'bold', // 字体粗细fontFamily: 'Arial', // 字体angle: -10,      // 旋转角度
});canvas.add(text);

添加图形后，默认支持鼠标交互：点击选中对象，拖拽移动，拖动边角缩放/旋转。

三、核心功能：对象操作与事件处理

1. 对象基本操作

Fabric.js 的对象（图形、文本、图片等）都继承自 fabric.Object，拥有统一的操作方法：

选中/取消选中对象

// 选中指定对象
canvas.setActiveObject(rect);// 取消所有选中
canvas.discardActiveObject();// 获取当前选中的对象
const activeObj = canvas.getActiveObject();
if (activeObj) {console.log('当前选中对象：', activeObj.type); // 输出对象类型（如'rect'、'circle'）
}

修改对象属性

// 直接修改属性（修改后需刷新画布）
rect.set({fill: 'purple',   // 更改填充色width: 200,       // 更改宽度angle: 0,         // 重置旋转角度
});// 刷新画布使修改生效
canvas.renderAll();

删除对象

// 删除选中的对象
if (activeObj) {canvas.remove(activeObj);
}// 删除所有对象
canvas.clear();

2. 事件系统

Fabric.js 提供了丰富的事件机制，可监听画布或对象的各种行为（点击、移动、选中等）。

画布事件

// 监听画布点击
canvas.on('mouse:down', (e) => {console.log('画布点击位置：', e.pointer.x, e.pointer.y);
});// 监听画布上对象被选中
canvas.on('object:selected', (e) => {console.log('选中对象：', e.target.type);
});// 监听对象被移动
canvas.on('object:moved', (e) => {console.log('对象新位置：', e.target.left, e.target.top);
});

对象事件

// 给单个对象绑定点击事件
rect.on('mousedown', () => {console.log('矩形被点击了');
});// 监听对象缩放事件
circle.on('scaled', (e) => {console.log('圆形缩放后尺寸：', e.target.width, e.target.height);
});

3. 序列化与反序列化（状态保存/还原）

Fabric.js 最实用的功能之一：将画布状态转为可存储的数据，需要时再完整还原。

保存画布状态

// 序列化画布（包含所有对象信息）
const canvasData = canvas.toJSON(); 
// 转为JSON字符串（方便存储到localStorage或服务器）
const dataStr = JSON.stringify(canvasData);// 保存到本地存储
localStorage.setItem('myCanvasState', dataStr);

还原画布状态

// 从本地存储读取数据
const savedData = JSON.parse(localStorage.getItem('myCanvasState'));// 加载数据并还原画布
canvas.loadFromJSON(savedData, () => {// 回调函数：数据加载完成后执行canvas.renderAll(); // 强制刷新画布console.log('画布已还原');
});

自定义序列化字段

默认 toJSON() 会保存对象的所有属性，可通过参数指定需要保存的字段（减少数据体积）：

// 只保存位置、大小、填充色
const simpleData = canvas.toJSON(['left', 'top', 'width', 'height', 'fill']);

4. 图片处理

Fabric.js 支持加载网络图片、本地图片，并对图片进行编辑（缩放、旋转、裁剪等）。

加载网络图片

fabric.Image.fromURL('https://picsum.photos/200/200', (img) => {// 图片加载完成后的回调img.set({left: 400,top: 100,angle: 20,scaleX: 0.8, // 水平缩放scaleY: 0.8, // 垂直缩放});canvas.add(img);
});

加载本地图片（通过文件选择器）

<input type="file" id="imageUpload" accept="image/*">

document.getElementById('imageUpload').addEventListener('change', (e) => {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = (event) => {// 读取本地图片为DataURL并加载fabric.Image.fromURL(event.target.result, (img) => {img.set({ left: 100, top: 300 });canvas.add(img);});};reader.readAsDataURL(file);
});

图片裁剪

fabric.Image.fromURL('https://picsum.photos/400/400', (img) => {// 裁剪图片（x, y, 宽度, 高度）img.set({left: 200,top: 400,clipTo: (ctx) => {// 使用Canvas上下文裁剪为圆形ctx.arc(100, 100, 100, 0, Math.PI * 2, false);}});canvas.add(img);
});

四、进阶技巧：自定义与性能优化

1. 自定义对象

当内置图形满足不了需求时，可通过继承 fabric.Object 创建自定义对象。

示例：创建一个带文字的矩形

// 自定义对象类
class LabeledRect extends fabric.Rect {constructor(options, text) {// 调用父类构造函数super(options);// 自定义属性：文字内容this.labelText = text || 'Label';// 确保自定义属性可被序列化this.toObject = function() {return {...super.toObject(),labelText: this.labelText};};}// 重写渲染方法，绘制文字_render(ctx) {// 先渲染矩形（父类逻辑）super._render(ctx);// 再绘制文字ctx.font = '16px Arial';ctx.fillStyle = '#fff';ctx.textAlign = 'center';ctx.textBaseline = 'middle';// 在矩形中心绘制文字ctx.fillText(this.labelText, this.width/2, this.height/2);}
}// 使用自定义对象
const labeledRect = new LabeledRect({left: 500,top: 200,width: 120,height: 80,fill: 'blue'
}, '自定义矩形');canvas.add(labeledRect);

2. 撤销/重做功能

基于序列化功能，可实现画布操作的撤销与重做：

// 维护历史记录数组
const history = [];
const historyLimit = 20; // 最大历史记录数
let historyIndex = -1;// 保存当前状态到历史记录
function saveState() {// 移除当前状态之后的记录（避免重做时混乱）if (historyIndex < history.length - 1) {history.splice(historyIndex + 1);}// 序列化当前状态const state = canvas.toJSON();history.push(state);// 限制历史记录数量if (history.length > historyLimit) {history.shift();}historyIndex = history.length - 1;
}// 初始化时保存一次状态
saveState();// 监听对象变化，自动保存状态
canvas.on('object:added object:removed object:modified', saveState);// 撤销
function undo() {if (historyIndex > 0) {historyIndex--;canvas.loadFromJSON(history[historyIndex], canvas.renderAll.bind(canvas));}
}// 重做
function redo() {if (historyIndex < history.length - 1) {historyIndex++;canvas.loadFromJSON(history[historyIndex], canvas.renderAll.bind(canvas));}
}// 绑定按钮事件
document.getElementById('undoBtn').addEventListener('click', undo);
document.getElementById('redoBtn').addEventListener('click', redo);

3. 性能优化

当画布上对象数量较多（如 hundreds）时，可能出现卡顿，可通过以下方式优化：

启用对象缓存

// 对静态对象启用缓存（减少重绘计算）
rect.set({cache: true, // 启用缓存objectCaching: true
});

批量操作

多次修改对象时，先暂停渲染，完成后再刷新：

canvas.pauseRendering(); // 暂停渲染// 批量修改
for (let i = 0; i < 100; i++) {const obj = new fabric.Circle({...});canvas.add(obj);
}canvas.resumeRendering(); // 恢复渲染
canvas.renderAll(); // 一次性刷新

层级管理

通过 sendToBack()、bringToFront() 等方法管理对象层级，避免不必要的覆盖计算：

// 将对象移到最上层
rect.bringToFront();
// 将对象移到最下层
circle.sendToBack();

五、实战案例：简易绘图应用

整合上述知识点，实现一个包含基础绘图、保存/加载、撤销/重做功能的绘图工具：

<!-- 工具栏 -->
<div><button id="rectBtn">矩形</button><button id="circleBtn">圆形</button><button id="textBtn">文字</button><button id="undoBtn">撤销</button><button id="redoBtn">重做</button><button id="saveBtn">保存</button><button id="loadBtn">加载</button><button id="clearBtn">清空</button>
</div>
<canvas id="canvas" width="800" height="600" style="border: 1px solid #ccc;"></canvas><script>
const canvas = new fabric.Canvas('canvas', { backgroundColor: '#fff' });// 初始化历史记录（参考上文撤销/重做代码）
const history = [canvas.toJSON()];
let historyIndex = 0;
function saveState() { /* 实现同上 */ }// 工具栏事件
document.getElementById('rectBtn').addEventListener('click', () => {const rect = new fabric.Rect({left: 100, top: 100, width: 100, height: 70, fill: '#' + Math.random().toString(16).slice(-6)});canvas.add(rect);
});document.getElementById('circleBtn').addEventListener('click', () => {const circle = new fabric.Circle({left: 250, top: 150, radius: 40, fill: '#' + Math.random().toString(16).slice(-6)});canvas.add(circle);
});document.getElementById('textBtn').addEventListener('click', () => {const text = new fabric.Text('双击编辑', {left: 400, top: 200, fontSize: 20, fill: '#333'});canvas.add(text);
});document.getElementById('undoBtn').addEventListener('click', () => { /* 实现同上 */ });
document.getElementById('redoBtn').addEventListener('click', () => { /* 实现同上 */ });document.getElementById('saveBtn').addEventListener('click', () => {localStorage.setItem('myDrawing', JSON.stringify(canvas.toJSON()));alert('保存成功');
});document.getElementById('loadBtn').addEventListener('click', () => {const data = localStorage.getItem('myDrawing');if (data) {canvas.loadFromJSON(JSON.parse(data), canvas.renderAll.bind(canvas));}
});document.getElementById('clearBtn').addEventListener('click', () => {canvas.clear();saveState();
});// 监听对象变化，自动保存历史
canvas.on('object:added object:removed object:modified', saveState);
</script>

六、总结与资源推荐

Fabric.js 凭借其简洁的 API 和强大的功能，成为 Canvas 绘图领域的佼佼者。本文涵盖了从基础绘图、对象操作、事件处理到自定义对象、性能优化的核心知识点，配合实战示例，足以支撑大部分绘图类应用的开发。

进一步学习资源：

• 官方文档：fabricjs.com/docs（最权威的API参考）
• GitHub 仓库：github.com/fabricjs/fabric.js（源码与示例）
• 官方示例：fabricjs.com/demos（直观展示各种功能）

掌握 Fabric.js 后，你可以尝试开发更复杂的应用，如图表工具、图片编辑器、在线白板等。动手实践是最好的学习方式，不妨从本文的示例开始，逐步探索更多可能性！