在真正開始動手做之前先來了解 fabric.js 有哪些面向吧！
就算功能沒學起來至少知道未來可以朝什麼方向下關鍵字XD

核心模塊介紹

分為這幾個區塊：

• 畫布管理（Canvas Management）
• 物件操作（Object Manipulation）
• 群組管理（Group Management）
• 動畫效果（Animation）
• Parser 格式轉換
• 事件系統（Event System）
• 繪圖工具（Drawing Tools）

以下介紹個別區塊可以達成、負責的事，以及列出常見的 api

畫布管理（Canvas Management）

畫布本體：Canvas 模塊是 Fabric.js 的核心部分，負責管理整個畫布。

• 渲染：負責將所有添加到畫布上的物件繪製到屏幕上。
• 事件監聽：處理用戶的互動，如點擊、拖動和縮放等。
• 物件管理：管理畫布上的所有物件，包括添加、移除和更新物件。

畫布操作 API

• 添加物件 (add)
• 移除物件 (remove)
• 清除畫布 (clear)
• 縮放 (zoomToPoint)
• 平移 (relativePan)
• 事件處理 (on, off)

以下做簡單的舉例：

1. 添加物件 (add)

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

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

canvas.add(rect);

2. 移除物件 (remove)

canvas.remove(rect);

3. 清除畫布 (clear)

canvas.clear();

4. 縮放 (zoomToPoint)

const zoomPoint = new fabric.Point(100, 100);
canvas.zoomToPoint(zoomPoint, 2); // 將畫布縮放到2倍

5. 平移 (relativePan)

const panPoint = new fabric.Point(50, 50);
canvas.relativePan(panPoint); // 將畫布平移50像素

6. 事件處理 (on, off)

// 添加事件監聽器
canvas.on('mouse:down', function(event) {
  console.log('Mouse down at', event.pointer);
});


// 移除事件監聽器
canvas.off('mouse:down');

物件操作（Object Manipulation）

畫布上的物件：所有的物件（例如 fabric.Rect, fabric.Circle, fabric.Text 等）都繼承自 fabric.Object，是所有可繪製物件的基礎。它提供了通用的屬性和方法，如位置、大小、旋轉等。

• 屬性 Properties：
  提供物件的基本屬性可供設置與修改，如位置（left, top）、大小（width, height）、顏色(color)等。
• 形變 Transform：
  提供操作物件形變，如移動、縮放（scale()）、旋轉（rotate())、傾斜（skewX() 和 skewY())等。
• 繼承：
  其他具體的物件類型（如 Rect, Circle 等）都繼承自 Object 模塊。

常見的 fabric.Object 屬性

1. 位置和尺寸

   • left: 物件的左邊位置
   • top: 物件的頂部位置
   • width: 物件的寬度
   • height: 物件的高度
   • scaleX: 物件的水平縮放比例
   • scaleY: 物件的垂直縮放比例
   • angle: 物件的旋轉角度

2. 外觀

   • fill: 填充顏色
   • stroke: 邊框顏色
   • strokeWidth: 邊框寬度
   • opacity: 透明度
   • shadow: 陰影效果

3. 行為

   • selectable: 是否可選擇
   • evented: 是否觸發事件
   • visible: 是否可見
   • hasControls: 是否顯示控制點
   • hasBorders: 是否顯示邊框

4. 其他

   • clipPath: 剪裁路徑
   • globalCompositeOperation: 全局合成操作（例如 source-over, destination-over 等）

fabric.Object 詳細官方文件：http://fabricjs.com/docs/fabric.Object.html

屬性的設置使用起來像這樣：

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

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  
  fill: 'red',
  opacity: 0.7,
  stroke: 'blue',
  strokeWidth: 2,

  angle: 45,
  selectable: true,
});

canvas.add(rect);

或是事後再使用 set 設置或更改也可以

rect.set({
  left: 100,
  top: 100,
  
  fill: 'blue',
  strokeWidth: 10,
});

群組管理（Group Management）

物件的集合：Group 模塊允許將多個物件組合成一個單元，從而可以對這些物件進行群組級別的變換和操作。

同樣可以做跟單一 object 類似的事：

• 更改屬性 Properties
• 形變 Transform

除此之外可以做 group 的其他動作：

• 組合：將多個物件組合成一個群組，便於統一管理。
• 操作：提供對群組內部物件的操作方法，如添加、移除和更新群組內的物件。

動畫效果（Animation）

讓物件動起來的腳本：Animation 模塊處理物件的動畫效果，提供緩動函數和動畫控制。

• 動畫：為物件添加動畫效果，如移動、縮放和旋轉等。
• 緩動函數：提供多種緩動函數，用於控制動畫的速度和效果。
• 控制：提供動畫的開始、停止和重播等控制方法。

動畫控制 API

 object.animate(property, toValue, options);

• 參數：
  • property：要動畫的屬性名稱。
  • toValue：動畫結束時的屬性值。
  • options：動畫選項，包括 duration（持續時間）、easing（緩動函數）、onChange（每次屬性變更時的回調函數）等。

動畫類別

• 物件動畫 (animate)：方法允許你對物件的屬性進行動畫處理。你可以指定開始值和結束值，以及動畫的持續時間和緩動函數。其實跟 css 的動畫設置很像，只是多了可以新增想在 onChange 當下一邊執行的 function

rect.animate('toLeftAnimate', 200, {
  onChange: canvas.renderAll.bind(canvas),
  duration: 1000,
  easing: fabric.util.ease.easeInOutQuad,
  onComplete: function() {
    console.log('Animation completed');
  }
});

• 路徑動畫 (pathAnimation)：沿著指定的路徑對物件進行動畫處理
  使用跟物件動畫差不多，比他多了定義的 fabric.Path 在參數中，讓動畫可以跟著路徑跑

const path = new fabric.Path('M 0 0 Q 100 100 200 0 T 400 0');

// 對物件進行路徑動畫
circle.animate('pathAnimate', path, {
  onChange: canvas.renderAll.bind(canvas),
  duration: 2000,
  easing: fabric.util.ease.easeInOutQuad,
});

Parser 格式轉換

其他檔案的輸入與輸出：Parser 模塊負責解析 SVG 和 JSON 格式的文件，將這些格式轉換為 Fabric.js 的物件。

• 解析：解析 SVG 和 JSON 文件，將其內容轉換為 Fabric.js 的物件。
• 輸出：將畫布上的物件導出為 SVG 或 JSON 格式，便於保存和共享。
• 轉換：提供格式轉換功能，將其他格式的文件轉換為 Fabric.js 可識別的物件。

JSON 解析和格式轉換

將畫布轉換為 JSON

// 將畫布轉換為 JSON 字符串
const json = canvas.toJSON();
console.log(JSON.stringify(json));

從 JSON 恢復畫布

const canvas = new fabric.Canvas('c');
const json = '{"objects":[{"type":"rect","left":100,"top":100,"width":50,"height":50,"fill":"red"}]}';

// 從 JSON 字符串恢復畫布
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

SVG 解析和格式轉換

將畫布轉換為 SVG

// 將畫布轉換為 SVG 字符串

const svg = canvas.toSVG();
console.log(svg);

從 SVG 恢復畫布

const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="130" cy="130" r="30" fill="blue"/></svg>';

// 從 SVG 字符串恢復畫布

fabric.loadSVGFromString(svg, function(objects, options) {
  const obj = fabric.util.groupSVGElements(objects, options);
  canvas.add(obj).renderAll();
});

其他跨模塊功能

事件系統（Event System）

事件類別

• 物件事件 (object:added, object:removed, object:modified)
• 畫布事件 (mouse:down, mouse:up, mouse:move)

繪圖工具（Drawing Tools）

• 自由繪製
• 形狀繪製
• 路徑創建和編輯

繪圖工具

• 自由繪圖 (freeDrawingBrush)
• 橡皮擦 (eraser)
• 填充 (fill)
• 選擇 (select)

以上這些模塊共同構成了 Fabric.js 的核心功能，提供了強大的畫布管理、物件操作、動畫效果和文件解析能力。
把這些基礎元素排列組合互相加成之後，就是我們所知道的圖像編輯器基礎了。

再將今天的內容做統整成表格：

fabric.js 核心模塊整理