透過 fabric.js 建置圖片編輯的 canvas

之前提到可以使用 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 應用，之後有機會再來多講一些。

參考：使用Fabric.js玩轉canvas