svg.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <div>
  3. <canvas :id="id" width="800px" height="400px"></canvas>
  4. </div>
  5. </template>
  6. <script>
  7. import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
  8. export default {
  9. name: "svgCanvas",
  10. data(){
  11. return{
  12. id: 'svg' + Date.now(),
  13. view: '',
  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. X: 100,
  18. Y: 100,
  19. Width: 200,
  20. Height: 200
  21. }
  22. }
  23. },
  24. mounted() {
  25. this.init()
  26. },
  27. methods:{
  28. init(){
  29. this.view = new SGraphView(this.id);
  30. const scene = new SGraphScene();
  31. this.view.scene = scene;
  32. const item = new SGraphSvgItem(null, this.svgData);
  33. scene.addItem(item);
  34. this.view.fitSceneToView();
  35. }
  36. }
  37. }
  38. </script>
  39. <style scoped>
  40. </style>