简介

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

官网文档地址：http://fabricjs.com/docs/

github地址：https://github.com/fabricjs/fabric.js

Demo地址：http://fabricjs.com/demos/

起步

• 引入

CDN引入：推荐使用bootcssCDN引入，bootcssCDN提供包括fabric等在内的众多库的引入服务

npm安装：npm install fabric --save

• 初始化demo

一个简单的canvas demo

通过fabric.Canvas获取到canvas元素，并可以对canvas进行相应的设置,既可以通过获取已存在的canvas元素，fabric也支持创建canvas元素，同样也能对其进行相应操作

• 与原生的异同

之前有一个需求是点鼠标左键并进行拖动，要实现实时在canvas上进行画图

于是分别用元生canvas和fabric制作了该功能，接下来我们对比下两者的异同

原生canvas

fabric.canvas

通过对比我们可以发现，跟原生写法比起来fabric写法更加直观也更加简洁设置相关属性也比原生的更加方便，并且在画线的过程中也显得更加的流程

API介绍

• 绘制图形

fabric.Rect({}) 方形

- left:0, // 距离画布左侧的距离

- top:0, // 距离画布上边的距离

- fill:'oink', // 背景颜色

- width:10, // 宽度

- height:10 // 高度

- 更多属性不一一赘述

fabric.Circle({}) 圆形

- 同方形

fabric.Triangle({}) 三角形

- 同方形

fabric.Pat({M x y L x1 y1 L x2 y2 z}) 多边形

- M表示起点，从坐标为x、y点起步，画到L x1、y1点 ，然后在画到L x2、y2点，最后z表示闭合改图形

fabric

- Image() 通过元素插入图片

- fromURL() 通过URL插入图片

• 事件

在fabric中，提供了很多不同的事件，下面介绍一部分常见的事件

更多更具体的事件可以参考http://fabricjs.com/docs/fabric.Object.html

mouse（鼠标事件）
- move：按下且移动
- down：按下时
- up：按下抬起时
- dblclick：双击时
- mouseout：离开元素时
- mousewheel：滚轮事件

selection
- created 初次选中图层
- updated 图层选择变化
- cleared 清空图层选中

after
- render画布重绘后

object（对象）
- selected：被选中
- deselected：取消选中
- moving：移动
- rotating：旋转
- added：添加
- removed：移除
- modified：调整

• set与get

obj.set()
通常设置属性的方式有两种，第一种是在绘制的时候添加进去。另一种是通过set方法设置
例：obj.set({color:''})
注意：需canvas.add(obj)刷新页面

obj.get() 

有set方法自然就有get方法
例：obj.getXXX 获取相应属性的属性值

• 组别

fabric.Group([x,y],{属性设置})
Group属性可以将x与y两个fabric实例组合成一个组别，在页面上显示出来

• 序列化和反序列化

toJSON（序列化）
- 导出画布信息
loadFromJSON（反序列化）
- 将导出的信息还原成画布

• 注意事项

obj.renderAll()
所有图层的操作之后，都需要调用这个方法刷新
obj.add()
将场景加入画布中

操作案例

• 图层移动

// 上移图层 
obj.bringForward(); 

// 下移图层 
obj.sendBackwards(); 

// 使用canvas对象的moveTo方法，移至图层到指定位置 
card.moveTo(obj, index);

// 旋转图层
obj.rotate(angle)

// 翻转图层,沿着X轴或者Y轴翻转
obj.set({
 scaleX/Y: -this.selectedObj.scaleX/Y,
})

// 删除图层
obj.remove()

在进行相应操作后都需要canvas.renderAll()重新刷新画布，否则操作不生效

• 查询组件

canvas.item(index:number)
查找第index个添加到canvas的组件

总结

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