透過 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

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。