Fabric.js 是一个功能强大的 HTML5 Canvas 库，它通过面向对象的方式简化了 Canvas 操作，为开发者提供了丰富的图形操作功能和直观的 API 接口。

一、核心特性

1. 基础能力
完整的对象模型：将画布元素抽象为对象（矩形、圆形、路径等）
交互式操作：内置支持拖拽、旋转、缩放等交互
丰富的图形类型：支持路径、图像、文本、组等
动画系统：提供流畅的动画支持
滤镜效果：内置多种图像滤镜
序列化/反序列化：支持 JSON 导入导出
2. 高级功能
自由绘制：铅笔、喷枪等绘画工具
SVG 支持：解析和渲染 SVG
事件系统：完善的鼠标/触摸事件
裁剪和蒙版：支持复杂裁剪操作
自定义扩展：可扩展新的对象类型和功能
 

二、基本架构

1. 核心类结构

2. 对象继承体系
fabric.Object：所有图形基类
fabric.Rect：矩形
fabric.Circle：圆形
fabric.Triangle：三角形
fabric.Text：文本
fabric.Image：图像
fabric.Path：路径
fabric.Group：对象组
fabric.ActiveSelection：活动选择组
 

三、核心 API 详解

1. 画布初始化

// 创建画布实例
const canvas = new fabric.Canvas('canvas-id', {
 width: 800,       // 画布宽度
 height: 600,      // 画布高度
 backgroundColor: '#f5f5f5',  // 背景色
 selection: true,  // 是否启用选择
 preserveObjectStacking: true // 保持对象堆叠顺序
});
 

2. 基本图形创建

// 创建矩形
const rect = new fabric.Rect({
 left: 100,
 top: 100,
 width: 200,
 height: 100,
 fill: 'red',
 angle: 45,
 stroke: 'black',
 strokeWidth: 2
});

// 创建圆形
const circle = new fabric.Circle({
 radius: 50,
 fill: 'blue',
 left: 300,
 top: 200
});

// 添加对象到画布
canvas.add(rect, circle);
canvas.renderAll(); // 渲染更新
 

3. 交互功能

// 对象选择事件
canvas.on('selection:created', (e) => {
 console.log('选中对象:', e.selected);
});

// 对象移动事件
canvas.on('object:moving', (e) => {
 console.log('移动对象:', e.target);
});

// 对象缩放事件
canvas.on('object:scaling', (e) => {
 console.log('缩放对象:', e.target);
});
 

四、高级功能实现

1. 自由绘制实现

// 启用自由绘制
canvas.isDrawingMode = true;

// 配置画笔
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#000000';

// 绘制完成事件
canvas.on('path:created', (e) => {
 console.log('绘制路径:', e.path);
});
 

2. 动画系统

// 简单动画
rect.animate('angle', 360, {
 duration: 1000,
 onChange: canvas.renderAll.bind(canvas),
 easing: fabric.util.ease.easeInOutQuad
});

// 复杂动画
fabric.util.animate({
 startValue: 0,
 endValue: 100,
 duration: 500,
 onChange: (value) => {
   circle.set('left', value);
   canvas.renderAll();
 },
 onComplete: () => {
   console.log('动画完成');
 }
});
 

3. 滤镜应用

// 创建图像对象
fabric.Image.fromURL('image.jpg', (img) => {
 // 添加滤镜
 img.filters.push(
   new fabric.Image.filters.Grayscale(),
   new fabric.Image.filters.Brightness({ brightness: 0.2 })
 );
 img.applyFilters();
 canvas.add(img);
});
 

五、性能优化技巧

1. 渲染优化

// 批量操作时暂停渲染
canvas.renderOnAddRemove = false;
// 执行多个操作...
canvas.renderOnAddRemove = true;
canvas.renderAll();

// 使用 requestAnimationFrame
function animate() {
 requestAnimationFrame(() => {
   // 更新对象属性
   canvas.renderAll();
   animate();
 });
}
 

2. 内存管理

// 移除对象时彻底销毁
canvas.remove(object);
object = null;

// 清理画布
canvas.dispose();
 

3. 大数据量优化

// 使用对象缓存
object.set({
 objectCaching: true,
 dirty: false
});

// 按需渲染
canvas.onlyRenderOnRequest = true;
canvas.requestRenderAll();
 

六、扩展开发

1. 自定义对象

// 创建自定义箭头对象
fabric.Arrow = fabric.util.createClass(fabric.Line, {
 type: 'arrow',
 
 initialize: function(points, options) {
   options || (options = {});
   this.callSuper('initialize', points, options);
 },
 
 _render: function(ctx) {
   this.callSuper('_render', ctx);
   
   // 绘制箭头头部
   ctx.save();
   const xDiff = this.x2 - this.x1;
   const yDiff = this.y2 - this.y1;
   const angle = Math.atan2(yDiff, xDiff);
   
   ctx.translate(this.x2, this.y2);
   ctx.rotate(angle);
   ctx.beginPath();
   ctx.moveTo(0, 0);
   ctx.lineTo(-10, -5);
   ctx.lineTo(-10, 5);
   ctx.closePath();
   ctx.fillStyle = this.stroke;
   ctx.fill();
   ctx.restore();
 }
});

// 添加到画布
const arrow = new fabric.Arrow([50, 50, 200, 200], {
 stroke: 'red',
 strokeWidth: 3
});
canvas.add(arrow);
 

2. 自定义控件

// 添加自定义控制点
fabric.Object.prototype.controls.customControl = new fabric.Control({
 x: 0.5,
 y: -0.5,
 actionHandler: function(eventData, transform, x, y) {
   // 自定义处理逻辑
 },
 render: function(ctx, left, top, styleOverride, fabricObject) {
   // 自定义渲染
 },
 cornerSize: 15
});
 

七、实际应用场景

1. 图形编辑器实现

// 工具栏功能实现
document.getElementById('btn-rect').addEventListener('click', () => {
 const rect = new fabric.Rect({
   width: 100,
   height: 100,
   fill: '#ff0000'
 });
 canvas.add(rect);
});

// 属性面板绑定
document.getElementById('color-picker').addEventListener('change', (e) => {
 const active = canvas.getActiveObject();
 if (active) {
   active.set('fill', e.target.value);
   canvas.renderAll();
 }
});
 

2. 图像标注系统

// 标注工具
let drawingMode = 'rect';
let currentAnnotation = null;

canvas.on('mouse:down', (o) => {
 if (drawingMode === 'rect') {
   currentAnnotation = new fabric.Rect({
     left: o.absolutePointer.x,
     top: o.absolutePointer.y,
     width: 0,
     height: 0,
     fill: 'rgba(255,0,0,0.2)',
     stroke: 'red',
     strokeWidth: 1,
     selectable: true
   });
   canvas.add(currentAnnotation);
 }
});

canvas.on('mouse:move', (o) => {
 if (currentAnnotation) {
   currentAnnotation.set({
     width: o.absolutePointer.x - currentAnnotation.left,
     height: o.absolutePointer.y - currentAnnotation.top
   });
   canvas.renderAll();
 }
});
 

3. 流程图设计器

// 连接线实现
class Connector extends fabric.Line {
 constructor(from, to, options) {
   super([from.left, from.top, to.left, to.top], options);
   this.from = from;
   this.to = to;
   this.set({
     stroke: '#666',
     strokeWidth: 2,
     selectable: false,
     evented: false
   });
 }
 
 update() {
   this.set({
     x1: this.from.left + this.from.width/2,
     y1: this.from.top + this.from.height/2,
     x2: this.to.left + this.to.width/2,
     y2: this.to.top + this.to.height/2
   });
 }
}

// 自动更新连接线
canvas.on('object:moving', () => {
 canvas.forEachObject(obj => {
   if (obj instanceof Connector) {
     obj.update();
   }
 });
});
 

Fabric.js 是一个功能全面且灵活的 Canvas 库，通过其丰富的 API 和事件系统，开发者可以构建从简单的图形编辑器到复杂的可视化应用的各类 Canvas 应用。它的面向对象设计模式使得操作 Canvas 元素就像操作 DOM 元素一样直观，同时提供了专业级的图形处理能力。