space.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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 {SSpaceItem} from "@persagy-web/big/lib/items/floor/SSpaceItem";
  9. import { Component, Vue } from "vue-property-decorator";
  10. @Component
  11. export default class SpaceCanvas extends Vue {
  12. view: SGraphView | undefined;
  13. // 图中靠上位置的黑色矩形轮廓
  14. outline1 = [[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]];
  15. // 图中靠下位置的,中间掏洞
  16. outline2 = [
  17. [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
  18. [{X:20,Y:-40},{X:20,Y:-45},{X:100,Y:-45},{X:100,Y:-40}]
  19. ];
  20. mounted(): void {
  21. this.init();
  22. };
  23. init(): void {
  24. this.view = new SGraphView('wall');
  25. const scene = new SGraphScene();
  26. this.view.scene = scene;
  27. // 只模拟了轮廓数据
  28. // @ts-ignore
  29. const item = new SSpaceItem(null,{OutLine:this.outline1, Name:'测试',Location:{Points:[{X:65,Y:20}]}});
  30. scene.addItem(item);
  31. // 只模拟了轮廓数据
  32. // @ts-ignore
  33. const item2 = new SSpaceItem(null,{OutLine:this.outline2});
  34. scene.addItem(item2);
  35. this.view.fitSceneToView();
  36. this.view.scalable = false;
  37. }
  38. }
  39. </script>
  40. <style scoped>
  41. </style>