zone.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div>
  3. <canvas id="wall" width="800" height="400" tabindex="0" />
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import {SGraphScene, SGraphView} from "@persagy-web/graph/";
  8. import {SZoneItem} from "@persagy-web/big/lib/items/floor/ZoneItem";
  9. import { Component, Vue } from "vue-property-decorator";
  10. @Component
  11. export default class ZoneCanvas extends Vue {
  12. outline = [
  13. [
  14. // 未掏洞的空间
  15. [
  16. {"X":30150.15,"Y":82300.04,"Z":59400.0},
  17. {"X":30150.15,"Y":81400.04,"Z":59400.0},
  18. {"X":33400.15,"Y":82300.04,"Z":59400.0},
  19. {"X":30150.15,"Y":82300.04,"Z":59400.0}
  20. ],
  21. ],
  22. [
  23. // 掏洞的空间
  24. [
  25. {"X":25500.15,"Y":77100.04,"Z":59400.0},
  26. {"X":28200.15,"Y":77100.04,"Z":59400.0},
  27. {"X":28200.15,"Y":82300.04,"Z":59400.0},
  28. {"X":25500.15,"Y":82300.04,"Z":59400.0},
  29. {"X":25500.15,"Y":77100.04,"Z":59400.0}
  30. ],
  31. [
  32. {"X":25900.15,"Y":80300.04,"Z":59400.0},
  33. {"X":27200.15,"Y":80300.04,"Z":59400.0},
  34. {"X":27200.15,"Y":77900.04,"Z":59400.0},
  35. {"X":25900.15,"Y":77900.04,"Z":59400.0},
  36. ]
  37. ]
  38. ];
  39. view: SGraphView | undefined;
  40. mounted() {
  41. this.init();
  42. };
  43. init(){
  44. this.view = new SGraphView('wall');
  45. const scene = new SGraphScene();
  46. this.view.scene = scene;
  47. // 只模拟了轮廓数据
  48. // @ts-ignore
  49. const item = new SZoneItem(null,{OutLine:this.outline});
  50. scene.addItem(item);
  51. this.view.fitSceneToView();
  52. this.view.scalable = false;
  53. }
  54. }
  55. </script>
  56. <style scoped>
  57. </style>