|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
- <el-button size="small" @click="changeEnable">切换item禁用状态</el-button>
|
|
|
|
|
|
+ <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
|
|
<canvas id="rect" width="740" height="400" />
|
|
<canvas id="rect" width="740" height="400" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -8,7 +8,7 @@
|
|
<script>
|
|
<script>
|
|
|
|
|
|
import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
|
|
import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
|
|
- import {SRect} from "@persagy-web/draw/lib";
|
|
|
|
|
|
+ import {SRect,SRadialGradient,SLinearGradient} from "@persagy-web/draw/lib";
|
|
|
|
|
|
class rect extends SGraphShape{
|
|
class rect extends SGraphShape{
|
|
constructor(parent, data) {
|
|
constructor(parent, data) {
|
|
@@ -32,6 +32,7 @@
|
|
return {
|
|
return {
|
|
view: '',
|
|
view: '',
|
|
item: '',
|
|
item: '',
|
|
|
|
+ item2: '',
|
|
rectData: {
|
|
rectData: {
|
|
X: 0,
|
|
X: 0,
|
|
Y: 0,
|
|
Y: 0,
|
|
@@ -40,13 +41,39 @@
|
|
Style: {
|
|
Style: {
|
|
"Default":{
|
|
"Default":{
|
|
"Stroke": "#cccccc",
|
|
"Stroke": "#cccccc",
|
|
- "Fill": "#ccffcc",
|
|
|
|
|
|
+ "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
|
|
"LineWidth": 2,
|
|
"LineWidth": 2,
|
|
"Effect": {}
|
|
"Effect": {}
|
|
},
|
|
},
|
|
"Selected": {
|
|
"Selected": {
|
|
"Stroke": "#66ff66",
|
|
"Stroke": "#66ff66",
|
|
- "Fill": "#11effe",
|
|
|
|
|
|
+ "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,
|
|
|
|
+ Style: {
|
|
|
|
+ "Default":{
|
|
|
|
+ "Stroke": "#cccccc",
|
|
|
|
+ "Fill": "#ffccee",
|
|
|
|
+ "LineWidth": 2,
|
|
|
|
+ "Effect": {}
|
|
|
|
+ },
|
|
|
|
+ "Selected": {
|
|
|
|
+ "Stroke": "#66ff66",
|
|
|
|
+ "Fill": "#ff33ee",
|
|
"LineWidth": 3,
|
|
"LineWidth": 3,
|
|
"Effect": {}
|
|
"Effect": {}
|
|
},
|
|
},
|
|
@@ -67,10 +94,16 @@
|
|
init(){
|
|
init(){
|
|
this.view = new SGraphView('rect');
|
|
this.view = new SGraphView('rect');
|
|
const scene = new SGraphScene();
|
|
const scene = new SGraphScene();
|
|
|
|
+
|
|
this.item = new rect(null, this.rectData);
|
|
this.item = new rect(null, this.rectData);
|
|
this.item.selectable = true;
|
|
this.item.selectable = true;
|
|
- this.view.scene = scene;
|
|
|
|
scene.addItem(this.item);
|
|
scene.addItem(this.item);
|
|
|
|
+
|
|
|
|
+ this.item2 = new rect(null, this.rectData2);
|
|
|
|
+ this.item2.selectable = true;
|
|
|
|
+ scene.addItem(this.item2);
|
|
|
|
+
|
|
|
|
+ this.view.scene = scene;
|
|
this.view.fitSceneToView();
|
|
this.view.fitSceneToView();
|
|
this.view.scalable = false;
|
|
this.view.scalable = false;
|
|
},
|
|
},
|
|
@@ -78,6 +111,19 @@
|
|
if (this.item) {
|
|
if (this.item) {
|
|
this.item.enabled = !this.item.enabled;
|
|
this.item.enabled = !this.item.enabled;
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ parseGrad(str){
|
|
|
|
+ if (str.indexOf('SLinearGradient') > -1) {
|
|
|
|
+ const index1 = str.indexOf('{');
|
|
|
|
+ const index2 = str.indexOf('}');
|
|
|
|
+ const temp = str.substring(index1, index2);
|
|
|
|
+ const grad = new SLinearGradient();
|
|
|
|
+ return
|
|
|
|
+ } else if (str.indexOf('SRadialGradient') > -1) {
|
|
|
|
+ const grad = new SRadialGradient();
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ return str;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|