mod:剪裁 出SVG 其他所有操作

frontend/src/views/Tpl/Edit/index.vue

@@ -3,7 +3,7 @@
 
   <marketingEdit
       v-model:data="data"
-      v-model:select="select"
+      v-model:index="index"
       @save="save"
   />
 
@@ -16,7 +16,7 @@ import { ref, reactive } from 'vue';
 import headerBar from "@/components/header-bar/index.vue";
 import marketingEdit from '@/views/components/marketingEdit'
 const data  = ref([])
-const select = ref(0)
+const index = ref(0)
 
 /*
 * [

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

@@ -43,6 +43,7 @@ cutout(){
     <div class="title_two">剪裁</div>
     <div class="flex left">
       <el-select v-model="clipSettings.shape" @change="applyClipPath" size="small" style="width:100px">
+        <el-option label="无" value=""></el-option>
         <el-option label="矩形" value="rect"></el-option>
         <el-option label="圆形" value="circle"></el-option>
         <el-option label="SVG" value="svg"></el-option>
@@ -58,36 +59,104 @@ cutout(){
           style="width:200px"
         />
       </div>
+      
+      
+      
+      
+      <div  class="flex left mar-top-10 ">
+            <div class="label fs-14 c-333 te-l"  style="width: 35px;">X</div>
+                <el-slider
+                  size="small"
+                  v-model="clipSettings.offsetX"
+                  :step="1"
+                  :min="1"
+                  :max="canvas.width"
+                  style="width:120px;"
+                  :show-tooltip="false"
+                   @input="applyClipPath"
+
+                ></el-slider>
+      </div>
+      
+      <div  class="flex left mar-top-10 ">
+            <div class="label fs-14 c-333 te-l"  style="width: 35px;">Y</div>
+                <el-slider
+                  size="small"
+                  v-model="clipSettings.offsetY"
+                  :step="1"
+                  :min="1"
+                  :max="canvas.height"
+                  style="width:120px;"
+                  :show-tooltip="false"
+                   @input="applyClipPath"
+
+                ></el-slider>
+      </div>
       <div v-if="clipSettings.shape === 'svg'" class="flex left" style="margin-left:10px">
       <el-input-number v-model="clipSettings.svgWidth" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
       <el-input-number v-model="clipSettings.svgHeight" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
       </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"/>
-      <el-input-number v-model="clipSettings.height" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
-      <el-input-number v-model="clipSettings.rectRadius" @input="applyClipPath" :step="1" :min="0" size="small" style="width:60px" placeholder="圆角"/>
-    </div>
+    
+    <template v-if="clipSettings.shape === 'rect'">
+      <div  class="flex left mar-top-10 ">
+        <div class="label fs-14 c-333 te-l" style="width: 35px;">宽</div>
+        
+                <el-slider
+                  size="small"
+                  v-model="clipSettings.width"
+                  :step="1"
+                  :min="1"
+                  :max="canvas.width"
+                  style="width:120px;"
+                  :show-tooltip="false"
+                   @input="applyClipPath"
+
+                ></el-slider>
+        
+      </div>
+      <div  class="flex left mar-top-10 ">
+        <div class="label fs-14 c-333 te-l"  style="width: 35px;">高</div>
+        
+                <el-slider
+                  size="small"
+                  v-model="clipSettings.height"
+                  :step="1"
+                  :min="1"
+                  :max="canvas.height"
+                  style="width:120px;"
+                  :show-tooltip="false"
+                   @input="applyClipPath"
+
+                ></el-slider>
+      </div>
+      <div  class="flex left mar-top-10 ">
+        <div class="label fs-14 c-333 te-l"  style="width: 35px;">圆角</div>
+        <el-input-number v-model="clipSettings.rectRadius" @input="applyClipPath" :step="1" :min="0" size="small" placeholder="圆角"/>
+      </div>
+    </template>
 
     <!-- 圆形参数 -->
-    <div v-else class="flex left" style="margin-left:10px">
-      <el-input-number v-model="clipSettings.radius" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
-    </div>
+    
+      <div v-else  class="flex left mar-top-10 ">
+        <div class="label fs-14 c-333 te-l"  style="width: 35px;">圆角</div>
+        <el-input-number v-model="clipSettings.radius" @input="applyClipPath" :step="1" :min="1" size="small"/>
+      </div>
 
     <!-- 描边参数 -->
-    <div class="flex left" style="margin-top:8px">
-      <el-color-picker v-model="clipSettings.strokeColor" @change="applyClipPath" size="small"/>
-      <el-input-number v-model="clipSettings.strokeWidth" @input="applyClipPath" :step="1" :min="0" :max="10" size="small" style="width:60px" placeholder="描边"/>
-    </div>
+    
+      <div  class="flex left mar-top-10 ">
+        <div class="label fs-14 c-333 te-l"  style="width: 35px;">描边</div>
+        <el-input-number v-model="clipSettings.strokeWidth" @input="applyClipPath" :step="1" :min="0" :max="10" size="small" style="width:90px; margin-right: 10px;" placeholder="描边"/>
+        <el-color-picker v-model="clipSettings.strokeColor" @change="applyClipPath" size="small" class="mar-left-10"/>
+      </div>
 
     <!-- 偏移参数 -->
-    <div class="flex left">
-      <el-input-number v-model="clipSettings.offsetX" @input="applyClipPath" :step="1" size="small" style="width:60px"/>
-      <el-input-number v-model="clipSettings.offsetY" @input="applyClipPath" :step="1" size="small" style="width:60px"/>
-    </div>
+    
+    
 
-    <div class="flex left">
-      <el-button @click="clearClipPath" size="small">清除</el-button>
+    <div class="flex left mar-top-10">
+      <el-button @click="clearClipPath" size="small">清除剪裁</el-button>
     </div>
   `
 }

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

@@ -94,10 +94,10 @@ const viewMixins = {
     },
     async viewInit() {
 
-      this.view.width = this.data[this.select].width
-      this.view.height = this.data[this.select].height
-      this.canvas.width = this.data[this.select].width
-      this.canvas.height = this.data[this.select].height
+      this.view.width = this.data[this.index].width
+      this.view.height = this.data[this.index].height
+      this.canvas.width = this.data[this.index].width
+      this.canvas.height = this.data[this.index].height
       this.viewStatus = true;
 
         // 没有传值进来 默认基准宽度为基准算最大高度

frontend/src/views/components/marketingEdit/index.vue

@@ -20,7 +20,7 @@ export default {
         return []
       }
     },
-    select:{
+    index:{
       type: Number,
       default: 0
     },
@@ -51,7 +51,7 @@ export default {
       return this.data.length === 0
     },
     this_canvas(){
-      return this.data[this.select]
+      return this.data[this.index]
     }
   },
   watch: {
@@ -81,7 +81,7 @@ export default {
       //画布下不存在模板OSS地址
 
       if(this.this_canvas.tpl_url){
-        console.log(this.select);
+        console.log(this.index);
         return;
       }
       this.$emit('canvasStyle:update',{
@@ -106,6 +106,10 @@ export default {
       this.layerInit();
       await  this.$nextTick()
       this.$emit('init')
+      this.addMaps('https://ossimg.valimart.net/uploads/vali_ai/20250613/174978643465498.png',{
+        maxWidth:1024,
+        maxHeight:1024,
+      })
 
     },
     addCanvas(){
@@ -137,8 +141,8 @@ export default {
                height:this.canvasForm.height,
                bg_color:this.canvasForm.bg_color,
         })
-        this.$emit('select:update',this.data.length - 1)
-/*        this.select = this.data.length - 1*/
+        this.$emit('index:update',this.data.length - 1)
+/*        this.index = this.data.length - 1*/
         this.canvasForm.visible = false;
         this.init();
       }else{
@@ -153,10 +157,10 @@ export default {
         if(newHeight !== this.this_canvas.height)this.fcanvas.setHeight(newHeight);
         if(newColor !== this.this_canvas.bg_color)this.fcanvas.setBackgroundColor(newColor);
 
-        this.data[this.select].name = this.canvasForm.name
-        this.data[this.select].width = this.canvasForm.width
-        this.data[this.select].height = this.canvasForm.height
-        this.data[this.select].bg_color = this.canvasForm.bg_color
+        this.data[this.index].name = this.canvasForm.name
+        this.data[this.index].width = this.canvasForm.width
+        this.data[this.index].height = this.canvasForm.height
+        this.data[this.index].bg_color = this.canvasForm.bg_color
         // 重新渲染以应用更改
         this.fcanvas.renderAll();
         this.canvasForm.visible = false;