【fabrc.js】 创建组(fabric.Group)类型的 3 种方式

  • 方法1:先选中已存在画布内多个图形,然后拿到ActiveSelection数据,随后调用 `toGroup()` 即可将选中的图形创建为组对象;
  • 方法2:new fabric.Group() 获取group实例,通过new的时候传入图形参数[o1,o2...],然后将group实例add到画布上;
  • 方法3:在方法2的基础上,group实例也可通过addWithUpdate将图形添加进组里。

上述3种方法使用时对应多种不同的场景,根据当前需求进行选择其中一个方式即可;


方法1:

javascript 复制代码
  const canvas = new fabric.Canvas("c", {
    backgroundColor: "grey",
    width: 1000,
    height: 666,
  });

  const line = new fabric.Line([10, 10, 333, 200], {
    strokeWidth: 1,
    stroke: "yellow",
    id: "linexx",
  });
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: "pink",
  });


  canvas.add(line);
  canvas.add(rect);

// 然后在画布上通过鼠标多选选中上面的线条和矩形,此时通过canvas.getActiveObject()即可拿到当前激活的图形对象,由于选中了多个,此时拿到的就是activeSelection类型的klass实例数据,然后.toGroup()即可将该两个图形转换为组!
canvas.getActiveObject().toGroup()

方法2 & 3:

javascript 复制代码
  const line = new fabric.Line([10, 10, 333, 200], {
    strokeWidth: 1,
    stroke: "yellow",
  });
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: "pink",
  });

  const group = new fabric.Group([line, rect], {})
  canvas.add(group);

  // 如果画布内的组对象里有某图形A,禁止再将该A图形重复添加进画布!
  // canvas.add(line); // 会导致BUG
    
  // 如果要将某图形添加到已声明的group实例里,则通过 addWithUpdate 方法实现。
  const rect2 = new fabric.Rect({
    left: 300,
    top: 300,
    width: 100,
    height: 50,
    fill: "yellow",
  });
  setTimeout(() => {
    group.addWithUpdate(rect2);
  }, 1000);
相关推荐
蓝倾4 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong9 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹11 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982411 分钟前
vue3源码解析:依赖收集
前端·vue.js
用户75794199497011 分钟前
基于JavaScript的简易Git
javascript
WaiterL11 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason14 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77815 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽33 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟34 分钟前
让对象保持定义的顺序来排列
前端