<template> <div> <canvas id="wall" width="800" height="400" tabindex="0" /> </div> </template> <script lang="ts"> import {SGraphScene, SGraphView} from "@persagy-web/graph/"; import {SZoneItem} from "@persagy-web/big/lib/items/floor/ZoneItem"; import {Component, Vue} from "vue-property-decorator"; @Component export default class ZoneCanvas extends Vue { outline = [ [ // 未掏洞的空间 [ {"X":30150.15,"Y":82300.04,"Z":59400.0}, {"X":30150.15,"Y":81400.04,"Z":59400.0}, {"X":33400.15,"Y":82300.04,"Z":59400.0}, {"X":30150.15,"Y":82300.04,"Z":59400.0} ], ], [ // 掏洞的空间 [ {"X":25500.15,"Y":77100.04,"Z":59400.0}, {"X":28200.15,"Y":77100.04,"Z":59400.0}, {"X":28200.15,"Y":82300.04,"Z":59400.0}, {"X":25500.15,"Y":82300.04,"Z":59400.0}, {"X":25500.15,"Y":77100.04,"Z":59400.0} ], [ {"X":25900.15,"Y":80300.04,"Z":59400.0}, {"X":27200.15,"Y":80300.04,"Z":59400.0}, {"X":27200.15,"Y":77900.04,"Z":59400.0}, {"X":25900.15,"Y":77900.04,"Z":59400.0}, ] ] ]; view: SGraphView | undefined; mounted() { this.init(); }; init(){ this.view = new SGraphView('wall'); const scene = new SGraphScene(); this.view.scene = scene; // 只模拟了轮廓数据 // @ts-ignore const item = new SZoneItem(null,{OutLine:this.outline}); item.selectable = true; scene.addItem(item); this.view.fitSceneToView(); console.log(this.view) this.view.scalable = false; } } </script> <style scoped> </style>