SVG 图

目录

• item 实例

item 实例

查看源代码：/persagy-web-graph/src/items/SGraphSvgItem.ts

查看代码使用

<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";
    import { v1 as uuid } from "uuid";

    @Component
    export default class SvgCanvas extends Vue{
        id: string = uuid();
        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>

示例中展示了传入SGraphSvgItem的数据格式

{
    Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',    // svg 图片的路径
    X: 100, // 该 item 的位置 x 坐标
    Y: 100, // 该 item 的位置 y 坐标                                                                  
    Width: 200, // 该 item 宽
    Height: 200 // 该 item 高
}