fabricjs上手指南

fabricjs是一个canvas的库，本来canvas的操做主要基于上下文，须要使用者本身从0开始去实现一些基本功能。而canvas库文件封装好了许多便利的对象，这些canvas库使得用户能够在比较高级的层面上进行绘制。fabricjs就是其中之一。

上手建议：官方api写得比较简洁，建议先看看官方 快速教程，也能够参考这部 中文教程

使用fabricjs的新手套路：

1. 建立fabric的canvas对象。
2. 建立fabric的各类对象，包括：rect，circle，line，image等。
3. 将建立好的对象添加到canvas。
4. 能够对每个fabric对象使用动画，克隆，修改属性，事件监听，碰撞检测等。修改属性需及时渲染canvas才能展现出效果。

fabricjs使用注意要点：

1. 每次修改对象的参数后须要执行canvas.renderAll()从新渲染，不然不会出效果。
2. fabric对象用acoords参数（bl，br，tl，tr）【大概是topleft，bottomright的意思】表达本身所在canvas中的位置。 每次更改了对象的位置，大小时（好比left，width），若要canvas感知该对象的具体位置（用于对象间碰撞边缘检测，或事件响应），须要使用setCoords方法重设对象的四个角坐标。

介绍下经常使用的配置参数，这些配置参数可用来配置fabric对象
width宽：number,
height高：number,
fill填充颜色：string,
stroke描边颜色:string,
strokeWidth描边宽度：number,
angle角度:number,
left左边距:number,
top上边距:number,
originX横轴中心点:['center'|'left'|'right],
originY纵轴中心点:['center|'top'|'bottom'],
flipX水平翻转:boolean,
flipY垂直翻转：boolean,

更多配置参数请参考：fabric.Object，以及其子类

介绍下官方相应的demo
事件
动画
克隆
边缘检测
精灵动画
分组和取消分组