簡介
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顯得友好
閱讀更多 前端學習日記 的文章
