使用Fabric.js玩轉canvas

Sugars發表於2019-02-02
JSCanvas

使用Fabric.js玩轉canvas

前言

之前使用這個框架寫過一個卡片DIY的專案，中間遇到很多問題都只能通過google或github issues才能解決，國內資料較少，所以才想寫這篇文章來簡單的做下總結，希望可以幫到其他人哈。

附上個人專案地址：vue-card-diy 歡迎star~ ✨

什麼是Fabric.js?

Fabric.js 是一個強大的H5 canvas框架，在原生canvas之上提供了互動式物件模型，通過簡潔的api就可以在畫布上進行豐富的操作。

該框架是個開源專案，專案地址： github

Fabric.js有什麼功能？

使用Fabric.js，你可以在畫布上建立和填充物件; 比如簡單的幾何形狀 - 矩形，圓形，橢圓形，多邊形，自定義圖片或由數百或數千個簡單路徑組成的更復雜的形狀。 另外，還可以使用滑鼠縮放，移動和旋轉這些物件； 修改它們的屬性 - 顏色，透明度，z-index等。也可以將畫布上的物件進行組合。下面我將會介紹我常用的功能以及場景，更多功能可以參考 官方文件

安裝

npm安裝

npm install fabric --save
複製程式碼

通過cdn引用

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
複製程式碼

初始化

首先在html頁面中寫一個350 x 200的canvas標籤, 這裡不寫寬高也行，後面可以通過js來設定寬高

<canvas id="canvas" width="350" height="200"></canvas>
複製程式碼

初始化fabric的canvas物件，建立一個卡片（後面都用card表示畫布物件）

const card = new fabric.Canvas('canvas') 

// ...這裡可以寫canvas物件的一些配置，後面將會介紹

// 如果<canvas>標籤沒設定寬高，可以通過js動態設定
card.setWidth(350)
card.setHeight(200)
複製程式碼

就是這麼簡單，這樣就建立了一個基本的畫布。

開始花樣操作

監聽畫布上的事件

官方提供了很多事件，以下為常用的事件：

  • object:added 新增圖層
  • object:modified 編輯圖層
  • object:removed 移除圖層
  • selection:created 初次選中圖層
  • selection:updated 圖層選擇變化
  • selection:cleared 清空圖層選中
// 在canvas物件初始化後，通過以下方式監聽
// 比如監聽畫布的圖層編輯事件
card.on('object:modified', (e) => {
    console.log(e.target) // e.target為當前編輯的Object
    // ...旋轉，縮放，移動等編輯圖層的操作都監聽到
    // 所以如果有撤銷/恢復的場景，這裡可以儲存編輯狀態
});
複製程式碼

設定畫布背景

使用Fabric.js玩轉canvas

// 讀取圖片地址，設定畫布背景
fabric.Image.fromURL('xx/xx/bg.jpg', (img) => {
  img.set({
   // 通過scale來設定圖片大小，這裡設定和畫布一樣大
    scaleX: card.width / img.width,
    scaleY: card.height / img.height,
  });
  // 設定背景
  card.setBackgroundImage(img, card.renderAll.bind(card));
  card.renderAll();
});
複製程式碼

如果要設定畫布的背景顏色，可以在canvas初始化時設定

const card = new fabric.Canvas('canvas', {
  backgroundColor: 'blue' // 畫布背景色為藍色
});

// 或者
card.backgroundColor = 'blue';

// 或者
card.setBackgroundColor('blue');
複製程式碼

向畫布新增圖層物件

fabric.js提供了很多物件，除了基本的 Rect，Circle，Line，Ellipse，Polygon，Polyline，Triangle物件外，還有如 Image，Textbox，Group等更高階的物件，這些都是繼承自Fabric的Object物件。

下面我就介紹如何新增圖片和文字，其他物件大同小異

/**
* 如何向畫布新增一個Image物件？
*/

// 方式一（通過img元素新增）
const imgElement = document.getElementById('my-image');
const imgInstance = new fabric.Image(imgElement, {
  left: 100, // 圖片相對畫布的左側距離
  top: 100, // 圖片相對畫布的頂部距離
  angle: 30, // 圖片旋轉角度
  opacity: 0.85, // 圖片透明度
  // 這裡可以通過scaleX和scaleY來設定圖片繪製後的大小，這裡為原來大小的一半
  scaleX: 0.5, 
  scaleY: 0.5
});
// 新增物件後, 如下圖
card.add(imgInstance);
複製程式碼

使用Fabric.js玩轉canvas

// 方式二（通過圖片路徑新增）
fabric.Image.fromURL('xx/xx/vue-logo.png', (img) => {
  img.set({
    hasControls: false, // 是否開啟圖層的控制元件
    borderColor: 'orange', // 圖層控制元件邊框的顏色
  });
  // 新增物件後, 如下圖
  canvas.add(img);
});
複製程式碼

使用Fabric.js玩轉canvas

/**
* 如何向畫布新增一個Textbox物件？
*/

const textbox = new fabric.Textbox('這是一段文字', {
    left: 50,
    top: 50,
    width: 150,
    fontSize: 20, // 字型大小
    fontWeight: 800, // 字型粗細
    // fill: 'red', // 字型顏色
    // fontStyle: 'italic',  // 斜體
    // fontFamily: 'Delicious', // 設定字型
    // stroke: 'green', // 描邊顏色
    // strokeWidth: 3, // 描邊寬度
    hasControls: false,
    borderColor: 'orange',
    editingBorderColor: 'blue' // 點選文字進入編輯狀態時的邊框顏色
});
// 新增文字後，如下圖
card.add(textbox);
複製程式碼

使用Fabric.js玩轉canvas

獲取當前選中的圖層物件

// 方式一
this.selectedObj = card.getActiveObject(); // 返回當前畫布中被選中的圖層 

// 方式二
card.on('selection:created', (e) => {
    // 選中圖層事件觸發時，動態更新賦值
    this.selectedObj = e.target
})
複製程式碼

旋轉圖層

// 順時針90°旋轉
const currAngle = this.selectedObj.angle; // 當前圖層的角度
const angle = currAngle === 360 ? 90 :currAngle + 90;
this.selectedObj.rotate(angle);
// 如果是通過滑塊的方式控制旋轉
// this.selectedObj.rotate(slideValue);

// 所有圖層的操作之後，都需要呼叫這個方法
card.renderAll()
複製程式碼

翻轉圖層

// 水平翻轉，同理垂直翻轉改為scaleY屬性
this.selectedObj.set({
    scaleX: -this.selectedObj.scaleX,
})

card.renderAll()
複製程式碼

移除圖層

card.remove(this.selectedObj) // 傳入需要移除的object
card.renderAll()
複製程式碼

控制畫布上的圖層層級

向畫布新增圖層，預設是依次往上疊加，但是當你選中一個圖層進入active狀態時，該圖層會預設置於頂層，如果像禁止選中圖層時指定，可以：

// 在畫布初始化後設定
card.preserveObjectStacking = true // 禁止選中圖層時自定置於頂部
複製程式碼

設定之後，我選中vue logo就是這個樣子，不會置頂。

使用Fabric.js玩轉canvas

如何上移和下移圖層？

// 上移圖層
this.selectedObj.bringForward();

// 下移圖層
this.selectedObj.sendBackwards();

// 也可以使用canvas物件的moveTo方法，移至圖層到指定位置
card.moveTo(object, index);
複製程式碼

畫布狀態記錄

框架提供瞭如 toJSON 和 loadFromJSON 方法，作用分別為匯出當前畫布的json資訊，載入json畫布資訊來還原畫布狀態。

// 匯出當前畫布資訊
const currState = card.toJSON(); // 匯出的Json如下圖
複製程式碼

使用Fabric.js玩轉canvas

// 載入畫布資訊
card.loadFromJSON(lastState, () => {
  card.renderAll();
});
複製程式碼

將畫布匯出成圖片

const dataURL = card.toDataURL({
  format: 'jpeg', // jpeg或png
  quality: 0.8 // 圖片質量，僅jpeg時可用
  // 擷取指定位置和大小
  //left: 100, 
  //top: 100,
  //width: 200,
  //height: 200
});
複製程式碼

Fabric.js的基本介紹就到這裡，這個框架很強大，還有很多功能可以去試試，歡迎大家評論交流哈！

如轉載本文請註明文章作者及出處！

相關文章