02-Canvas-fabric.ActiveSelection
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);
// 创建 ActiveSelection
const activeSelection = new fabric.ActiveSelection([rect1, rect2], {
canvas: canvas,
});
// 将 ActiveSelection 设置为当前选中对象
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
// 监听 ActiveSelection 事件
// 移动 ActiveSelection
activeSelection.set({ left: 100, top: 100 });
canvas.requestRenderAll();
// 缩放 ActiveSelection
activeSelection.set({ scaleX: 1.5, scaleY: 1.5 });
canvas.requestRenderAll();
// // 旋转 ActiveSelection
activeSelection.set({ angle: 45 });
canvas.requestRenderAll();
// 永久分组
const group = activeSelection.toGroup(); // 转换为永久分组
canvas.discardActiveObject(); // 取消选择
canvas.requestRenderAll();
</script>
</body>
</html>