<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>