<template> <div style="margin-top: 10px;"> <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button> <canvas :id="'polygon'+time" width="740" height="400" /> </div> </template> <script> import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib"; export default { name: "rect1", data(){ return { view: '', item: '', time: Date.now(), rectData: { Outline: [ [{X:0,Y:0},{X:0,Y:1000},{X:700,Y:1500},{X:500,Y:1000},{X:200,Y:0}] ], Style: { "Default":{ "Stroke": "#cccccc", "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}", "LineWidth": 2, "Effect": {} }, "Selected": { "Stroke": "#66ff66", "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}", "LineWidth": 3, "Effect": {} }, "Disabled": { "Stroke": "#333333", "Fill": "#afafaf", "LineWidth": 1, "Effect": {} }, } }, } }, mounted() { this.init(); }, methods:{ init(){ this.view = new SGraphView(`polygon${this.time}`); const scene = new SGraphScene(); this.item = new SGraphPolyGroupItem(null, this.rectData); this.item.selectable = true; scene.addItem(this.item); this.view.scene = scene; this.view.fitSceneToView(); this.view.scalable = false; }, changeEnable(){ if (this.item) { this.item.enabled = !this.item.enabled; } } } } </script> <style scoped> </style>