Fabric.js 中文教程詳解

一、Fabric.js 簡介

Fabric.js 是一個強大的 HTML5 canvas 庫，提供了對 canvas 元素的高級封裝，使開發者可以更加方便和快捷地創建複雜的 Canvas 應用。它是免費、開源、輕量級且易於使用的，擁有豐富的交互功能和高性能的渲染引擎。

二、基本概念

Fabric.js 為 canvas 提供了一些新的概念，並在其基礎上擴展了一些新功能。在使用 Fabric.js 時，需要了解以下幾個概念：

1. Canvas 對象

在使用 Fabric.js 時，需要首先創建一個 Canvas 對象。使用 Fabric.js 創建Canvas對象非常簡單：先在HTML文件中創建一個canvas標籤，然後通過以下JS代碼創建一個Canvas對象：

var canvas = new fabric.Canvas('c');

其中，’c’表示HTML中的canvas標籤id屬性。通過創建的Canvas對象，就可以操作canvas中的元素。

2. Fabric 對象

在 Fabric.js 中，Canvas 對象被稱為 Fabric 對象。通過該對象可以訪問Fabric.js提供的所有方法和屬性。

3. 對象

Fabric.js 中任何一個繪製在 Canvas 上的元素都被稱為對象。這個元素可以是一個文本框、一張圖片、一個矩形、一個圓形等。Fabric.js 提供了一些基本的對象類型，同時也允許定義自定義對象類型。

4. Canvas 物體（Canvas Object）

在 Fabric.js 中，Canvas 對象中所有的元素都被稱為「Canvas 物體」。Canvas 物體是一個具體元素的實例，例如，一個圖片對象就是一個 Canvas 物體，一個矩形對象也是一個 Canvas 物體。 Canvas 物體繼承自CanvasObject類，它提供了位置、大小、旋轉、縮放等基本屬性。

5. Group（組合）

組合是 Fabric.js 中非常有用的一種機制，它可以將多個物體組合在一起作為一個整體來處理。組合對象可以使操作方便，同時也能夠提高性能。

三、常用操作

1. 繪製形狀和文本

使用 Fabric.js 創建矩形、圓形等形狀非常簡單，通過以下代碼即可實現：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 50,
  height: 50
});

canvas.add(rect);

同樣，繪製文本也很簡單：

var text = new fabric.Text('Hello World!', { 
  left: 100, 
  top: 100,
  fontSize: 30 
});

canvas.add(text);

2. 圖片操作

通過 Fabric.js，可以將圖片或者其他媒體文件插入到 Canvas 中，並對其進行操作。以下代碼實現了添加圖片和縮放圖片：

fabric.Image.fromURL('myImage.png', function(img) {
  canvas.add(img);

  img.scaleToWidth(200);
});

3. 交互功能

Fabric.js 提供了很多交互功能，包括鼠標拖拽、點擊、雙擊等事件。以下代碼實現鼠標拖拽和雙擊事件：

rect.on('mousedown', function() {
  console.log('Mouse down!');
});

rect.on('mouseup', function() {
  console.log('Mouse up!');
});

rect.on('doubleClick', function() {
  console.log('Double click!');
});

4. 應用場景

Fabric.js 可以應用於很多場景，如圖像編輯器、遊戲開發等。以下是一個簡單的實現圖像裁剪的代碼：

var clipRect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  fill: 'transparent',
  strokeWidth: 2,
  stroke: '#000'
});

canvas.add(clipRect);

canvas.set({
  'selection': false
});

canvas.forEachObject(function(obj){
  obj.selectable = false;
});

canvas.on('mouse:move', function(opt){
  var e = opt.e;
  var zoom = canvas.getZoom();
  var rect = clipRect;

  var mouse = canvas.getPointer(opt.e);

  var x = Math.min(mouse.x, clipRect.left),
      y = Math.min(mouse.y, clipRect.top),
      w = Math.abs(mouse.x - clipRect.left),
      h = Math.abs(mouse.y - clipRect.top);

  clipRect.set({ width: w, height: h, left: x, top: y });
  canvas.renderAll();
});

四、總結

以上只是 Fabric.js 的一些簡單應用和操作，當然，Fabric.js 的功能遠不止這些。如果你想深入了解它，可以參考它的官方文檔。Fabric.js 的語法簡單易學，而且它兼容所有現代瀏覽器，所以在Web應用開發中使用它肯定是個不錯的選擇。