当前位置: 首页 > article >正文

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>

http://www.kler.cn/a/589006.html

相关文章:

  • 浅谈Mysql数据库事务操作 用mybatis操作mysql事务 再在Springboot中使用Spring事务控制mysql事务回滚
  • 数学 :矩阵
  • 【Gitee】删除仓库的详细步骤
  • ArcGIS 水利制图符号库:提升水利工作效率的利器
  • 【QT:控件】
  • 第三百八十节 JavaFX教程 - JavaFX区域图
  • 【商城实战(38)】Spring Boot:从本地事务到分布式事务,商城数据一致性的守护之旅
  • 数据结构——单链表list
  • 【软考-架构】11.3、设计模式-新
  • 从技术创新到全球布局:MOVA割草机器人以尖端科技定义智能园艺
  • windows上清理docker
  • NET进行CAD二次开发之二
  • django 运行时仅显示500 但是不提示其他内容 如何令其显示更多错误信息
  • pycharm环境创建
  • 群体智能优化算法-䲟鱼优化算法 (Remora Optimization Algorithm, ROA,含Matlab源代码)
  • Mysql与ElasticSearch间的数据同步场景模拟
  • MySQL数据库(数据库操作)4
  • Vue.js 中的计算属性、监听器与方法:区别与使用场景
  • 系统架构设计师—论文解析—论文写作技巧
  • How to install cangjie on Linux mint 22.1