fabric.js实现合并元素和拆分元素

将多选的元素组合，获取选中的元素，拿到层级和位置大小，进行合并

groupShape(canvas: any) {
  let clonedObject = JSON.parse(JSON.stringify(canvas._activeObject));
  const left = clonedObject.left
  const top = clonedObject.top
  const width = clonedObject.width
  const height = clonedObject.height
  let activeObjects = canvas.getActiveObjects();
  if (activeObjects.length > 1) {
    // 获取选中对象的层级
    let objectLayers = activeObjects.map(function (object) {
      return canvas.getObjects().indexOf(object);
    });
    canvas.discardActiveObject(); // 取消选中状态
    canvas.remove(...activeObjects); // 从画布中移除选中的对象

    let uniqueObjects = []; // 存储去重后的对象

    activeObjects.forEach(function (object) {
      if (!uniqueObjects.includes(object)) { // 判断是否已存在于去重数组中
        uniqueObjects.push(object);
      }
    });
    // 对去重后的对象按照原来的层级进行排序
    uniqueObjects.sort(function (a, b) {
      return objectLayers[activeObjects.indexOf(a)] - objectLayers[activeObjects.indexOf(b)];
    });
    let group = new fabric.Group(uniqueObjects);

    group.set({
      width: width,
      height: height,
      left: left,
      top: top
    });

    canvas.add(group); // 将组合对象添加到画布中
    canvas.setActiveObject(group); // 设置新创建的组合对象为选中状态
    canvas.renderAll(); // 重新渲染画布
  }
}

拆分选中的组合

splitGroup(canvas: any) {
  let activeObject = canvas.getActiveObject();
  if (activeObject && activeObject.type === 'group') { // 如果当前选中的是组合对象
    // 获取选中元素的位置信息
    let left = activeObject.left;
    let top = activeObject.top;
    // 将选中元素拆分为单个元素
    activeObject.toActiveSelection();
    let objects = activeObject.getObjects();
    // 从画布中删除原本的选中元素
    canvas.remove(activeObject);
    // 将新的单个元素添加到画布上，并设置其位置为之前选中元素的位置
    objects.forEach(function (object: any) {
      object.set({
        left: object.left + left,
        top: object.top + top
      });
      canvas.add(object);
    });

    canvas.renderAll();

  }
}