Fabric.js — 一个功能强大的 Javascript 库，使使用 HTML5 画布变得轻而易举。Fabric 为画布提供了一个缺失的对象模型，以及一个 SVG 解析器、交互层和一整套其他不可或缺的工具。这是一个完全开源的项目，在MIT许可，多年来做出了许多贡献。
Fabric 始于 2010 年左右，当时它发现了使用原生canvas API 的痛苦。原作者正在为 printio.ru 创建一个交互式设计编辑器 - 他的创业公司允许用户设计自己的服装。他们想要的那种交互性在那些日子里只存在于Flash应用程序中。即使是现在，也很少有人能接近 Fabric 的可能。
Why fabric?
canvas画布允许我们在网络上创建一些绝对惊人的图形这些天。但它提供的API是令人失望的低级。如果我们只是想在canvas画布上画几个基本形状而忘记它们，这是一回事。但是，一旦需要任何类型的交互，在任何一点上改变图片，或者绘制更复杂的形状 - 位置就会发生巨大变化。
Fabric 目标就是解决这些困难问题.
原生canvas api只允许我们触发简单的图形命令，修改整个画布位图操作繁琐。想要绘制矩形？使用fillRect(left, top, width, height)。想画一条线吗？使用moveTo(left, top) 和 lineTo(x, y)的组合。就好像我们用画笔画画布，在上面分层越来越多的油，几乎没有控制。
而不是在如此低的级别上操作，Fabric在原生 api 之上提供了简单但功能强大的对象模型。它负责画布状态和渲染，并允许我们直接处理“object”。
让我们看一个演示这种差异的简单示例。假设我们想在画布上的某个地方画一个红色的矩形。以下是我们如何使用本机
原生api 绘制
// reference canvas element (with id="c")
var canvasEl = document.getElementById('c');
// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvasEl.getContext('2d');
// set fill color of context
ctx.fillStyle = 'red';
// create rectangle at a 100,100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);fabric 绘制
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
canvas.add(rect);请注意一个非常重要的区别。使用 Fabric，在尝试“修改”任何内容之前，我们不再需要擦除内容。我们仍然使用对象，只需更改其属性，然后重新渲染画布以获得“新鲜图片”。
Objects
fabric 的7个基本形状
- fabric.Circle
- fabric.Ellipse
- fabric.Line
- fabric.Polygon
- fabric.Polyline
- fabric.Rect
- fabric.Triangle
如添加一个圆、三角形：
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);Manipulating objects 图层对象操作
创建图形对象 - 矩形，圆形或其他内容 - 当然只是一个开始。在某些时候，我们可能想要修改这些对象。也许某些操作需要触发状态的更改，或播放某种动画。或者，我们可能想要更改某些鼠标交互的对象属性（颜色、不透明度、大小、位置）。
Fabric 负责画布渲染和状态管理。我们只需要修改对象本身。
前面的示例演示了 set 方法以及如何从上一个位置调用 set({ left: 20, top: 50 })“移动”对象。以类似的方式，我们可以更改对象的任何其他属性。但这些属性是什么呢？
好吧，正如您所期望的那样，有与定位相关的那些 - left, top;尺寸 ― width, height；渲染 ― fill, opacity, stroke, strokeWidth;缩放和旋转 — scaleX, scaleY, angle;甚至那些与翻转相关的 -flipX, flipY和skewX, skewY
可以通过get 、set 方法获取或设置属性的方法调整图层对象显示
var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);Hierarchy and Inheritance 层次和继承
fabric 对象不仅仅是彼此独立存在。它们形成了一个非常精确的层次结构。
绝大多数fabric 图层对象都是继承fabric.Object
fabric.Object.prototype.getAngleInRadians = function() {
return this.get('angle') / 180 * Math.PI;
};
var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // trueCanvas
使用fabric 库，首先就是要先初始化一个画板canvs， 用户后续所有内容的呈现。
显示内容通过add、remove进行维护，显示图层对象有根据顺序进行渲染绘制叠加。
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
canvas.remove(rect); // remove previously-added fabric.Rect设置画板canvas的 背景、选择颜色、选择线宽度
var canvas = new fabric.Canvas('c', {
backgroundColor: 'rgb(100,100,200)',
selectionColor: 'blue',
selectionLineWidth: 2
// ...
});
// or
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://...');
canvas.onFpsUpdate = function(){ /* ... */ };
// ...Interactivity 用户交互
当我们讨论画布元素的主题时，让我们谈谈交互性。Fabric 的一个独特功能（内置于此）是在我们刚刚看到的所有方便的对象模型之上的交互性层。
对象模型的存在是为了允许以编程方式访问和操作画布上的对象。但在外部，在用户级别上，有一种方法可以通过鼠标（或触摸，在触摸设备上）操作这些对象。一旦您通过新结构初始化画布。Canvas（'...'），可以选择对象，拖动它们，缩放或旋转它们，甚至组合在一起以在一个块中进行操作！
设置图层是否可以选择
var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable如果想整个内容都不能选择，可以使用staticCanvas 替代Canvas
var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
new fabric.Rect({
width: 10, height: 20,
left: 100, top: 100,
fill: 'yellow',
angle: 30
}));Images 图层
(html)
(js)
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});fabric.Image.fromURL('my_image.png', function(oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(0.5).set('flipX', true);
canvas.add(oImg);
});Paths
我们先看了简单的形状，然后是图像。那么更复杂、更丰富的形状和内容呢？
认识一下 - 路径path和组group。
Fabric 中的路径表示形状的轮廓，可以通过其他方式填充、描边和修改该轮廓。路径由一系列命令组成，这些命令基本上模仿笔从一个点到另一个点。在“移动”，“线”，“曲线”或“弧”“move”, “line”, “curve”, or “arc”,等命令的帮助下，路径可以形成非常复杂的形状。在路径组（PathGroup）的帮助下，可能性更加开放。
var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);出于好奇，让我们看一个稍微复杂的路径语法。您就会明白为什么手动创建路径可能不是最好的主意。
...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));代码设计分析
代码结构：
对象继承关系如下