|
@@ -1,31 +1,15 @@
|
|
<template>
|
|
<template>
|
|
<div style="margin-top: 10px;">
|
|
<div style="margin-top: 10px;">
|
|
<el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
|
|
<el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
|
|
|
|
+ 圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>
|
|
<canvas id="rect" width="740" height="400" />
|
|
<canvas id="rect" width="740" height="400" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
- import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
|
|
|
|
- import {SRect} from "@persagy-web/draw/lib";
|
|
|
|
|
|
+ import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
|
|
|
|
- class Rect extends SGraphShape{
|
|
|
|
- constructor(parent, data) {
|
|
|
|
- super(parent, data.Style);
|
|
|
|
- this.leftTopX = data.X;
|
|
|
|
- this.leftTopyY= data.Y;
|
|
|
|
- this.width = data.Width;
|
|
|
|
- this.height = data.Height;
|
|
|
|
- }
|
|
|
|
- boundingRect() {
|
|
|
|
- return new SRect(this.leftTopX,this.leftTopyY,this.width,this.height);
|
|
|
|
- }
|
|
|
|
- onDraw(painter) {
|
|
|
|
- super.onDraw(painter);
|
|
|
|
- painter.drawRect(this.leftTopX,this.leftTopyY,this.width,this.height)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
export default {
|
|
export default {
|
|
name: "rect1",
|
|
name: "rect1",
|
|
data(){
|
|
data(){
|
|
@@ -33,11 +17,13 @@
|
|
view: '',
|
|
view: '',
|
|
item: '',
|
|
item: '',
|
|
item2: '',
|
|
item2: '',
|
|
|
|
+ R: 0,
|
|
rectData: {
|
|
rectData: {
|
|
X: 0,
|
|
X: 0,
|
|
Y: 0,
|
|
Y: 0,
|
|
Width: 500,
|
|
Width: 500,
|
|
Height: 500,
|
|
Height: 500,
|
|
|
|
+ Radius: 0,
|
|
Style: {
|
|
Style: {
|
|
"Default":{
|
|
"Default":{
|
|
"Stroke": "#cccccc",
|
|
"Stroke": "#cccccc",
|
|
@@ -64,6 +50,7 @@
|
|
Y: 0,
|
|
Y: 0,
|
|
Width: 500,
|
|
Width: 500,
|
|
Height: 500,
|
|
Height: 500,
|
|
|
|
+ Radius: 0,
|
|
Style: {
|
|
Style: {
|
|
"Default":{
|
|
"Default":{
|
|
"Stroke": "#cccccc",
|
|
"Stroke": "#cccccc",
|
|
@@ -95,11 +82,11 @@
|
|
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 SGraphRectItem(null, this.rectData);
|
|
this.item.selectable = true;
|
|
this.item.selectable = true;
|
|
scene.addItem(this.item);
|
|
scene.addItem(this.item);
|
|
|
|
|
|
- this.item2 = new Rect(null, this.rectData2);
|
|
|
|
|
|
+ this.item2 = new SGraphRectItem(null, this.rectData2);
|
|
this.item2.selectable = true;
|
|
this.item2.selectable = true;
|
|
scene.addItem(this.item2);
|
|
scene.addItem(this.item2);
|
|
|
|
|
|
@@ -111,6 +98,11 @@
|
|
if (this.item) {
|
|
if (this.item) {
|
|
this.item.enabled = !this.item.enabled;
|
|
this.item.enabled = !this.item.enabled;
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ // 修改圆角半径
|
|
|
|
+ changeY(val) {
|
|
|
|
+ this.item.radius = val;
|
|
|
|
+ this.item2.radius = val;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|