Browse Source

新增平面图控制组件

YaolongHan 5 years ago
parent
commit
6fb4390a30

+ 16 - 5
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -100,6 +100,14 @@ export default {
     eventBus.$on("changeRatios", function(val) {
       that.changeRatios(val);
     });
+    eventBus.$on("downImgs", function(val) {
+      that.view.saveImage("saveImage" + new Date(), "png");
+    });
+    eventBus.$on("openDrags", function(val) {
+       if(val){
+         
+       }
+    });
   },
   methods: {
     clickItem(item) {
@@ -140,6 +148,7 @@ export default {
           this.drawAllItemColor();
           // this.drawMainScene.click(this, this.clickItem);
           this.drawMainScene.mouseMove(this, this.leftClickMove);
+          eventBus.$emit("viewScale", this.view.scale);
         });
       if (this.isScale) {
         this.cancelScale(this.view);
@@ -158,14 +167,16 @@ export default {
       //  console.log('move',a,b)
     },
     changeRatios(val) {
+      //计算缩放比例
+      this.view.scale = val;
+    },
+    moveScence() {
       //获取中心点
       let rect = this.view.scene.worldRect();
-      // //计算缩放比例
-      this.view.scale = this.view.scale * val *5;
-      // // 移动画布
-      this.view.origin.x =
+      // 移动画布
+      this.view.pos.x =
         (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
-      this.view.origin.y =
+      this.view.pos.y =
         (-(rect.bottom + rect.top) / 2) * this.view.scale +
         this.view.height / 2;
     }

+ 25 - 11
src/views/ready/buildfloor/drawGraphy/operateGraphyItem.vue

@@ -6,14 +6,14 @@
     <div class="div-box" @click="suitableRatio">
       <i class="el-icon-rank"></i>
     </div>
-    <div class="div-box">
+    <div class="div-box" @click="downImg">
       <i class="el-icon-download"></i>
     </div>
     <div class="div-box" @click="removeRatio">
       <i class="el-icon-remove-outline"></i>
     </div>
     <div class="line">
-      <el-slider tooltip-class="tooltip-class" v-model="sliderValue" @change="adjustRatio"></el-slider>
+      <el-slider tooltip-class="tooltip-class"  :max="0.02" :min="0.004" v-model="sliderValue" @change="adjustRatio"></el-slider>
     </div>
     <div class="div-box" @click="addRatio">
       <i class="el-icon-circle-plus-outline"></i>
@@ -25,13 +25,15 @@ import eventBus from "./bus.js";
 export default {
   data() {
     return {
-      sliderValue: 10
+      sliderValue: 0.004,
+      isopenDrags:false ,//是否鼠标左键移动图片
     };
   },
   methods: {
     // 开启拖动
     openDrag() {
-      // eventBus.$emit('openDrags')
+      this.isopenDrags = !this.isopenDrags;
+      eventBus.$emit('openDrags',this.isopenDrags)
     },
     //合适比例
     suitableRatio() {
@@ -44,23 +46,35 @@ export default {
     },
     //增加比例
     addRatio() {
-      if (this.sliderValue >= 90) {
-        this.sliderValue = 100;
+      if (this.sliderValue >= 0.02) {
+        this.sliderValue = 0.02;
       } else {
-        this.sliderValue = this.sliderValue + 10;
+        this.sliderValue = this.sliderValue + 0.001;
       }
       eventBus.$emit("changeRatios", this.sliderValue);
     },
     //减少比例
     removeRatio() {
-      if (this.sliderValue <= 10) {
-        this.sliderValue = 0;
+      if (this.sliderValue <=0.004) {
+        this.sliderValue = 0.004;
       } else {
-        this.sliderValue = this.sliderValue - 10;
+        this.sliderValue = this.sliderValue - 0.001;
       }
       eventBus.$emit("changeRatios", this.sliderValue);
+    },
+    // 下载图片
+    downImg(){
+      eventBus.$emit("downImgs");
     }
-  }
+  },
+  mounted() {
+    let that = this;
+     eventBus.$on('viewScale',function(scale){
+       console.log(scale,'scalescale')
+       that.sliderValue = scale;
+
+     })
+  },
 };
 </script>
 <style lang="less">