征得社区同意，我部署了一份Fabricjs中文站点翻译原网站，注释掉了一些无关的信息，受限于个人精力和英语水平，希望感兴趣的小伙伴一起来建设。 参与方式：每篇文章下面有对应的github地址，进去在线编辑，编辑完提交即可，我每天会merge，build。
本文来自于Fabricjs中文版，这个站点是我经过社区允许后部署的一份国内版，希望招募同样对fabricjs感兴趣的人一起来翻译建设，在每篇文章下面都有提PR的链接，只要使用github在写编辑即可
今天 我要向你们介绍 Fabric.js — 一个能够让你轻而易举操作canvas的神奇的库. Fabric 不仅提供了一个虚拟canvas对象, 还有svg渲染器, 交互层, 还有一整套十分有用的工具. 这是一个完全开源的项目, MIT协议, 多年以来依靠许多贡献者共同维护.
Fabric 开始与2010, 在经历过原生canvas 繁琐的API操作之后. 原作者就写了一个可交互的编辑器 printio.ru — 允许用户自定义外观. 因为他的创业公司业务是允许用户设计自己的服装。那种交互性当时只存在于 Flash 应用程序中。即使是现在，也很少有人能接近 Fabric 达到的成就.
让我们进一步看一看!
为什么选择fabric? 现在的Canvas 支持我们去创造一些 充满创造力 神奇的 图形 但是它提供的api实在是 水平低到令人发指. 如果我们只是想画一些简单的图形. 但是却需要一系列操作, 各种修改中心点, 如果要画一个复杂图形 — 那操作就“更有意思了”.
Fabric 的目标就是解决这些问题.
原生 canvas 方法 只允许我们使用一些简单的图形操作, 然后在画布上瞎子摸象. 想画一个矩形? 使用 fillRect(left, top, width, height). 想画一条线? 用 moveTo(left, top) 和 lineTo(x, y)组合. 这感觉就像 用画笔在画布上画画, 随着画的越来越多, 画布内容的可控性就越差.
为了避免这种低水平操作, Fabric 在基础上提供了一个简单且强大的对象模型. 更注重于画布的状态和渲染, 现在, 让我们开始学习使用 “对象”吧.
让我们通过一个简单的例子 画一个红色的矩形 来看看两者有什么不同. 这是原生 API的实现
// 获取画布的引用
var canvasEl = document.getElementById('c');
// 获取2d context 对象 用来操作 (之前提到的bitmap)
var ctx = canvasEl.getContext('2d');
// 给当前上下文设置颜色
ctx.fillStyle = 'red';
// 在100, 100的位置创建一个20*20的矩形
ctx.fillRect(100, 100, 20, 20);
现在，让我们看看fabricjs怎么实现同样的效果:
// 包裹一下canvas (with id="c")
var canvas = new fabric.Canvas('c');
// 新建一个矩形对象
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// 将矩形添加到canvas里
canvas.add(rect);
目前为止, 最不同的地方在尺寸的设置 — 两个例子很像. 但是你应该也意识到两种操作思想的不同了吧. 用原生方法, 我们 操作context上下文 — 代表着整个canvas. 用 Fabric, 我们 在具体对象上操作 — 实例化它们, 修改他们的属性, 然后给它们添加到canvase上. 这些对象是fabricjs世界的第一公民.
但是画一个红色的矩形没啥难度. 我们来整点有意思的! 比如, 稍微的旋转一下?
我们试试旋转45度. 首先, 使用原生 方法:
var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);
接下来使用fabric:
var canvas = new fabric.Canvas('c');
// create a rectangle with angle=45
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
发生了什么?
我们只需要修改对象的's “angle” 为 45. 使用原生方法, 事情变得越来越 “有趣了”. 我们不能操作对象. 反而为了实现需求, 我们给整个 canvas bitmap旋转了 (ctx.translate, ctx.rotate). 然后在画矩形上去, 别忘了原点定位为 (-10, -10), 这样才能看起来是在(100, 100).
现在我确信你已经清楚了fabricjs存在的意义，还有他帮助我门减少了多少低级代码.
