【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);
相关推荐
会豪16 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子16 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶16 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子16 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_16 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233316 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin17 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_17 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit17 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天17 小时前
ts中的函数重载
前端