Fabric.js知多少（一）

fabric.js是什么

Fabric.js是一个封装了canvas api的库，与市面上大多数canvas库一样，fabric.js支持众多效果

Why

首先我们来看看目前各大库的对比当然，three.js以绝对的优势占据star榜第一位，three.js相信绝大部分前端人都用过。

但是他们的侧重点不同。

fabric.js为canvas元素提供了交互式对象模型，Fabric还具有SVG到画布（和画布到SVG）解析器。使用Fabric.js，您可以在画布上创建和填充对象。简单的几何形状之类的对象。
而three.js更侧重于3D、纹理等相关。

如果你在寻找一个支持node-canvas，或者支持交互式对象模型的canas库的话，那么恭喜你，找到了！

How

对比

fabric.js很简单，你可以轻松入门
假如你需要在canvas中画一个正方形：

const canvas = document.queryselector('#canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
//画矩形
ctx.fillRect(100, 100, 20, 20);

而使用fabric.js

const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
});
canvas.add(rect);

这里可以很明显的看出，fabric.js基于一个对象去画出了一个红色填充的矩形。
这里可能会有人问：为什么我觉得这两种方案差不多呢？大家别着急，这只是最基本的比较，我们此时想画一个更复杂的矩形，这个矩形带有border，有角度，并且可以被拖动：

const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle:20,
    lockMovementX:false,
    lockMovementY:false,
    evented:true,
    stroke: "rgba(255, 255, 255, 1)",
    strokeWidth: 2
});
canvas.add(rect);

怎么样，只需要在new fabric.Rect时，在其对象属性中年增加对应的值，那么画布就一定能过会渲染出来，并且可以随意拖动、缩放、旋转。

fabric.js 对象类型

image: 图片类型
textbox: 文字类型
rect: 矩形
circle: 圆形
group: 组
path: svg
polygon: 多边形
line: 线条
…… fabric.js支持多种类型，具体的可以去查阅官方文档

结语

好了，今天就先到这里，咱们下期再讲