<template> <div style="margin-top: 10px"> <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button> <canvas id="roundRect" width="740" height="400"/> </div> </template> <script> import {SGraphScene, SGraphShape, SGraphView} from '@persagy-web/graph/lib' import {SRect} from '@persagy-web/draw/lib' class roundRect extends SGraphShape { constructor(parent, data) { super(parent, data.Style); this.leftTopX = data.X; this.leftTopY = data.Y; this.width = data.Width; this.height = data.Height; this.radius = data.Radius; } boundingRect() { return new SRect(this.leftTopX, this.leftTopY, this.width, this.height) } onDraw(painter) { super.onDraw(painter); painter.drawRoundRect(this.leftTopX, this.leftTopY, this.width, this.height, this.radius) } } export default { name: "roundRect", data() { return { view: '', item: '', item2: '', rectData: { X: 0, Y: 0, Width: 500, Height: 500, Radius: 50, 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": {} }, } }, rectData2: { X: 1000, Y: 0, Width: 500, Height: 500, Radius: 50, Style: { "Default": { "Stroke": "#cccccc", "Fill": "#ffccee", "LineWidth": 2, "Effect": {} }, "Selected": { "Stroke": "#66ff66", "Fill": "#ff33ee", "LineWidth": 3, "Effect": {} }, "Disabled": { "Stroke": "#333333", "Fill": "#afafaf", "LineWidth": 1, "Effect": {} }, } } } }, mounted() { this.init() }, methods: { init() { this.view = new SGraphView('roundRect'); const scene = new SGraphScene(); this.item = new roundRect(null, this.rectData); this.item.selectable = true; scene.addItem(this.item); this.item2 = new roundRect(null, this.rectData2); this.item2.selectable = true; scene.addItem(this.item2); 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>