space.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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 */
  13. view: SGraphView | undefined;
  14. // 图中靠上位置的黑色矩形轮廓
  15. outline1 = [[{X: 120, Y: 10}, {X: 120, Y: 30}, {X: 10, Y: 30}, {X: 10, Y: 10}]];
  16. // 图中靠下位置的,中间掏洞
  17. outline2 = [
  18. [{X: 120, Y: -30}, {X: 120, Y: -50}, {X: 10, Y: -50}, {X: 10, Y: -30}],
  19. [{X: 20, Y: -40}, {X: 20, Y: -45}, {X: 100, Y: -45}, {X: 100, Y: -40}]
  20. ];
  21. /**
  22. * 页面挂载
  23. */
  24. mounted(): void {
  25. this.init();
  26. };
  27. /**
  28. * 初始化加载
  29. */
  30. init(): void {
  31. this.view = new SGraphView('wall');
  32. const scene = new SGraphScene();
  33. this.view.scene = scene;
  34. // 只模拟了轮廓数据
  35. // @ts-ignore
  36. const item = new SSpaceItem(null, {OutLine: this.outline1, Name: '测试', Location: {Points: [{X: 65, Y: 20}]}});
  37. scene.addItem(item);
  38. // 只模拟了轮廓数据
  39. // @ts-ignore
  40. const item2 = new SSpaceItem(null,{OutLine:this.outline2});
  41. scene.addItem(item2);
  42. this.view.fitSceneToView();
  43. this.view.scalable = false;
  44. }
  45. }
  46. </script>
  47. <style scoped>
  48. </style>