feat: 完善选区功能，新增组图层自由编辑

src/component/Canvas/CanvasEditor/managers/LayerManager.js

@@ -335,6 +335,11 @@ export class LayerManager {
     // 设置裁剪对象
     layers.forEach((layer) => {
       if (layer.clippingMask) {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject?._objects?.length > 1) {
+          console.log(activeObject?._objects?.length);
+          return false; // 如果是多选对象，则不设置裁剪路径
+        }
         // 如果是组图层  则给所有子对象设置裁剪对象
         if (layer.type === LayerType.GROUP || layer.children?.length > 0) {
           layer.children.forEach((childLayer) => {
@@ -344,8 +349,10 @@ export class LayerManager {
             );
             if (object) {
               const tempClipPath = fabric.util.object.clone(object);
+              tempClipPath.clipPath = null;
               tempClipPath.set({
                 // 设置绝对定位
+                // ...layer.clippingMask, // 恢复原定位
                 absolutePositioned: true,
               });
               const childObj = this.canvas
@@ -362,7 +369,14 @@ export class LayerManager {
             layer.clippingMask?.id
           );
           if (object) {
-            obj.clipPath = object;
+            const tempClipPath = fabric.util.object.clone(object);
+            tempClipPath.clipPath = null; // 确保克隆的遮罩没有clipPath
+            tempClipPath.set({
+              // 设置绝对定位
+              // ...layer.clippingMask, // 恢复原定位
+              absolutePositioned: true,
+            });
+            obj.clipPath = tempClipPath;
           }
         }
       }
@@ -918,13 +932,17 @@ export class LayerManager {
   // 设置激活当前图层下画布中的所有对象，并变成选择组
   setAllActiveGroupLayerCanvasObject(layer) {
     // 获取当前图层下所有元素
-
+    let layerMask = null;
     // 选择当前组下所有画布元素
     const allObjects = layer.children.reduce((acc, child) => {
       // 如果子图层有fabricObjects，则添加到结果数组
       child?.fabricObjects?.forEach((obj) => {
         const { object } = findObjectById(this.canvas, obj.id);
         if (object) {
+          if (!layerMask) {
+            layerMask = fabric.util.object.clone(object.clipPath);
+          }
+          object.clipPath = null; // 确保克隆的遮罩没有clipPath
           acc.push(object);
         }
       });
@@ -932,6 +950,10 @@ export class LayerManager {
       if (child?.fabricObject) {
         const { object } = findObjectById(this.canvas, child?.fabricObject.id);
         if (object) {
+          if (!layerMask) {
+            layerMask = fabric.util.object.clone(object.clipPath);
+          }
+          object.clipPath = null; // 确保克隆的遮罩没有clipPath
           acc.push(object);
         }
       }
@@ -951,6 +973,8 @@ export class LayerManager {
         canvas: this.canvas,
       });
 
+      activeSelection.clipPath = layerMask; // 保留第一个对象的裁剪路径
+
       // 设置活动选择组的属性
       this.canvas.setActiveObject(activeSelection);
       this.canvas.renderAll();