Fabric.js 新手快速入门指南 Vue 项目适用

在前端开发中，Canvas 是实现图形绘制、可视化交互的核心技术之一，但原生 Canvas API 上手门槛较高，编写复杂图形和交互逻辑时代码繁琐、可读性差。而 Fabric.js 的出现，完美解决了这一痛点——它是一款轻量且强大的 Canvas 封装库，为原生 Canvas 补充了完整的对象模型、SVG 解析器、交互能力及各类实用工具，让开发者能以更简洁的方式实现复杂的 Canvas 效果。 由于 Fabric.js 是国外开发的框架，其官方 API 体系较为繁杂，相关文档多为英文且数量有限，给国内新手入门带来了一定阻碍。因此，本文专门针对 Vue 项目开发者，整理了 Fabric.js 的核心用法，帮助大家快速上手，轻松享受 Canvas 绘制的乐趣。

一、为什么要使用 Fabric.js？

原生 Canvas 提供了基础的画布绘制能力，但 API 设计偏向底层，不够友好。对于简单的图形（如矩形、圆形）绘制，原生 API 还能应对，但当需要实现复杂图形组合、渐变填充、动画效果、拖拽交互等需求时，就需要编写大量冗余代码，且后期维护难度极大。 Fabric.js 的核心优势的就是“对象化编程”——它将 Canvas 上的每一个元素（图形、图片、文字）都封装成独立的对象，开发者无需关注底层绘制逻辑，只需通过操作对象的属性和方法，就能轻松实现各类复杂效果，大幅提升开发效率和代码可读性。

二、Fabric.js 能做什么？

Fabric.js 的功能覆盖了 Canvas 开发的绝大多数场景，尤其适合可视化项目、图形编辑器、海报生成器等需求，核心能力包括：

• 图形创建与填充：支持在 Canvas 上快速创建矩形、圆形、三角形等规则图形，以及自定义路径的不规则图形，同时支持纯色、渐变、图片等多种填充方式。
• 元素组合与编辑：可将多个图形、文字、图片组合成一个整体对象，统一进行移动、旋转、缩放等操作，也可单独编辑组合内的单个元素。
• 交互与动画：自带元素拖拽、旋转、缩放功能，无需额外编写交互逻辑；同时支持为元素添加各类动画效果，满足个性化交互需求。
• 数据序列化与解析：可将 Canvas 上的所有元素序列化为 JSON 或 SVG 数据，便于存储和传输；也可通过 JSON、SVG 数据反向渲染 Canvas，实现“保存-恢复”功能。
• 其他实用功能：支持文字换行、图片裁剪、图层管理、事件监听等，覆盖日常开发中的各类细节需求。

三、起步：Vue 项目中引入 Fabric.js

Fabric.js 支持多种引入方式，本文主要针对主流的 Vue 项目（使用 ES6 语法和 Webpack 构建），介绍最便捷的引入方法，新手可直接照搬操作。

步骤 1：安装 Fabric.js 依赖

打开项目终端，执行以下命令安装 Fabric.js（npm 和 yarn 二选一即可）：

npm install fabric（或 yarn add fabric）

步骤 2：在 Vue 组件中引入

在需要使用 Canvas 的 .vue 单文件中，通过 import 语句引入 Fabric.js：

import { fabric } from 'fabric'

步骤 3：开始使用 Fabric.js

由于 Canvas 需要在 DOM 渲染完成后才能初始化，因此建议在 Vue 的 mounted 生命周期钩子中编写 Fabric.js 相关代码，确保画布能正常渲染：

mounted() {
  // 此处编写 Fabric.js 代码，初始化画布、绘制元素等
}

注意：默认的 fabric npm 包体积较大，包含了一些可能用不到的功能（如特殊滤镜、3D 效果等）。如果你的项目对包体积有严格要求，可以通过 Fabric.js 官方提供的自定义构建工具，筛选需要的功能模块，构建专属版本，减少包体积。

四、核心用法：绘制图形

Fabric.js 绘制图形的核心逻辑是：先初始化画布，再创建图形对象（设置相关属性），最后将图形对象添加到画布中。下面分别介绍规则图形和不规则图形的绘制方法，新手可直接复制代码测试。

4.1 绘制规则图形

规则图形（矩形、圆形、三角形）是最常用的元素，Fabric.js 为每种规则图形都提供了专属的构造函数，用法简单统一。

步骤 1：声明并初始化画布

首先在 Vue 模板中添加 Canvas 标签，指定 id（用于关联 Fabric 画布）和尺寸：

<canvas id="main" width="800" height="600"></canvas>

然后在 mounted 中初始化画布：

var canvas = new fabric.Canvas('main');

步骤 2：创建并添加图形对象

以矩形为例，创建图形对象并设置位置、尺寸、颜色等属性，再添加到画布中：

var rect = new fabric.Rect({
  left: 100, // 距离画布左侧的距离，单位：像素（px）
  top: 100,  // 距离画布上边的距离，单位：像素（px）
  fill: 'red', // 图形填充颜色（支持十六进制、RGB、颜色名称）
  width: 30,  // 矩形宽度
  height: 30  // 矩形高度
});

// 将矩形添加到画布中
canvas.add(rect);

其他常用规则图形

除了矩形，圆形和三角形的绘制方法类似，只需更换构造函数和对应属性：

• 绘制圆形：使用 fabric.Circle，核心属性为 radius（半径）
• 绘制三角形：使用 fabric.Triangle，核心属性为 width（底宽）、height（高）

规则图形绘制效果如下（截图源自网络，可直接复制上述代码测试）：

4.2 绘制不规则图形

对于自定义形状的不规则图形，Fabric.js 提供了 fabric.Path 构造函数，通过“路径指令”（类似 SVG 路径）来绘制，核心是通过点和线的移动、连接，组合成复杂图形。

核心路径指令说明

fabric.Path 的参数是一串路径指令，常用指令如下（大小写敏感）：

• M：移动画笔（Move），格式为 M x y，代表将画笔移动到（x,y）坐标点，不绘制线条。
• L：绘制直线（Line），格式为 L x y，代表从当前画笔位置绘制一条直线到（x,y）坐标点。
• z：闭合路径（Close），代表将当前画笔位置与路径起始点连接，形成闭合图形。
• C：绘制贝塞尔曲线（Curve），用于绘制平滑曲线，适合复杂图形（新手可先掌握 M、L、z 指令）。

示例：绘制不规则三角形

下面通过路径指令绘制一个不规则三角形，并通过 set() 方法修改其属性（位置、颜色等）：

// 路径指令：移动到（0,0），绘制直线到（200,100），再到（170,200），最后闭合路径
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
// 通过 set() 方法设置属性（也可在构造函数中直接设置）
path.set({ 
  left: 120,  // 图形位置
  top: 120,
  fill: 'red', // 填充颜色
  opacity: 0.8 // 透明度（0-1）
});
// 添加到画布
canvas.add(path);

不规则图形绘制效果如下：

五、核心用法：操作图片

在 Canvas 开发中，图片操作是常见需求（如插入图片、调整图片大小、旋转图片等）。Fabric.js 提供了两种常用的图片插入方式：HTML 标签插入和 JavaScript 动态插入，两种方式各有优势，可根据场景选择。

5.1 HTML 标签插入图片

适合图片路径固定、无需动态加载的场景，先在 Vue 模板中添加 img 标签（可设置 display: none 隐藏原图），再通过 Fabric.js 解析图片元素。

<!-- 画布 -->
<canvas id="canvas" width="800" height="800"></canvas>
<!-- 原图（可隐藏） -->
<img id="img" src="./2.png" style="display: none;">

// 初始化画布
var canvas = new fabric.Canvas('canvas');
// 获取 HTML 中的图片元素
var imgElement = document.getElementById('img');
// 将图片解析为 Fabric 图片对象，并设置属性
var imgInstance = new fabric.Image(imgElement,{
  left: 100,    // 图片位置
  top: 100,
  width: 200,   // 图片宽度（自动缩放比例）
  height: 100,  // 图片高度
  angle: 30     // 顺时针旋转角度（单位：度）
});
// 将图片添加到画布
canvas.add(imgInstance);

5.2 JavaScript 动态插入图片

适合图片路径动态生成（如接口返回、用户上传）的场景，通过 fabric.Image.fromURL 方法直接加载图片路径，无需在模板中添加 img 标签。

var canvas = new fabric.Canvas('canvas');
// 从图片路径加载图片
fabric.Image.fromURL('./2.png', function(oImg) {
  // oImg 是解析后的 Fabric 图片对象
  oImg.scale(0.1); // 缩小图片（0.1 表示缩小到原图的 10%，1 为原尺寸，大于 1 为放大）
  canvas.add(oImg); // 添加到画布
});

图片操作效果如下：

六、核心用法：交互与组合

Fabric.js 最强大的优势之一就是自带交互能力，无需额外编写复杂代码，就能实现元素拖拽、旋转、缩放等交互效果；同时支持将多个元素组合成一个整体，方便统一操作。

6.1 交互操作：事件监听

Fabric.js 支持两种类型的事件监听：画布事件（针对整个 Canvas）和元素事件（针对画布上的单个元素），可根据需求监听对应事件，实现自定义交互逻辑。

画布事件（针对整个 Canvas）

常用画布事件包括鼠标按下、移动、抬起等，示例如下：

var canvas = new fabric.Canvas('canvas');
// 监听鼠标按下事件
canvas.on('mouse:down', function(options) {
  // options.e 是原生鼠标事件对象，可获取鼠标坐标
  console.log('鼠标按下坐标：', options.e.clientX, options.e.clientY);
});

常用画布事件汇总

• mouse:down：鼠标在画布上按下时触发
• mouse:move：鼠标在画布上移动时触发
• mouse:up：鼠标在画布上抬起时触发
• after:render：画布重绘完成后触发

元素事件（针对单个元素）

常用元素事件包括选中、移动、旋转等，示例如下（监听矩形和圆形的选中事件）：

var canvas = new fabric.Canvas('canvas');
// 创建矩形
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
// 监听矩形选中事件
rect.on('selected', function() {
  console.log('选中了矩形');
});
// 创建圆形
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
// 监听圆形选中事件
circle.on('selected', function() {
  console.log('选中了圆形');
});
// 添加到画布
canvas.add(rect, circle);

常用元素事件汇总

• object:selected：元素被选中时触发
• object:moving：元素被移动时触发
• object:rotating：元素被旋转时触发
• object:added：元素被添加到画布时触发
• object:removed：元素被从画布中移除时触发

交互效果如下：

6.2 元素组合：fabric.Group

当需要将多个元素（图形、文字、图片）作为一个整体操作时，可使用 fabric.Group 方法将其组合，组合后可统一设置位置、旋转角度等属性，也可通过 ungroup() 方法取消组合。

示例：组合圆形和文字

var canvas = new fabric.Canvas('canvas');
// 1. 创建圆形
var circle = new fabric.Circle({
  radius: 100,
  fill: '#f00', // 红色填充
  scaleY: 0.5, // Y 轴缩放（0.5 表示纵向压缩一半）
  originX: 'center', // 中心点 X 轴坐标（center 表示居中）
  originY: 'center'  // 中心点 Y 轴坐标（center 表示居中）
});
// 2. 创建文字
var text = new fabric.Text('Hello World', {
  fontSize: 30, // 字体大小
  originX: 'center',
  originY: 'center'
})
// 3. 组合元素：参数 1 为需要组合的元素数组，参数 2 为组合后的共同属性
var group = new fabric.Group([circle, text], {
  left: 150, // 组合对象的位置
  top: 100,
  angle: 10  // 组合对象的旋转角度
})
// 4. 添加到画布
canvas.add(group);

组合效果如下：

七、核心用法：序列化与反序列化

在实际项目中，常常需要将 Canvas 上的元素状态保存（如用户绘制的图形、编辑的内容），或根据保存的数据恢复 Canvas 状态，这就需要用到 Fabric.js 的序列化与反序列化功能，支持 JSON 和 SVG 两种格式。

7.1 JSON 序列化（保存 Canvas 状态）

通过 canvas.toJSON() 方法，可将画布上的所有元素序列化为 JSON 对象，再通过 JSON.stringify() 转换为字符串，便于存储（如存入本地存储、后端数据库）。

var canvas = new fabric.Canvas('canvas');
// 创建一个矩形
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
canvas.add(rect);
// 序列化：转换为 JSON 字符串
var canvasJson = JSON.stringify(canvas.toJSON());
console.log('Canvas 序列化结果：', canvasJson);

7.2 JSON 反序列化（恢复 Canvas 状态）

通过 canvas.loadFromJSON() 方法，可将序列化后的 JSON 字符串反向解析，恢复 Canvas 上的所有元素状态，实现“保存-恢复”功能。

var canvas = new fabric.Canvas('canvas');
// 反序列化：从 JSON 字符串恢复 Canvas
canvas.loadFromJSON('{"objects":[
  {"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null}
]}');

7.3 SVG 格式支持

Fabric.js 还支持将 Canvas 元素转换为 SVG 格式，通过 canvas.toSVG() 方法可直接生成 SVG 字符串，便于用于打印、导出等场景。

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
canvas.add(rect);
// 转换为 SVG 字符串
var canvasSvg = canvas.toSVG();
console.log('Canvas 转换为 SVG：', canvasSvg);

八、参考资料与总结

本文整理了 Fabric.js 的核心用法，涵盖了 Vue 项目引入、图形绘制、图片操作、交互组合、序列化与反序列化等新手必备知识点，代码示例可直接复制测试，适合快速上手。 如果需要深入学习 Fabric.js 的高级功能（如滤镜效果、图层管理、自定义图形），可参考官方文档： http://fabricjs.com/articles/

总结：Fabric.js 是一款非常强大的 Canvas 封装库，它简化了原生 Canvas 的开发难度，让“对象化操作 Canvas”成为可能。对于前端新手来说，掌握本文中的核心用法，就能应对大多数 Canvas 开发场景，后续可根据项目需求，逐步探索其高级功能，解锁更多可视化玩法。