Browse Source

modify canvas

haojianlong 5 years ago
parent
commit
df82d60f1c
1 changed files with 81 additions and 59 deletions
  1. 81 59
      src/views/data_admin/buildGraphy/graphyCanvas-copy.vue

+ 81 - 59
src/views/data_admin/buildGraphy/graphyCanvas-copy.vue

@@ -7,11 +7,16 @@
     <div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
       <canvas id="canvas" :width="canvasW" :height="canvasH"></canvas>
     </div>
-    <div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
+    <!-- <div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
       <el-button size="small" @click="smallSize" type="primary">- 缩小</el-button>
       <el-button size="small" @click="suitableSize" type="primary">合适比例</el-button>
       <el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
-    </div>
+    </div> -->
+    <!-- 底部操作按钮 -->
+    <el-row v-if="type == 3" class="canvas-actions-box">
+      <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
+        @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
+    </el-row>
     <div v-show="menuShow" id="menu" ref="menu">
       <p @click="getDatails">编辑该标签</p>
       <p @click="clearXY">清除该点位的坐标</p>
@@ -21,6 +26,7 @@
 </template>
 
 <script>
+import canvasFun from "@/components/business_space/newGraphy/canvasFun"
 //引擎的引用
 import { mapGetters, mapActions } from "vuex";
 import tools from "@/utils/scan/tools";
@@ -38,13 +44,17 @@ let colorArr = [
 
 
 export default {
+  components: {
+    canvasFun
+  },
   props: {
     param: null
   },
   data() {
     return {
-      view: "",
-      scene: null,
+      isEdit: false, //是否为编辑态
+      view: null, //视图
+      scene: null, //场景
       dataMax: "", //最大值最小值数据
       menuShow: false, //右键菜单的显示
       lineShow: false,
@@ -104,7 +114,9 @@ export default {
         that.view.maxScale = that.view.scale * 10;
         that.view.minScale = that.view.scale;
         that.view.fitSceneToView();
-        // that.$refs.canvasFun.everyScale = that.view.scale;
+        console.log(that.view)
+        console.log(that.$refs.canvasFun)
+        that.$refs.canvasFun.everyScale = that.view.scale;
       })
     },
     //画点位坐标
@@ -153,48 +165,11 @@ export default {
       }
       this.view = new SGraphyView("canvas");
     },
-    //实例化视图
-    initGraphy(data) {
-      this.resetSize();
-      let items = this.scene.root.children;
-      items.map((t, i) => {
-        this.drawText(t)
-        this.applyColor(t, i)
-      })
-    },
     //初始化canvas大小
     resetSize() {
       this.canvasH = document.getElementsByClassName("canvasGraphy")[0].offsetHeight;
       this.$refs.canvasContainer.style.height = this.canvasH + "px";
     },
-    // 绘出文案
-    drawText(item) {
-      if (item.initName) {
-        if (this.isBusiness == 1) {
-          item.fillColor = new SColor(111, 111, 111, .5)
-        } else if (this.isBusiness == 2) {
-          item.fillColor = new SColor("#333");
-        } else if (this.isBusiness == 3) {
-          //业务空间异常状态
-          item.fillColor = new SColor('#fff')
-        } else if (this.isBusiness == 4) {
-          item.fillColor = new SColor('#cacaca')
-        } else if (this.isBusiness == 6) {
-          item.fillColor = new SColor('#fff')
-        } else if (this.isBusiness == 7) {
-          item.fillColor = new SColor('red')
-        }
-      }
-      if (item.businessName || item.businessId) {
-        item.viewText = "👇   " + item.businessName;
-      } else {
-        item.viewText = "⬇️   " + item.initName;
-      }
-    },
-    //分配随机颜色
-    applyColor(t, i) {
-      t.fillColor = new SColor(colorArr[i % 10]);
-    },
     // 定位
     locationGraphy(point) {
       let centerX = (this.view.width / 2) - point.X * this.view.scale;
@@ -214,22 +189,6 @@ export default {
       this.$refs.menu.style.left = e.screenX - 240 + "px";
       this.$refs.menu.style.top = e.screenY - 246 + "px";
     },
-    //合适比例
-    suitableSize() {
-      this.view.fitSceneToView();
-    },
-    //缩小
-    smallSize() {
-      let centerX = this.view.width / 2
-      let centerY = this.view.height / 2
-      this.view.scaleByPoint(0.9, centerX, centerY)
-    },
-    //放大
-    bigSize() {
-      let centerX = this.view.width / 2
-      let centerY = this.view.height / 2
-      this.view.scaleByPoint(1.1, centerX, centerY)
-    },
     //插旗 item - 点击的空间item
     setNewFlag(item, event) {
       this.menuShow = false
@@ -280,12 +239,68 @@ export default {
     //
     markClick() {
       console.log(arguments)
-    }
+    },
+    // 工具栏操作
+    // 移动底图
+    moveCanvas(move) {
+      // todo
+      let canvas = document.getElementById(`floorCanvas`);
+      if (move) {
+        canvas.style.cursor = 'move';
+      } else {
+        canvas.style.cursor = 'default';
+      }
+    },
+    // 适配底图到窗口
+    fit() {
+      console.log(this.view.scale)
+      this.view.fitSceneToView()
+    },
+    // 保存为png
+    savePng() {
+      this.view.saveImage(`${this.buildMess.code}.png`, 'png');
+    },
+    // 保存为svg
+    saveSvg() {
+      this.view.saveSceneSvg(`${this.buildMess.code}.svg`, 6400, 4800);
+    },
+    // 切割划分
+    divide() {
+      this.drawMainScene.isMarking = true;
+    },
+    // 清除切割划分
+    clearDivide() {
+      this.drawMainScene.clearSceneMark()
+    },
+    // 撤销
+    undo() {
+
+    },
+    // 反撤销
+    redo() { },
+    // 缩放
+    scale(val) {
+      // return
+      if (!this.view) {
+          return;
+      }
+      console.log(val)
+      // let scale = this.view.scale;
+      // this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
+    },
   },
   watch: {
     projectId() {
       this.type = 1
       this.resize()
+    },
+    "view.scale": {
+      handler(n) {
+        console.log(n)
+        // if (this.$refs.canvasFun) {
+        //   this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
+        // }
+      }
     }
   }
 };
@@ -325,5 +340,12 @@ export default {
   #menu p:hover {
     background-color: aqua;
   }
+  .canvas-actions-box {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+  }
 }
 </style>