之前提到可以使用 fabric.js 來製作一些有趣的互動效果，這邊就來說一下該如何設置以及基本使用。
首先可以透過 npm 安裝：
npm install fabric --save
或是使用 cdn：
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
接著設置一個 canvas 等等準備來操作：
<canvas id="canvas" width="350" height="200"></canvas>
初始化 fabric：
const card = new fabric.Canvas('canvas')
//重新設置 canvas 寬高
card.setWidth(350)
card.setHeight(200)
接著來監聽畫布的事件，以下為常用的事件：
object:added添加圖層object:modified編輯圖層object:removed移除圖層selection:created初次選中圖層selection:updated圖層選擇變化selection:cleared清空圖層選中
比如監聽畫布修改的事件：
card.on('object:modified', (e) => {
console.log(e.target) // e.target為當前編輯的Object
});
接著來在 canvas 上添加圖層，可以參考如下程式碼：
fabric.Image.fromURL('/images/pg-psharp.png', (img) => {
img.set({
hasControls: true, // 是否開啟圖層的控件
borderColor: 'green', // 圖層控件邊框的顏色
});
card.add(img);
});
這樣就做好基本的 fabric.js 應用，之後有機會再來多講一些。
![[Disqus API] 取得最新留言](/assets/upload/1642681865812_0.jpg)
![[Web Components] Wired Elements 有趣的手寫風格 UI 元件](/assets/upload/1671415554645_0.jpg)
![[Vue.js] 如何在 .vue 檔案內使用 .vue 檔的方法](/assets/upload/1583563899683_0.jpg)
