调研宝

放大倍数优化

src/views/h5editor/index.vue

@@ -23,7 +23,11 @@
       />
       <!-- 编辑区域 -->
       <div class="edit-area">
-        <div class="container" id="h5editor" :style="{transform:`scale(${zoomNum},${zoomNum})`}">
+        <div
+          class="container"
+          id="h5editor"
+          :style="{transform:`scale(${zoomNum},${zoomNum})`+`translate(${translateX}px,${translateY}px)`}"
+        >
           <elab-canvas
             v-show="animatedNameGlobal!=''"
             :width="750"
@@ -701,7 +705,9 @@ export default {
       selectedButtom: false,
 
       canSave: false,
-      zoomNum: 1
+      zoomNum: 1,
+      translateX: 360,
+      translateY: 100
     };
   },
   watch: {
@@ -854,13 +860,16 @@ export default {
     },
     zoom(isAdd) {
       var zooms = [0.2, 0.3, 0.5, 0.75, 0.8, 0.9, 1, 1.2, 1.5, 2, 3, 4];
+      var translateYs = [80, 80, 80, 80, 80, 90, 100, 150, 200, 250, 300, 330];
       if (isAdd) {
         if (this.zoomNum <= 3) {
           this.zoomNum = zooms[zooms.indexOf(this.zoomNum) + 1];
+          this.translateY = translateYs[zooms.indexOf(this.zoomNum)];
         }
       } else {
         if (this.zoomNum > 0.2) {
           this.zoomNum = zooms[zooms.indexOf(this.zoomNum) - 1];
+          this.translateY = translateYs[zooms.indexOf(this.zoomNum)];
         }
       }
     },
@@ -1088,7 +1097,7 @@ export default {
           tools.vue2json(this.$store.state.editor.editorTheme)
         )
         .then(() => {
-         var param= setTimeout(() => {
+          var param = setTimeout(() => {
             this.showPreView = true;
             this.isLoadingPreview = false;
           }, 1000);
@@ -1256,7 +1265,6 @@ export default {
                     var param = setTimeout(() => {
                       that.selectedButtom = true;
                     }, 1);
-                   
                   }
                 };
                 img.src = res;
@@ -1288,12 +1296,11 @@ export default {
                       var param = setTimeout(() => {
                         that.selectedButtom = true;
                       }, 1);
-                    
+
                       that.unSelectedButtom = false;
                       var param2 = setTimeout(() => {
                         that.unSelectedButtom = true;
                       }, 1);
-                 
                     }
                   };
                   img.src = res;
@@ -1364,14 +1371,12 @@ export default {
                   var params = setTimeout(() => {
                     that.selectedButtom = true;
                   }, 1);
-                  
                 } else {
                   that.buttonData.backgroundUnselectedImg = res;
                   that.unSelectedButtom = false;
                   var param = setTimeout(() => {
                     that.unSelectedButtom = true;
                   }, 1);
-                 
                 }
                 that.buttonData.itemId = that.itemId;
                 that.buttonData.width = img.width;
@@ -1639,8 +1644,6 @@ export default {
 .container {
   height: 100%;
   width: 770px;
-  margin-left: 360px;
-  margin-top: 100px;
 }
 
 .control-panel {