Browse Source

提交比例缩放

yunxing 4 years ago
parent
commit
fbd2f8d338

+ 25 - 0
src/components/editview/basePlanEditer.vue

@@ -46,6 +46,8 @@ export default {
                     effect: {},
                 },
             },
+            changeScaleByClick: false, //区分滚轮,点击 事件改变的缩放比例
+            initScale: 1,
         };
     },
     computed: {
@@ -211,6 +213,12 @@ export default {
             // 画板是否可拖动
             this.view.DragMove = true;
             this.view.fitSceneToView();
+
+            // 设置初始化缩放比例
+            this.initScale = this.view.scale;
+            // this.view.maxScale = this.initScale * 10;
+            // this.view.minScale = this.initScale / 10;
+            bus.$emit("initScale", this.view.scale);
         },
 
         // 恢复命令状态
@@ -326,6 +334,13 @@ export default {
             bus.$on("chioceItem", (item) => {
                 this.scene.toggleItem(item);
             });
+            // 比例缩放
+            bus.$off("scale");
+            bus.$on("scale", (newV, oldV) => {
+                this.changeScaleByClick = true;
+                this.view.scaleByPoint(newV / oldV, this.canvasWidth / 2, this.canvasHeight / 2);
+                this.changeScaleByClick = false;
+            });
         },
         // 读取拓扑图
         readPlanMsg() {
@@ -664,6 +679,16 @@ export default {
             },
             deep: true,
         },
+        // 监听scale的变化
+        "view.scale": {
+            handler(scale) {
+                // 滚轮触发的缩放
+                if (!this.changeScaleByClick) {
+                    bus.$emit("mouseScale", scale / this.initScale);
+                }
+                console.trace(scale);
+            },
+        },
     },
     beforeDestroy() {
         clearInterval(this.autoSave);

+ 56 - 37
src/components/editview/bottomToolBar.vue

@@ -2,49 +2,56 @@
     <div>
         <div class="action-box">
             <div class="small-block" @click="showText">
-                <i>
-                    <el-tooltip v-if="isShow" effect="dark" content="隐藏店铺名称" placement="top">
+                <span>
+                    <el-tooltip v-if="isShow" effect="dark" content="区域显示" placement="top">
                         <!-- <img src="@/assets/images/issue.png" alt /> -->
+                        <i class="iconfont icon-quyuxianshi"></i>
                     </el-tooltip>
-                    <el-tooltip v-else effect="dark" content="显示店铺名称" placement="top">
+                    <el-tooltip v-else effect="dark" content="区域隐藏" placement="top">
                         <!-- <img src="@/assets/images/issue.png" alt /> -->
+                        <i class="iconfont icon-quyuxianshi1"></i>
                     </el-tooltip>
-                </i>
+                </span>
             </div>
-            <div class="small-block" @click="">
-                <i>
-                    <!-- <img src="../../assets/imgs/eye2.jpg" alt /> -->
-                </i>
+            <div class="small-block" @click="showText">
+                <span>
+                    <el-tooltip v-if="isShow" effect="dark" content="底图显示" placement="top">
+                        <!-- <img src="@/assets/images/issue.png" alt /> -->
+                        <i class="iconfont icon-dituxianyin"></i>
+                    </el-tooltip>
+                    <el-tooltip v-else effect="dark" content="底图隐藏" placement="top">
+                        <!-- <img src="@/assets/images/issue.png" alt /> -->
+                        <i class="iconfont icon-dituxianyin1"></i>
+                    </el-tooltip>
+                </span>
             </div>
-            <div class="small-size" @click="reduce">
-                <i class="reduce">-</i>
-                <i class="value">100%</i>
-                <i class="plus">+</i>
+            <div class="small-size">
+                <i class="reduce" @click="reduce">-</i>
+                <i class="value">{{ sliderValPercent }}</i>
+                <i class="plus" @click="plus">+</i>
             </div>
-            <!-- <div class="small-text">
-                <el-slider tooltip-class="tooltip-class" :min="min" v-model="sliderVal" :show-tooltip="false" @input="scale" :max="max"></el-slider>
-                100%
-            </div> -->
-            <!-- <div class="small-size" @click="plus">
-                <i>+</i>
-            </div> -->
         </div>
     </div>
 </template>
 <script>
+import bus from "@/bus/bus";
 export default {
     data() {
         return {
-            sliderVal: 1, // 滑块值
             active: "",
-            min: 1,
-            max: 200,
-            everyScale: 1, // 每份的放大倍数
+            initScale: 1, //初始 底图缩放比例
+            sliderVal: 1, // 缩放比例
+            min: 0.1,
+            max: 5,
             isSwitch: false, // 是否开启吸附
             isShow: false,
         };
     },
-
+    computed: {
+        sliderValPercent() {
+            return `${(this.sliderVal * 100).toFixed(0)}%`;
+        },
+    },
     methods: {
         // 适配大小
         fitToWindow() {
@@ -70,38 +77,49 @@ export default {
         },
         // 减
         reduce() {
-            this.sliderVal /= 1.1;
+            const oldV = this.sliderVal;
+            this.sliderVal = Number((this.sliderVal - 0.1).toFixed(1));
             if (this.sliderVal < this.min) {
                 this.sliderVal = this.min;
             }
-            this.scale(this.sliderVal);
-        },
-        // 缩放
-        scale(val) {
-            // 换算
-            let scale = (val * this.everyScale) / 10;
-            this.$emit("scale", scale);
+            bus.$emit("scale", this.sliderVal, oldV);
         },
         // 加
         plus() {
-            this.sliderVal *= 1.1;
+            const oldV = this.sliderVal;
+            this.sliderVal = Number((this.sliderVal + 0.1).toFixed(1));
             if (this.sliderVal > this.maxScale) {
                 this.sliderVal = this.maxScale;
             }
-            this.scale(this.sliderVal);
+            bus.$emit("scale", this.sliderVal, oldV);
+        },
+        /**
+         * @name getMouseScale
+         * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
+         */
+        getMouseScale() {
+            //  zoom 为缩放后改变的比例
+            bus.$off("mouseScale");
+            bus.$on("mouseScale", (zoom) => {
+                const s = Number((zoom * this.initScale).toFixed(2));
+                this.sliderVal = s > 0.1 ? s : 0.1;
+            });
         },
         showText() {
             this.isShow = !this.isShow;
             this.$emit("showText", this.isShow);
         },
     },
-    mounted() {},
+    mounted() {
+        this.getMouseScale();
+    },
 };
 </script>
 <style lang="less" scoped>
 .action-box {
     width: 183px;
     height: 32px;
+    background-color: #fff;
     box-shadow: 0px 3px 5px 0px rgba(141, 147, 153, 0.1);
     border-radius: 2px;
     border: 1px solid #c3c7cb;
@@ -118,14 +136,15 @@ export default {
         justify-content: center;
         // padding: 12px;
         cursor: not-allowed;
-        i {
+        & > span {
             width: 16px;
             height: 16px;
             display: inline-block;
-            img {
+            i {
                 width: 100%;
                 height: 100%;
                 vertical-align: top;
+                display: inline-block;
             }
         }
     }

+ 1 - 1
src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -180,7 +180,7 @@ export default {
             set: function (newV) {
                 const oldV = this.LineItem.lineWidth;
                 this.LineItem.lineWidth = newV;
-                bus.$emit("undoAttr", this.LineItem, "font", oldV, newV);
+                bus.$emit("undoAttr", this.LineItem, "lineWidth", oldV, newV);
             },
         },
         /**