Prechádzať zdrojové kódy

多边形组 区域组

haojianlong 4 rokov pred
rodič
commit
23e5c8c514

+ 73 - 0
docs/.vuepress/components/scene/items/polygon.vue

@@ -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>

+ 3 - 1
docs/guides/scene/items/polygon.md

@@ -4,5 +4,7 @@
 [[toc]]
 :::
 
+## item 实例
+
+<scene-items-polygon />
 
-一维数组

+ 2 - 2
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.3",
+    "@persagy-web/big": "2.2.4",
     "@persagy-web/draw": "2.2.4",
-    "@persagy-web/graph": "2.2.5",
+    "@persagy-web/graph": "2.2.6",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",