persagy-web-doc/docs/.vuepress/components/scene/items/svg.vue

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

<script lang="ts">
import { SGraphScene, SGraphSvgItem, SGraphView } from "@persagy-web/graph/lib";
import { Component, Vue } from "vue-property-decorator";
import { v1 as uuid } from "uuid";

/**
 *  SVG 图
 *
 * @author 郝洁 <haojie@persagy.com>
 */
@Component
export default class SvgCanvas extends Vue {
    /** 图 id */
    id: string = uuid();
    /** 实例化 view */
    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',
        url: require('../../../public/assets/img/1.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);
        // setInterval(() => {
        //     item.width+=10;
        //     item.height+=10;
        // },500)
        // this.view.fitSceneToView();
    };
}
</script>