簡介
Fabric是一個強大而簡單的JS Canvas庫，我們能通過使用它實現在Canvas上創建、填充圖形、給圖形填充漸變顏色。 組合圖形（包括組合圖形、圖形文字、圖片等）等一系列功能。簡單來說我們可以通過使用Fabric從而以較為簡單的方式實現較為複雜的Canvas功能
官網文檔地址：http://fabricjs.com/docs/github地址：https://github.com/fabricjs/fabric.jsDemo地址：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與getobj.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顯得友好