door.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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 { SDoorItem } from "@persagy-web/big/lib/items/floor/SDoorItem";
  9. import { Component, Vue } from "vue-property-decorator";
  10. /**
  11. * 门对象示例
  12. *
  13. * @author 郝洁 <haojie@persagy.com>
  14. */
  15. @Component
  16. export default class WallCanvas extends Vue {
  17. /** 实例化 view */
  18. view: SGraphView | undefined;
  19. outline1 = [[{X: 12000, Y: 10000}, {X: 12000, Y: 30000}]];
  20. /**
  21. * 页面挂载
  22. */
  23. mounted(): void {
  24. this.init();
  25. };
  26. /**
  27. * 初始化加载
  28. */
  29. init(): void {
  30. this.view = new SGraphView('wall');
  31. const scene = new SGraphScene();
  32. this.view.scene = scene;
  33. // 只模拟了轮廓数据
  34. // @ts-ignore
  35. const item = new SDoorItem(null,
  36. // @ts-ignore
  37. {
  38. OutLine: this.outline1,
  39. FaceDirection: {X: 0, Y: -1, Z: 0},
  40. HandDirection: {X: 1, Y: 0, Z: 0}
  41. }
  42. );
  43. scene.addItem(item);
  44. this.view.fitSceneToView();
  45. }
  46. }
  47. </script>
  48. <style scoped>
  49. </style>