mod：自定义svg 调整

frontend/src/views/components/PictureEditor/mixin/edit/index.js

@@ -2,6 +2,7 @@
 import Teleport from '@/components/Teleport'
 
 import * as TextboxConfig from './module/TextboxConfig'
+import fabric from "../../js/fabric-adapter";
 
 export default  {
   components: {
@@ -29,7 +30,12 @@ export default  {
         showClipStroke: true,  // 是否显示描边
         strokeColor: '#000000',    // 描边颜色
         strokeWidth: 2,            // 描边宽度
-        rectRadius: 0              // 矩形圆角
+        rectRadius: 0,              // 矩形圆角
+
+        shape: 'rect',      // 初始值保持不变
+        svgUrl: 'http://ossimg.valimart.net/uploads/20250610/FAxaPqxhgoj0Ub3uTU3omWMzyMYCoHdpgIK4qSXb.svg', // 添加默认SVG地址
+        svgWidth: 100,      // 可根据实际需求调整
+        svgHeight: 100      // 可根据实际需求调整
       }
     }
   },
@@ -247,7 +253,7 @@ export default  {
         this.options = this.TextboxConfig.fontFamily
       }
     },
-    applyClipPath() {
+    async applyClipPath() {
       if (!this.judge()) return;
 
       const { shape, width, height, radius, offsetX, offsetY, rectRadius } = this.clipSettings;
@@ -255,7 +261,32 @@ export default  {
       try {
         // 创建纯剪裁区域（不带描边）
         let clipObj;
-        if (shape === 'rect') {
+
+        if (shape === 'svg') {
+            // 使用 fabric.js 加载远程 SVG
+          clipObj = await new Promise((resolve, reject) => {
+              fabric.loadSVGFromURL(
+                  this.clipSettings.svgUrl,
+                  (loadedObjects, options) => {
+                    console.log('=============');
+                    // 创建组合对象
+                    const svgGroup = fabric.util.groupSVGElements(loadedObjects, options);
+                    console.log(svgGroup);
+                    // 设置尺寸
+                    svgGroup.scaleToWidth(this.clipSettings.svgWidth);
+                    svgGroup.scaleToHeight(this.clipSettings.svgHeight);
+
+                    svgGroup.set({
+
+                      absolutePositioned: true,
+                      left: offsetX,
+                      top: offsetY,
+                    })
+                    resolve(svgGroup);
+                  }
+              )
+            });
+          }else if (shape === 'rect') {
           if (width <= 0 || height <= 0) throw new Error('尺寸必须大于0');
 
           clipObj = new fabric.Rect({
@@ -267,7 +298,7 @@ export default  {
             ry: rectRadius,
             absolutePositioned: true
           });
-        } else {
+        } else if(shape === 'circle') {
           if (radius <= 0) throw new Error('半径必须大于0');
 
           clipObj = new fabric.Circle({

frontend/src/views/components/PictureEditor/mixin/edit/module/tools.js

@@ -45,9 +45,19 @@ cutout(){
       <el-select v-model="clipSettings.shape" @change="applyClipPath" size="small" style="width:100px">
         <el-option label="矩形" value="rect"></el-option>
         <el-option label="圆形" value="circle"></el-option>
+        <el-option label="SVG" value="svg"></el-option>
       </el-select>
     </div>
-
+      <div v-if="clipSettings.shape === 'svg'" class="flex left" style="margin-left:10px">
+        <!-- 固定地址输入框 -->
+        <el-input 
+          v-model="clipSettings.svgUrl" 
+          placeholder="SVG地址"
+          @input="applyClipPath"
+          size="small"
+          style="width:200px"
+        />
+      </div>
     <!-- 矩形参数 -->
     <div v-if="clipSettings.shape === 'rect'" class="flex left" style="margin-left:10px">
       <el-input-number v-model="clipSettings.width" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>