fabric.ActiveSelection
fabric.ActiveSelection 用于表示當前選中的多個對象（即多選狀態）。
當用戶在畫布上選擇多個對象時，Fabric.js 會自動將這些對象包裝在fabric.ActiveSelection 實例中，以便統一操作（如移動、縮放、旋轉等）。
它具有分組的功能,默認臨時分組
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fabric.js Demo</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head><body><canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas><script>const canvas = new fabric.Canvas('canvas');/* fabric.ActiveSelection 用于表示當前選中的多個對象（即多選狀態）。當用戶在畫布上選擇多個對象時，Fabric.js 會自動將這些對象包裝在一個 fabric.ActiveSelection 實例中，以便統一操作（如移動、縮放、旋轉等）。它具有分組的功能,默認臨時分組 */const rect1 = new fabric.Rect({ width: 100, height: 100, fill: 'red' });const rect2 = new fabric.Rect({ width: 100, height: 100, fill: 'blue', left: 150 });// 將兩個矩形添加到畫布canvas.add(rect1, rect2);// 創建 ActiveSelectionconst activeSelection = new fabric.ActiveSelection([rect1, rect2], {canvas: canvas,});// 將 ActiveSelection 設置為當前選中對象canvas.setActiveObject(activeSelection);canvas.requestRenderAll();// 監聽 ActiveSelection 事件// 移動 ActiveSelectionactiveSelection.set({ left: 100, top: 100 });canvas.requestRenderAll();// 縮放 ActiveSelectionactiveSelection.set({ scaleX: 1.5, scaleY: 1.5 });canvas.requestRenderAll();// // 旋轉 ActiveSelectionactiveSelection.set({ angle: 45 });canvas.requestRenderAll();// 永久分組const group = activeSelection.toGroup(); // 轉換為永久分組canvas.discardActiveObject(); // 取消選擇canvas.requestRenderAll();</script>
</body></html>
)
