<template> <div> <canvas id="wall" width="800" height="400" tabindex="0" /> </div> </template> <script> import {SGraphScene, SGraphView} from "@persagy-web/graph/"; import {SColumnItem} from "../../../../guides/big/items/src/SColumnItem"; export default { name: "wall", data(){ return { view: null, // 图中靠上位置的黑色矩形轮廓 outline1:[[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]], // 图中靠下位置的,绘制多个图形,会覆盖 outline2:[ [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}], [{X:20,Y:-30},{X:20,Y:-85},{X:110,Y:-85},{X:110,Y:-40}] ] } }, mounted() { this.init(); }, methods:{ init(){ this.view = new SGraphView('wall'); const scene = new SGraphScene(); this.view.scene = scene; // 只模拟了轮廓数据 const item = new SColumnItem(null,{OutLine:this.outline1}); scene.addItem(item); // 只模拟了轮廓数据 const item2 = new SColumnItem(null,{OutLine:this.outline2}); scene.addItem(item2); this.view.fitSceneToView(); this.view.scalable = false; } } } </script> <style scoped> </style>