调研宝

画布放大缩小功能
https://www.xiaopiu.com/h5/byId?type=project&id=5df1b5a78a345d79dde97211&isprd=true

src/components/HeaderEdit.vue

@@ -7,22 +7,44 @@
     </div>
     <div class="tools">
       <div class="next_return">
-        <div class="return" title="撤销" @click="revocation" :style="`opacity:${operationList.length>1?'1':'.3'}`">
-          <img class="retutn_icon" src="../assets/images/button_return.png" alt="">
+        <div
+          class="return"
+          title="撤销"
+          @click="revocation"
+          :style="`opacity:${operationList.length>1?'1':'.3'}`"
+        >
+          <img class="retutn_icon" src="../assets/images/button_return.png" alt />
           <span>撤销</span>
         </div>
-        <div class="return" title="恢复" @click="recover" :style="`opacity:${nextList.length>0?'1':'.3'}`">
-          <img class="retutn_icon" src="../assets/images/button_next.png" alt="">
+        <div
+          class="return"
+          title="恢复"
+          @click="recover"
+          :style="`opacity:${nextList.length>0?'1':'.3'}`"
+        >
+          <img class="retutn_icon" src="../assets/images/button_next.png" alt />
           <span>恢复</span>
         </div>
         <div class="return" title="分享设置" @click="shareSetting">
-          <img class="retutn_icon" src="../assets/images/share_setting_edit_nor.png" alt="">
+          <img class="retutn_icon" src="../assets/images/share_setting_edit_nor.png" alt />
           <span>分享设置</span>
         </div>
         <div class="return" title="保存" @click="save">
-          <img class="retutn_icon" src="../assets/images/save_edit_nor.png" alt="">
+          <img class="retutn_icon" src="../assets/images/save_edit_nor.png" alt />
           <span>保存</span>
         </div>
+        <div title="缩放" class="zoom-title">
+          <span class="size" @click="zoom(false)">-</span>
+          <div class="zoom-num">
+            <span
+              style="font-size:14px;font-family:MicrosoftYaHei;color:rgba(100,107,129,1);line-height:19px"
+            >{{zoomNum*100}}%</span>
+            <span
+              style="font-size:14px;font-family:MicrosoftYaHei;color:rgba(100,107,129,1);line-height:19px;"
+            >缩放</span>
+          </div>
+          <span class="size" @click="zoom(true)">+</span>
+        </div>
       </div>
     </div>
     <!-- <div class="next_return">
@@ -33,7 +55,7 @@
     <el-button @click="grid" class="preview " type="primary" style="margin-left: 50px;">网格参考线</el-button>
 
     <div class="right-panel">
-      <el-button @click="deploy" class="preview" type="primary" :loading="loading">预览</el-button> -->
+    <el-button @click="deploy" class="preview" type="primary" :loading="loading">预览</el-button>-->
     <!--<el-button @click="psd"-->
     <!--class="preview"-->
     <!--type="primary"-->
@@ -51,7 +73,7 @@
         <input type="file" id="psdFile" name="image" @change="uploadFn">
 
       </form>
-    </div> -->
+    </div>-->
     <!-- 分享设置 -->
     <ShareSetting v-if="isShareSetting" :close="closeShare" :shareModel="shareModel"></ShareSetting>
   </header>
@@ -67,7 +89,9 @@ export default {
   props: {
     goback: Function,
     save: Function,
+    zoom: Function,
     title: "",
+    zoomNum: Number,
     shareModel: ""
   },
   components: {
@@ -367,6 +391,32 @@ export default {
           margin-bottom: 8px;
         }
       }
+
+      .zoom-title {
+        margin-left: 80px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .zoom-num {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          width: 50px;
+        }
+
+        .size {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          justify-content: center;
+          text-align: center;
+          margin-left: 8px;
+          margin-right: 8px;
+        }
+      }
     }
   }
 }

src/views/h5editor/index.vue

@@ -2,7 +2,7 @@
   <div class="editor">
     <!-- 头部 -->
     <HeaderMain></HeaderMain>
-    <HeaderEdit :title="title" :shareModel="shareModel" :goback="dialogSave" :save="save"
+    <HeaderEdit :title="title" :shareModel="shareModel" :goback="dialogSave" :save="save" :zoom = "zoom" :zoomNum="zoomNum"
                 @saveThemeSuccess="showPreView=true"/>
     <!-- 内容区域 -->
     <section class="section">
@@ -10,7 +10,8 @@
       <Overview ref='overview' class="overview" :testcaseId="testcaseId" :resultCount="resultPageCount"
                 :questions="questions"/>
       <!-- 编辑区域 -->
-      <div class="container" id="h5editor">
+      <div class="edit-area">
+ <div class="container" id="h5editor" :style="{transform:`scale(${zoomNum},${zoomNum})`}">
         <elab-canvas v-show="animatedNameGlobal!=''" :width="750" :height="1334"
                      :cstyle="`height:1334px;width:750px;position: absolute;z-index:99999; pointer-events:none`"
                      :background="'transparent'" :type="animatedNameGlobal"></elab-canvas>
@@ -27,6 +28,8 @@
               'background-size':'15px 15px', 'z-index':100000,width: '750px', height: '1334px'}"
              style="position: absolute;left: 0;top: 0;z-index: 9999;pointer-events: none"></div>
       </div>
+      </div>
+     
       <!-- 属性设置 -->
       <div class="control-panel">
         <div class="funcs">
@@ -495,6 +498,7 @@
                 selectedButtom: false,
                 isChangeStatus: false,
                 canSave:false,
+                zoomNum:1,
             };
         },
         watch: {
@@ -603,6 +607,18 @@
             }
         },
         methods: {
+           zoom(isAdd){
+             var zooms = [0.2,0.3,0.5,0.75,0.8,0.9,1,1.2,1.5,2,3,4];
+             if (isAdd) {
+               if (this.zoomNum<=3) {
+                 this.zoomNum = zooms[zooms.indexOf(this.zoomNum)+1]; 
+               }
+             }else {
+               if (this.zoomNum>0.2) {
+                 this.zoomNum = zooms[zooms.indexOf(this.zoomNum)-1]; 
+               }
+             }
+           },
             dialogSave() {
                 // return Promise.resolve().then(() => this.save()).then(() => this.$router.replace('themeList'))
 
@@ -1240,25 +1256,20 @@
     margin-bottom: 200px;
   }
 
-  .container {
-    /*width: 800px;
-    height: 860px;
-    padding: 20px;
-    position: absolute !important;
-    top: 50%;
-    left: 50%;
-    transform: translate(-75%, -50%);
-    overflow-y: scroll;
-    overflow-x: hidden;*/
-
+  .edit-area{
     position: absolute !important;
+    height: 100%;
+    width: auto;
+     left: 270px;
+     right: 367px;
+     top: 0;
+     overflow: scroll;
+  }
+  .container {
     height: 100%;
     width: 770px;
-
-    left: 56%;
-    transform: translate(-55%, -94%);
-    overflow: scroll;
-    overflow-x: hidden;
+    margin-left: 360px;
+    margin-top: 100px;
   }
 
   .control-panel {