Fabric.js 简单强大的 Canvas 图形编辑库

Question

Fabric 是一个强大而简单的 JS Canvas 库，我们能通过使用它实现在 Canvas 上创建、填充图形、给图形填充渐变颜色。 组合图形（包括组合图形、图形文字、图片等）等一系列功能。简单来说我们可以通过使用 Fabric 从而以较为简单的方式实现较为复杂的 Canvas 功能。

• 官网文档地址：http://fabricjs.com/docs/github
• 地址：https://github.com/fabricjs/fabric.js
• Demo地址：http://fabricjs.com/demos/
• NPM 地址：https://www.npmjs.com/package/fabric
• 中文文档：https://www.wenjiangs.com/docs/fabric-js

什么是 Fabric.js？

Fabric.js 是一个可以简化 Canvas 程序编写的库。 Fabric.js 为 Canvas 提供所缺少的对象模型、 svg 解析器、用户交互和一整套其他不可或缺的工具。由于 Fabric.js 为国外框架，官方 API 杂乱繁多，相关文档大多为英文文档，而且数量不多，所以本文旨在帮助新手在项目中快速上手 Fabric.js，享受绘制 Canvas 的过程。

为什么要使用Fabric.js？

Canvas 提供一个好的画布能力, 但是 Api 不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么方便了。Fabric.js 就是为此而开发，它主要就是用对象的方式去编写代码。

Fabric.js 能做的事情

• 在 Canvas 上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
• 给图形填充渐变颜色。
• 组合图形（包括组合图形、图形文字、图片等）。
• 设置图形动画集用户交互。
• 生成 JSON、SVG 数据等。
• 生成 Canvas 对象自带拖拉拽功能。

安装 Fabric.js

假设您的项目中正在使用 ES6 和 Webpack，您可以开始使用 Fabric.js，如下所示：

1、在命令行中：

npm install fabric（或yarn add fabric）

2、将其引入 .vue 文件中

import { fabric } from 'fabric'

3、在 .vue 的单文件中的 mounted: 生命周期里开始你的 Fabric.js 之旅啦

注：默认的 fabric npm 模块产生了相当大的包，如果 Fabric.js 中您有很多可能不需要的包，在这种情况下，可以在命令行中构建你自己的版本。

绘制图形

1、声明画布

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

2、绘制图形

var rect = new fabric.Rect({
  left:100,//距离画布左侧的距离，单位是像素
  top:100,//距离画布上边的距离
  fill:'red',//填充的颜色
  width:30,//方形的宽度
  height:30//方形的高度
});

3、添加图形至画布

canvas.add(rect);

总结

Fabric 的功能显得十分的强大，可以实现多样的效果，但由于时间局限，只是稍微整理了一下Fabric，但是Fabric还有许多的功能没有使用到，这部分的内容就需要在后续的开发过程中继续深入挖掘了，或者通过查看文档来加深了解