svg.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  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. import { v1 as uuid } from "uuid";
  10. @Component
  11. export default class SvgCanvas extends Vue{
  12. id: string = uuid();
  13. view: SGraphView | undefined;
  14. svgData = {
  15. // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
  16. // Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
  17. Url: require('../../../public/assets/img/1.svg'),
  18. X: 100,
  19. Y: 100,
  20. Width: 200,
  21. Height: 200
  22. };
  23. private mounted(): void {
  24. this.init()
  25. };
  26. init(): void {
  27. this.view = new SGraphView(this.id);
  28. const scene = new SGraphScene();
  29. this.view.scene = scene;
  30. const item = new SGraphSvgItem(null, this.svgData);
  31. scene.addItem(item);
  32. // setInterval(() => {
  33. // item.width+=10;
  34. // item.height+=10;
  35. // },500)
  36. // this.view.fitSceneToView();
  37. };
  38. }
  39. </script>