door.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div>
  3. <canvas id="wall" width="800" height="400" tabindex="0" />
  4. </div>
  5. </template>
  6. <script>
  7. import {SGraphScene, SGraphView} from "@persagy-web/graph/";
  8. import {SDoorItem} from "@persagy-web/big/lib/items/floor/SDoorItem";
  9. export default {
  10. name: "wall",
  11. data(){
  12. return {
  13. view: null,
  14. // 图中靠上位置的黑色矩形轮廓
  15. outline1:[[{X:12000,Y:10000},{X:12000,Y:30000}]],
  16. // 图中靠下位置的,绘制多个图形,会覆盖
  17. // outline2:[
  18. // [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
  19. // [{X:20,Y:-30},{X:20,Y:-85},{X:110,Y:-85},{X:110,Y:-40}]
  20. // ]
  21. }
  22. },
  23. mounted() {
  24. this.init();
  25. },
  26. methods:{
  27. init(){
  28. this.view = new SGraphView('wall');
  29. const scene = new SGraphScene();
  30. this.view.scene = scene;
  31. // 只模拟了轮廓数据
  32. const item = new SDoorItem(null,
  33. {
  34. OutLine:this.outline1,
  35. FaceDirection: {X: 0, Y: -1, Z: 0},
  36. HandDirection: {X: 1, Y: 0, Z: 0}
  37. }
  38. );
  39. scene.addItem(item);
  40. // 只模拟了轮廓数据
  41. // const item2 = new SDoorItem(null,
  42. // {
  43. // OutLine:this.outline2,
  44. // FaceDirection: {X: -1, Y: 1, Z: 0},
  45. // HandDirection: {X: 1, Y: 1, Z: 0}
  46. // }
  47. // );
  48. // scene.addItem(item2);
  49. this.view.fitSceneToView();
  50. // this.view.scalable = false;
  51. }
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. </style>