|
@@ -0,0 +1,65 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <canvas :id="id" width="800px" height="400px"></canvas>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
|
|
|
+ import {SRect} from "@persagy-web/draw/lib";
|
|
|
+
|
|
|
+ class SGraphSvgItem extends SGraphShape{
|
|
|
+
|
|
|
+ constructor(parent, data) {
|
|
|
+ super(parent, data.Style);
|
|
|
+ this.img = new Image();
|
|
|
+ this.img.src = data.Url;
|
|
|
+ this.img.onload = e => {
|
|
|
+ console.log(e);
|
|
|
+ console.log('---------------');
|
|
|
+ // this.width =
|
|
|
+ this.update()
|
|
|
+ };
|
|
|
+ this.img.onerror = err => {
|
|
|
+ console.log(err)
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ boundingRect() {
|
|
|
+ return new SRect(0,0,100,100)
|
|
|
+ }
|
|
|
+
|
|
|
+ onDraw(painter) {
|
|
|
+ painter.drawImage(this.img, 0, 0, 100, 100)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "svgCanvas",
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ id: 'svg' + Date.now(),
|
|
|
+ view: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ init(){
|
|
|
+ this.view = new SGraphView(this.id);
|
|
|
+ const scene = new SGraphScene();
|
|
|
+ this.view.scene = scene;
|
|
|
+ // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
|
|
|
+ // https://cdn-img.easyicon.net/image/2019/panda-search.svg
|
|
|
+ const item = new SGraphSvgItem(null, { Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg'});
|
|
|
+ scene.addItem(item);
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|