wall.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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 {SWallItem} from "../../../../guides/big/items/src/SWallItem";
  9. export default {
  10. name: "wall",
  11. data(){
  12. return {
  13. view: null,
  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. 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 SWallItem(null,{OutLine:this.outline1});
  34. scene.addItem(item);
  35. // 只模拟了轮廓数据
  36. const item2 = new SWallItem(null,{OutLine:this.outline2});
  37. scene.addItem(item2);
  38. this.view.fitSceneToView();
  39. }
  40. }
  41. }
  42. </script>
  43. <style scoped>
  44. </style>