svg.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div>
  3. <canvas :id="id" width="800px" height="400px"></canvas>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
  8. import { Component, Vue } from "vue-property-decorator";
  9. @Component
  10. export default class SvgCanvas extends Vue{
  11. id: string = 'svg' + Date.now();
  12. view: SGraphView | undefined;
  13. svgData = {
  14. // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
  15. Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
  16. X: 100,
  17. Y: 100,
  18. Width: 200,
  19. Height: 200
  20. };
  21. private mounted(): void {
  22. this.init()
  23. };
  24. init(): void {
  25. this.view = new SGraphView(this.id);
  26. const scene = new SGraphScene();
  27. this.view.scene = scene;
  28. const item = new SGraphSvgItem(null, this.svgData);
  29. scene.addItem(item);
  30. this.view.fitSceneToView();
  31. };
  32. }
  33. </script>
  34. <style scoped>
  35. </style>