网站建设的创新之处网站排名优化师
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>