|
@@ -2,106 +2,105 @@
|
|
<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>
|
|
圆角半径 : <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="id" width="740" height="400" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
|
|
|
+<script lang="ts">
|
|
|
|
|
|
import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
|
|
+ import { Component, Vue } from "vue-property-decorator";
|
|
|
|
|
|
- export default {
|
|
|
|
- name: "rect1",
|
|
|
|
- data(){
|
|
|
|
- return {
|
|
|
|
- view: '',
|
|
|
|
- item: '',
|
|
|
|
- item2: '',
|
|
|
|
- R: 0,
|
|
|
|
- rectData: {
|
|
|
|
- X: 0,
|
|
|
|
- Y: 0,
|
|
|
|
- Width: 500,
|
|
|
|
- Height: 500,
|
|
|
|
- Radius: 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": {}
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
|
|
+ @Component
|
|
|
|
+ export default class Rect extends Vue {
|
|
|
|
+ id: string = 'rect' + Date.now();
|
|
|
|
+ view: SGraphView | undefined;
|
|
|
|
+ item: SGraphRectItem | undefined;
|
|
|
|
+ item2: SGraphRectItem | undefined;
|
|
|
|
+ R: number = 0;
|
|
|
|
+ rectData = {
|
|
|
|
+ X: 0,
|
|
|
|
+ Y: 0,
|
|
|
|
+ Width: 500,
|
|
|
|
+ Height: 500,
|
|
|
|
+ Radius: 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": {}
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ rectData2 = {
|
|
|
|
+ X: 1000,
|
|
|
|
+ Y: 0,
|
|
|
|
+ Width: 500,
|
|
|
|
+ Height: 500,
|
|
|
|
+ Radius: 0,
|
|
|
|
+ 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": {}
|
|
},
|
|
},
|
|
- rectData2: {
|
|
|
|
- X: 1000,
|
|
|
|
- Y: 0,
|
|
|
|
- Width: 500,
|
|
|
|
- Height: 500,
|
|
|
|
- Radius: 0,
|
|
|
|
- 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() {
|
|
|
|
|
|
+ };
|
|
|
|
+ private mounted (): void {
|
|
this.init();
|
|
this.init();
|
|
- },
|
|
|
|
- methods:{
|
|
|
|
- init(){
|
|
|
|
- this.view = new SGraphView('rect');
|
|
|
|
- const scene = new SGraphScene();
|
|
|
|
-
|
|
|
|
- this.item = new SGraphRectItem(null, this.rectData);
|
|
|
|
- this.item.selectable = true;
|
|
|
|
- scene.addItem(this.item);
|
|
|
|
|
|
+ }
|
|
|
|
+ init(): void {
|
|
|
|
+ this.view = new SGraphView(this.id);
|
|
|
|
+ const scene = new SGraphScene();
|
|
|
|
+ this.item = new SGraphRectItem(null, this.rectData);
|
|
|
|
+ this.item.selectable = true;
|
|
|
|
+ scene.addItem(this.item);
|
|
|
|
|
|
- this.item2 = new SGraphRectItem(null, this.rectData2);
|
|
|
|
- this.item2.selectable = true;
|
|
|
|
- scene.addItem(this.item2);
|
|
|
|
|
|
+ this.item2 = new SGraphRectItem(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;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 修改圆角半径
|
|
|
|
- changeY(val) {
|
|
|
|
|
|
+ this.view.scene = scene;
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ this.view.scalable = false;
|
|
|
|
+ }
|
|
|
|
+ changeEnable(): void{
|
|
|
|
+ if (this.item) {
|
|
|
|
+ this.item.enabled = !this.item.enabled;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 修改圆角半径
|
|
|
|
+ changeY(val: number): void {
|
|
|
|
+ if (this.item){
|
|
this.item.radius = val;
|
|
this.item.radius = val;
|
|
|
|
+ }
|
|
|
|
+ if(this.item2) {
|
|
this.item2.radius = val;
|
|
this.item2.radius = val;
|
|
}
|
|
}
|
|
}
|
|
}
|