优化

src/pages/Home/components/FabricSize.vue

@@ -2,21 +2,37 @@
   <div>
     <span>坐标：</span>
     <div>
-      <el-button type="primary" @click="changeFabricPosition(true, 'top')">上移</el-button>
+      <el-button type="primary" @click="changeFabricPosition(true, 'top')"
-      <el-button type="primary" @click="changeFabricPosition(false, 'top')">下移</el-button>
+        >上移</el-button
-      <el-button type="primary" @click="changeFabricPosition(true, 'left')">左移</el-button>
+      >
-      <el-button type="primary" @click="changeFabricPosition(false, 'left')">右移</el-button>
+      <el-button type="primary" @click="changeFabricPosition(false, 'top')"
+        >下移</el-button
+      >
+      <el-button type="primary" @click="changeFabricPosition(true, 'left')"
+        >左移</el-button
+      >
+      <el-button type="primary" @click="changeFabricPosition(false, 'left')"
+        >右移</el-button
+      >
     </div>
   </div>
   <div>
     <span>宽度：</span>
-    <el-input-number v-model="fabricPosition.width" :min="1" @change="changeFabricPosition($event, 'width')"
+    <el-input-number
-      :max="fabricPosition.imgDomWidth" />
+      v-model="fabricPosition.width"
+      :min="1"
+      @change="changeFabricPosition($event, 'width')"
+      :max="fabricPosition.imgDomWidth"
+    />
   </div>
   <div>
     <span>高度：</span>
-    <el-input-number v-model="fabricPosition.height" :min="1" @change="changeFabricPosition($event, 'height')"
+    <el-input-number
-      :max="fabricPosition.imgDomHight" />
+      v-model="fabricPosition.height"
+      :min="1"
+      @change="changeFabricPosition($event, 'height')"
+      :max="fabricPosition.imgDomHight"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -28,8 +44,8 @@ const fabricPosition = reactive<any>({
   width: 0,
   height: 0,
   imgDomHight: 1,
-  imgDomWidth: 1
+  imgDomWidth: 1,
-})
+});
 
 const setSize = (data: any, imgDomWidth: number, imgDomHight: number): void => {
   fabricPosition.top = data.top;
@@ -38,23 +54,22 @@ const setSize = (data: any, imgDomWidth: number, imgDomHight: number): void => {
   fabricPosition.height = data.height;
   fabricPosition.imgDomWidth = imgDomWidth;
   fabricPosition.imgDomHight = imgDomHight;
-}
+};
 
 const changeFabricPosition = (value: number | boolean, str: string): void => {
-  if (typeof value === 'boolean') {
+  if (typeof value === "boolean") {
-    if (str === 'top') {
+    if (str === "top") {
-      props.change(value ? fabricPosition.top-- : fabricPosition.top++, str)
+      props.change(value, str);
     } else {
-      props.change(value ? fabricPosition.left-- : fabricPosition.left++, str)
+      props.change(value, str);
     }
   } else {
-    props.change(value, str)
+    props.change(value, str);
   }
-}
+};
 
 defineExpose({
   setSize,
 });
-
 </script>
 <style lang="scss" scoped></style>

src/pages/Home/index.vue

@@ -271,7 +271,7 @@
             </div>
           </div>
           <FabricSize
-            :change="changeFabricPosition"
+            :change="changeFabricPositionNumber"
             ref="FabricSizeRef"
             v-if="ctx.getActiveObject()"
           />
@@ -403,7 +403,7 @@
             </div>
           </div>
           <FabricSize
-            :change="changeFabricPosition"
+            :change="changeFabricPositionNumber"
             ref="FabricSizeRef"
             v-if="ctx.getActiveObject()"
           />
@@ -482,7 +482,7 @@
             </div>
           </div>
           <FabricSize
-            :change="changeFabricPosition"
+            :change="changeFabricPositionNumber"
             ref="FabricSizeRef"
             v-if="ctx.getActiveObject()"
           />
@@ -1678,6 +1678,22 @@ const cteatedNumber = (): string => {
   return `${Math.floor(Math.random() * 100000000)}+${+new Date()}`;
 };
 
+// 修改尺寸数字
+const changeFabricPositionNumber = (value: number | boolean, str: string): void => {
+  let number = 0;
+  if (typeof value === "boolean") {
+    number = JSON.parse(JSON.stringify(currentFabric.value.target.get(str)));
+    if (value) {
+      number--;
+    } else {
+      number++;
+    }
+  } else {
+    number = value;
+  }
+  changeFabricPosition(number, str);
+};
+
 // 编辑尺寸
 const changeFabricPosition = (value: number, str: string): void => {
   if (value) {
@@ -1730,7 +1746,6 @@ const changeFabricPosition = (value: number, str: string): void => {
         break;
       case "width":
       case "height":
-        maxRect.set(str, value);
         if (str === "width") {
           maxRect.set("left", value / 2 - value);
           currentFabric.value.target.set(str, value);
@@ -2850,7 +2865,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height - 36.16,
-        top: row.top + 16,
+        top: row.top + 17,
         left: row.left,
       };
     });
@@ -2859,7 +2874,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height - 36.16,
-        top: row.top + 16,
+        top: row.top + 17,
         left: row.left,
       };
     });
@@ -2868,7 +2883,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height - 36.16,
-        top: row.top + 16,
+        top: row.top + 17,
         left: row.left,
       };
     });
@@ -2877,7 +2892,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height,
-        top: row.top + 16,
+        top: row.top + 17,
         left: row.left,
       };
     });