|
@@ -0,0 +1,73 @@
|
|
|
|
+<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(){
|
|
|
|
+ console.log(this.time);
|
|
|
|
+ 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>
|