<template> <div> <canvas :id="id" width="800px" height="400px"></canvas> </div> </template> <script lang="ts"> import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib"; import { Component, Vue } from "vue-property-decorator"; @Component export default class SvgCanvas extends Vue{ id: string = 'svg' + Date.now(); view: SGraphView | undefined; svgData = { // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg', X: 100, Y: 100, Width: 200, Height: 200 }; private mounted(): void { this.init() }; init(): void { this.view = new SGraphView(this.id); const scene = new SGraphScene(); this.view.scene = scene; const item = new SGraphSvgItem(null, this.svgData); scene.addItem(item); this.view.fitSceneToView(); }; } </script> <style scoped> </style>