当前位置：首页 > news >正文

02-Canvas-fabric.ActiveSelection

news 来源：原创 2025/4/29 1:03:30

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>