window.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  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 {SWindowItem} from "../../../../guides/big/items/src/SWindowItem";
  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. },
  18. mounted() {
  19. this.init();
  20. },
  21. methods:{
  22. init(){
  23. this.view = new SGraphView('wall');
  24. // this.view.scalable = false;
  25. const scene = new SGraphScene();
  26. this.view.scene = scene;
  27. // 只模拟了轮廓数据
  28. const item = new SWindowItem(null,{OutLine:this.outline1});
  29. scene.addItem(item);
  30. this.view.fitSceneToView();
  31. console.log(this.view)
  32. }
  33. }
  34. }
  35. </script>
  36. <style scoped>
  37. </style>