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 "../../../../guides/big/items/src/SDoorItem";
  9. export default {
  10. name: "wall",
  11. data(){
  12. return {
  13. view: null,
  14. // 图中靠上位置的黑色矩形轮廓
  15. outline1:[[{X:120,Y:100},{X:120,Y:300}]],
  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. // this.view.scalable = false;
  30. const scene = new SGraphScene();
  31. this.view.scene = scene;
  32. // 只模拟了轮廓数据
  33. const item = new SDoorItem(null,
  34. {
  35. OutLine:this.outline1,
  36. FaceDirection: {X: 0, Y: -1, Z: 0},
  37. HandDirection: {X: 1, Y: 0, Z: 0}
  38. }
  39. );
  40. scene.addItem(item);
  41. // 只模拟了轮廓数据
  42. // const item2 = new SDoorItem(null,
  43. // {
  44. // OutLine:this.outline2,
  45. // FaceDirection: {X: -1, Y: 1, Z: 0},
  46. // HandDirection: {X: 1, Y: 1, Z: 0}
  47. // }
  48. // );
  49. // scene.addItem(item2);
  50. // this.view.fitSceneToView();
  51. }
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. </style>