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
事件
動畫
克隆
邊緣檢測
精靈動畫
分組和取消分組