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

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

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

---

方法1：

  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：

  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);