ibms/src/views/ready/buildfloor/drawGraphy/drawFloor.vue

<template>
  <div id="drawFloor" v-loading="canvasLoading">
    <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas"></canvas>
  </div>
</template>

<script>
import eventBus from "./bus.js";
import { SGraphyView } from "@sybotan-web/graphy/lib";
import { FloorScene } from "cad-engine";
import { SColor } from "@sybotan-web/draw/lib";
export default {
  data() {
    return {
      drawMainScene: null,
      view: null,
      dataKey: '',
      cadWidth: 800,
      cadHeight: 600,
      canvasLoading: false
    };
  },
  mounted() {
    // this.initGraphy('3af6d175c34e11e993ac85337be80696');
    // let that = this;
    // eventBus.$on("suitableRatios", function () {
    //   that.view.fitSceneToView();
    // });
    // 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) {

    //   }
    // });
    this.cadWidth = document.getElementById("drawFloor").offsetWidth;
    this.cadHeight = document.getElementById("drawFloor").offsetHeight;
  },
  methods: {
    clickItem(item) {
      this.$emit("clickGraphyItem", item);
    },
    // 单个个体绘制颜色
    drawItemColor(item, color) {
      item.fillColor = new SColor(color); //需要缓存的边框
      item.cacheFillColor = new SColor(color); //需要
    },
    // 绘制所有的item
    drawAllItemColor() {
      this.drawMainScene.root.children.forEach((item, index) => {
        let color = this.initColor[index % 10];
        this.drawItemColor(item, color);
      });
    },
    initGraphy(ModelId) {
      this.dataKey = ModelId
      if (!this.dataKey) {
        return;
      }
      this.canvasLoading = true
      this.clearGraphy()
      // 初始化view类
      this.view = new SGraphyView("floorCanvas");
      this.drawMainScene = new FloorScene(null);
      let that = this;
      this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
        that.view.scene = that.drawMainScene
        that.view.fitSceneToView();
        this.canvasLoading = false
      })
      if (this.isScale) {
        this.cancelScale(this.view);
      }
    },
    // 单个item 高亮
    heightLightitem(item, highlightColor) {
      // this.drawItemColor(item, highlightColor);
    },
    // 取消放大缩小
    cancelScale(view) {
      // view.wheelZoom = 1;
    },
    // 左键长按控制canvas的坐标
    leftClickMove(a, b) {
      //  console.log('move',a,b)
    },
    changeRatios(val) {
      //计算缩放比例
      this.view.scale = val;
    },
    clearGraphy() {
      if(this.drawMainScene){
        this.drawMainScene.root.children = null
        this.drawMainScene = null;
        this.view = null;
      }
    }
  },
  watch: {
    findGraphyItemId(n) {
      if (n) {
        this.heightLightitem();
      }
    }
  }
};
</script>
<style scoped lang="less">
#drawFloor {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>