浏览代码

区域组;多边形组,合并

haojianlong 4 年之前
父节点
当前提交
a6de02a6a0

+ 34 - 23
docs/.vuepress/components/scene/items/area.vue

@@ -1,47 +1,58 @@
 <template>
     <div style="margin-top: 10px;">
-<!--        <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="id" width="740" height="400" />
     </div>
 </template>
 
 <script lang="ts">
     import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SPath, SPainter, SRect} from "@persagy-web/draw/lib";
     import { Component, Prop, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
 
-    class sga extends SGraphItem{
-        path: SPath;
-        constructor(parent: SGraphItem | null){
-            super(parent);
-            this.path = new SPath();
-            // @ts-ignore
-            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:500,y:0}]);
-            // @ts-ignore
-            this.path.polygon([{x:0,y:0},{x:500,y:0},{x:300,y:500}]);
-        }
-        boundingRect(): SRect {
-            return new SRect(0,0,700,1500)
-        }
-
-        onDraw(painter: SPainter) {
-            painter.drawPath(this.path)
-        }
-    }
-
     @Component
     export default class AreaCanvas extends Vue {
         id: string = uuid();
         view: SGraphView | undefined;
+        areaData = {
+            OutLine: [
+                [
+                    [{X:0,Y:0},{X:0,Y:1000},{X:1000,Y:1000},{X:1000,Y:0}],
+                    [{X:200,Y:200},{X:800,Y:200},{X:800,Y:800},{X:200,Y:800}]
+                ],
+                [
+                    [{X:1000,Y:1000},{X:1200,Y:1000},{X:1200,Y:1200},{X:1000,Y:1200}]
+                ]
+            ],
+            Style: {
+                "Default":{
+                    "Stroke": "#cccccc",
+                    "Fill": "SLinearGradient{0,0;0,1200;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "LineWidth": 2,
+                    "Effect": {}
+                },
+                "Selected": {
+                    "Stroke": "#66ff66",
+                    "Fill": "SRadialGradient{500,500,50;500,500,800;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "LineWidth": 3,
+                    "Effect": {}
+                },
+                "Disabled": {
+                    "Stroke": "#333333",
+                    "Fill": "#afafaf",
+                    "LineWidth": 1,
+                    "Effect": {}
+                },
+            }
+        };
+
         mounted() {
             this.init();
         };
         init(){
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
-            const item = new sga(null);
+            const item = new SGraphAreaGroupItem(null, this.areaData);
+            item.selectable = true;
             scene.addItem(item);
             this.view.scene = scene;
             this.view.fitSceneToView();

+ 2 - 1
docs/.vuepress/components/scene/items/polygon.vue

@@ -18,7 +18,8 @@
                 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}]
+                        [{X:0,Y:0},{X:0,Y:1000},{X:700,Y:1500},{X:500,Y:1000},{X:200,Y:0}],
+                        [{X:1000,Y:1000},{X:1200,Y:1000},{X:1200,Y:1200},{X:1000,Y:1200}]
                     ],
                     Style: {
                         "Default":{

+ 0 - 1
docs/.vuepress/components/scene/items/rect.vue

@@ -73,7 +73,6 @@
             }
         };
         private mounted (): void {
-            console.log(9999999999999)
             this.init();
         }
         init(): void {

+ 2 - 4
docs/guides/index.js

@@ -33,10 +33,8 @@ const content = [
                 title: "Item 示例",
                 children: [
                     ["/guides/scene/items/rect", "矩形"],
-                    ["/guides/scene/items/polygon", "多边形"],
-                    ["/guides/scene/items/polygonGroup", "多边形组"],
-                    ["/guides/scene/items/area", "区域类型"],
-                    ["/guides/scene/items/areaGroup", "区域类型组"],
+                    ["/guides/scene/items/polygon", "多边形组"],
+                    ["/guides/scene/items/area", "区域类型组"],
                     ["/guides/scene/items/text", "文字"],
                     ["/guides/scene/items/image", "图片"],
                     ["/guides/scene/items/svg", "SVG 图"],

+ 6 - 2
docs/guides/scene/items/area.md

@@ -1,9 +1,13 @@
-# 区域
+# 区域
 
 ::: details 目录
 [[toc]]
 :::
 
-二维点数组
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphAreaGroupItem.ts" />
 
 <scene-items-area />
+
+::: details 查看代码使用
+<<< @/docs/.vuepress/components/scene/items/area.vue
+:::

+ 0 - 8
docs/guides/scene/items/areaGroup.md

@@ -1,8 +0,0 @@
-# 区域组
-
-::: details 目录
-[[toc]]
-:::
-
-
-二维点数组

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

@@ -1,4 +1,4 @@
-# 多边形
+# 多边形
 
 ::: details 目录
 [[toc]]
@@ -6,5 +6,10 @@
 
 ## item 实例
 
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphPolyGroupItem.ts" />
+
 <scene-items-polygon />
 
+::: details 查看代码使用
+<<< @/docs/.vuepress/components/scene/items/polygon.vue
+:::

+ 0 - 8
docs/guides/scene/items/polygonGroup.md

@@ -1,8 +0,0 @@
-# 多边形组
-
-::: details 目录
-[[toc]]
-:::
-
-
-二维数组