<template>
    <div>
        <canvas :id="id" width="800px" height="400px"></canvas>
    </div>
</template>

<script>
    import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";

    export default {
        name: "svgCanvas",
        data(){
            return{
                id: 'svg' + Date.now(),
                view: '',
                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
                }
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                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>
