svg.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <div>
  3. <canvas :id="id" width="800px" height="400px"></canvas>
  4. </div>
  5. </template>
  6. <script>
  7. import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
  8. import {SRect} from "@persagy-web/draw/lib";
  9. class SGraphSvgItem extends SGraphShape{
  10. constructor(parent, data) {
  11. super(parent, data.Style);
  12. this.img = new Image();
  13. this.img.src = data.Url;
  14. this.img.onload = e => {
  15. console.log(e);
  16. console.log('---------------');
  17. // this.width =
  18. this.update()
  19. };
  20. this.img.onerror = err => {
  21. console.log(err)
  22. };
  23. }
  24. boundingRect() {
  25. return new SRect(0,0,100,100)
  26. }
  27. onDraw(painter) {
  28. painter.drawImage(this.img, 0, 0, 100, 100)
  29. }
  30. }
  31. export default {
  32. name: "svgCanvas",
  33. data(){
  34. return{
  35. id: 'svg' + Date.now(),
  36. view: '',
  37. }
  38. },
  39. mounted() {
  40. this.init()
  41. },
  42. methods:{
  43. init(){
  44. this.view = new SGraphView(this.id);
  45. const scene = new SGraphScene();
  46. this.view.scene = scene;
  47. // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
  48. // https://cdn-img.easyicon.net/image/2019/panda-search.svg
  49. const item = new SGraphSvgItem(null, { Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg'});
  50. scene.addItem(item);
  51. this.view.fitSceneToView();
  52. }
  53. }
  54. }
  55. </script>
  56. <style scoped>
  57. </style>