JavaScript绘图库-Fabric.js
2025-02-15 17:28:27 
阿炯
Fabric.js 是一个在服务器端运行的 Node.js 扩展模块，用于在 Web 上绘制各种图形的 JS 库。为一款简单而强大的 JavaScript Canvas 库，在 HTML5 Canvas 元素之上提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。采用MIT协议授权使用。
使用 Fabric.js 可以创建和填充画布上的对象，从简单的几何图形到成百上千路径组成的复杂图形。可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等。
示例代码：
var fabric = require('fabric').fabric,
canvas = fabric.createCanvasForNode(200, 200);
canvas.add(new fabric.Rect({
top: 100,
left: 100,
width: 100,
height: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
}));
var out = require('fs').createWriteStream(__dirname + '/rectangle.png'),
stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
});
最新版本：6
2025年2月发布的6.6版本更新内容如下：
Typo：修复 Id -> If BorderProps.ts Types description
chore(test)：为 color.test.ts 添加测试
feat：添加 method toBlob
允许 PencilBrush 子类访问字段
fix(image.ts)：在 setElement 函数中使访问 HtmlImage 的 classList 成为可选的，以防止在使用 node canvas 图像时出现错误
feat()：将 webp 添加到 ImageFormat
最新版本：7
2026年1月上旬发布的7.0版本更新内容如下：
feat()：裁剪控件扩展
chore()：渲染圆形控件调整，以提高代码复用性与样式
正确检查 calcOwnMatrix 中的 cache key equality
chore(deps-dev)：将 npm_and_yarn 组中 js-yaml 的版本从 3.14.1 升级到 3.14.2（涉及 1 个目录）
fix(Text)：在文本中设置 deltaY 后导出 SVG 时出现双重偏移
项目主页：https://fabric5.fabricjs.com/
使用 Fabric.js 可以创建和填充画布上的对象，从简单的几何图形到成百上千路径组成的复杂图形。可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等。
示例代码：
var fabric = require('fabric').fabric,
canvas = fabric.createCanvasForNode(200, 200);
canvas.add(new fabric.Rect({
top: 100,
left: 100,
width: 100,
height: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
}));
var out = require('fs').createWriteStream(__dirname + '/rectangle.png'),
stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
});
最新版本：6
2025年2月发布的6.6版本更新内容如下：
Typo：修复 Id -> If BorderProps.ts Types description
chore(test)：为 color.test.ts 添加测试
feat：添加 method toBlob
允许 PencilBrush 子类访问字段
fix(image.ts)：在 setElement 函数中使访问 HtmlImage 的 classList 成为可选的，以防止在使用 node canvas 图像时出现错误
feat()：将 webp 添加到 ImageFormat
最新版本：7
2026年1月上旬发布的7.0版本更新内容如下：
feat()：裁剪控件扩展
chore()：渲染圆形控件调整，以提高代码复用性与样式
正确检查 calcOwnMatrix 中的 cache key equality
chore(deps-dev)：将 npm_and_yarn 组中 js-yaml 的版本从 3.14.1 升级到 3.14.2（涉及 1 个目录）
fix(Text)：在文本中设置 deltaY 后导出 SVG 时出现双重偏移
项目主页：https://fabric5.fabricjs.com/