|
@@ -5,34 +5,7 @@
|
|
|
</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)
|
|
|
- }
|
|
|
- }
|
|
|
+ import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
|
|
|
|
|
|
export default {
|
|
|
name: "svgCanvas",
|
|
@@ -40,6 +13,14 @@
|
|
|
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() {
|
|
@@ -50,9 +31,7 @@
|
|
|
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'});
|
|
|
+ const item = new SGraphSvgItem(null, this.svgData);
|
|
|
scene.addItem(item);
|
|
|
this.view.fitSceneToView();
|
|
|
}
|