浏览代码

添加缩放功能:
1.top_toolbar修改
2.baseEditer修改

yunxing 4 年之前
父节点
当前提交
3083d2caf1
共有 2 个文件被更改,包括 108 次插入28 次删除
  1. 43 12
      src/components/baseEditer.vue
  2. 65 16
      src/components/edit/top_toolbar.vue

+ 43 - 12
src/components/baseEditer.vue

@@ -48,7 +48,9 @@ export default {
       floorList: {},
       urlMsg: {},
       chiceItemList: [], //选中itemlist
-      hasTypeList: [] // 当前类型下包含的typeid(提取)
+      hasTypeList: [], // 当前类型下包含的typeid(提取)
+      initScale: 1,  //加载好底图之后的,初始缩放比例
+      changeScaleByClick: false,  //区分 滚轮,点击 事件改变的缩放比例
     };
   },
   mounted() {
@@ -58,6 +60,7 @@ export default {
     // 挂在bus
     this.getBus();
     store.dispatch("getElementType", { PageSize: 1000 });
+    window.vm = this
   },
   methods: {
     init() {
@@ -90,6 +93,7 @@ export default {
             loadings.close();
           });
         this.view.fitSceneToView();
+
       });
       // 获取主题数据
       this.readGroup().then(data => {
@@ -174,6 +178,9 @@ export default {
             this.loading = false;
             this.isQuerying = false;
             console.log("success");
+            // 设置初始化缩放比例
+            this.initScale = this.view.scale
+            bus.$emit('initScale', this.view.scale)
           });
         } else {
           console.log("楼层不正确");
@@ -266,7 +273,7 @@ export default {
           BuildingID: this.urlMsg.BuildingID, // 建筑ID
           FloorID: this.urlMsg.FloorID // 楼层id
         };
-         Message({
+        Message({
           message: '上传中,切勿关闭窗口!',
           type: 'warning'
         });
@@ -354,19 +361,33 @@ export default {
       //发布图
       // bus.$on("publishGraph", val => {
       //       this.spinning = true;
-    //   publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
-    //     this.spinning = false;
-    //     if (res.Result == "success") {
-    //       this.$message.success(res.Message);
-    //     } else {
-    //       this.$message.error(res.Message);
-    //     }
-    //   });
-    // });
+      //   publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
+      //     this.spinning = false;
+      //     if (res.Result == "success") {
+      //       this.$message.success(res.Message);
+      //     } else {
+      //       this.$message.error(res.Message);
+      //     }
+      //   });
+      // });
       //创建区域是否点选
       bus.$on("changeDrawType", val => {
         this.scene.isSelecting = val == "select";
       })
+      /**
+       * @name changeScale缩放底图
+       * @param { Number } zoom 缩放比例
+       * 
+       */
+      // TODO: changeScale缩放底图
+      bus.$on('changeScale', zoom => {
+        let { scale } = this.view;
+        this.changeScaleByClick = true
+        this.view.scaleByPoint(zoom, this.canvasWidth / 2, this.canvasHeight / 2)
+        this.changeScaleByClick = false
+        setTimeout(() => {
+        }, 100);
+      })
     },
     // 读取数据
     readGroup() {
@@ -404,7 +425,17 @@ export default {
         this.$emit("setCmdType", cmd);
       },
       deep: true
-    }
+    },
+    // 监听scale的变化 
+    'view.scale': {
+      handler(scale) {
+
+        // 滚轮触发的缩放
+        if (!this.changeScaleByClick) {
+          bus.$emit('mouseScale', scale / this.initScale)
+        }
+      }
+    },
   },
   created() {
     const href = window.location.href;

+ 65 - 16
src/components/edit/top_toolbar.vue

@@ -21,9 +21,9 @@
         </li>-->
         <li class="zoom-window">
           <div>
-            <img class="lock" :src="require(`./../../assets/images/缩小.png`)" alt />
-            <span class="percentage">100%</span>
-            <img class="lock" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
+            <img class="lock" @click="handleScale(-1)" :src="require(`./../../assets/images/缩小.png`)" alt />
+            <span class="percentage">{{scalePercent}}</span>
+            <img class="lock" @click="handleScale(1)" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
           </div>
           <span>缩放窗口</span>
         </li>
@@ -37,16 +37,8 @@
               <a-icon type="caret-down" class="down-icon" />
             </div>
             <a-menu slot="overlay">
-              <a-menu-item
-                v-for="item in alignmentOptions"
-                :key="item.value"
-                @click="changeAlignItem(item.value)"
-              >
-                <img
-                  style="width: 16px;margin-right: 5px;"
-                  :src="require(`./../../assets/images/`+item.img+`.png`)"
-                  alt
-                />
+              <a-menu-item v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
+                <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt />
                 <span>{{item.label}}</span>
               </a-menu-item>
             </a-menu>
@@ -133,10 +125,61 @@ export default {
           label: "水平分布",
           img: "t-level"
         }
-      ]
+      ],
+      scale: 0.5, //底图缩放比例
+      initScale: 0.5,  //初始 底图缩放比例
+      baseScale: 1.0,  //底图基础缩放比例,由底图加载完成后,传入进来
+      scaleStep: 0.05, // +-缩放步进 
     };
   },
+  computed: {
+    // 缩放比例显示文本
+    scalePercent() {
+      return (this.scale * 100).toFixed(0) + '%'
+    }
+  },
   methods: {
+    /**
+     * @name getInitScale
+     * @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
+     */
+    getInitScale() {
+      bus.$on('initScale', baseScale => {
+        this.baseScale = Number(baseScale || 1)
+      })
+    },
+    /**
+     * @name getMouseScale
+     * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
+     */
+    getMouseScale() {
+      //  zoom 为缩放后改变的比例 
+      bus.$on('mouseScale', zoom => {
+        this.scale = Number((zoom * this.initScale).toFixed(2))
+      })
+    },
+    /**
+     * @name handleScale 
+     * @param { Number } type  -1:点击 - 缩小底图; 1:点击 + 放大底图
+     * @description 点击 -+ 缩放底图
+     */
+    handleScale(type) {
+      // +-按钮禁用处理
+      let flag = true
+      // 设置缩放范围 0.05 ~ 100
+      if ((type < 0 && this.scale <= 0.05) || (type > 0 && this.scale >= 100)) {
+        flag = false
+      } else {
+        flag = true
+      }
+      if (!flag) {
+        return false
+      }
+      // emit 缩放比例 this.scale / oldScale
+      let oldScale = this.scale
+      this.scale = Number((oldScale + type * this.scaleStep).toFixed(2))
+      bus.$emit('changeScale', this.scale / oldScale)
+    },
     FocusItemChanged(itemMsg) {
       this.focusItem = null;
       if (itemMsg.itemList.length == 1) {
@@ -172,11 +215,15 @@ export default {
       bus.$emit("changeAlignItem", val);
     }
   },
-  mounted() {
+  async mounted() {
     bus.$on("FocusItemChanged", itemMsg => {
       console.log("itemMsg", itemMsg);
       this.FocusItemChanged(itemMsg);
     });
+    // 获取底图加载完成后的初始sacle
+    await this.getInitScale()
+    // 监听滚轮 底图缩放比例
+    this.getMouseScale()
   },
   created() {
     const href = window.location.href;
@@ -199,7 +246,7 @@ export default {
     });
     this.urlMsg = obj;
     // ///////////测试代码
-    const FloorName =  this.urlMsg.FloorName ? this.urlMsg.FloorName:'';
+    const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : '';
     this.urlMsg.floorName = systym[this.urlMsg.categoryId] + '-' + FloorName;
   }
 };
@@ -245,6 +292,8 @@ li {
           height: 16px;
         }
         .percentage {
+          display: inline-block;
+          width: 35px;
           border-bottom: 1px solid #c3c7cb;
           margin: 0 13px;
           font-size: 14px;