window.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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 { SWindowItem } from "@persagy-web/big/lib/items/floor/SWindowItem";
  9. import { Component, Vue } from "vue-property-decorator";
  10. @Component
  11. export default class WindowCanvas extends Vue {
  12. /** 实例化 view */
  13. view: SGraphView | undefined;
  14. outline1 = [[{X: 120, Y: -30}, {X: 120, Y: -50}, {X: 10, Y: -50}, {X: 10, Y: -30}]];
  15. /**
  16. * 页面挂载
  17. */
  18. mounted(): void {
  19. this.init();
  20. }
  21. /**
  22. * 初始化加载
  23. */
  24. init(): void {
  25. this.view = new SGraphView('wall');
  26. const scene = new SGraphScene();
  27. this.view.scene = scene;
  28. // 只模拟了轮廓数据
  29. // @ts-ignore
  30. const item = new SWindowItem(null, {OutLine: this.outline1});
  31. scene.addItem(item);
  32. this.view.fitSceneToView();
  33. this.view.scalable = false;
  34. }
  35. }
  36. </script>
  37. <style scoped>
  38. </style>