浏览代码

多边形文档 更新

haojianlong 4 年之前
父节点
当前提交
aa72d9853d
共有 3 个文件被更改,包括 72 次插入53 次删除
  1. 66 51
      docs/.vuepress/components/scene/items/polygon.vue
  2. 4 0
      docs/guides/scene/items/polygon.md
  3. 2 2
      package.json

+ 66 - 51
docs/.vuepress/components/scene/items/polygon.vue

@@ -1,69 +1,84 @@
 <template>
     <div style="margin-top: 10px;">
         <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
-        <canvas :id="'polygon'+time" width="740" height="400" />
+        <canvas :id="id" width="740" height="400" />
     </div>
 </template>
 
-<script>
+<script lang="ts">
 
     import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";
+    import {SSize} from "@persagy-web/draw/lib";
+    import { Component, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
-    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}],
-                        [{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,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": {}
-                        },
-                    }
+    class Expolygon extends SGraphPolyGroupItem{
+        resize(old:SSize,newS:SSize):void{
+            const xs = newS.width / old.width;
+            const ys = newS.height / old.height;
+            // @ts-ignore
+            this.pointList = this.pointList.map(t => {
+                // @ts-ignore
+                return t.map(item => {
+                    item.x = item.x * xs;
+                    item.y = item.y * ys;
+                    return item
+                })
+            });
+            // console.log(this.pointList)
+        }
+    }
+
+
+    @Component
+    export default class ZoneCanvas extends Vue {
+        view: SGraphView | undefined;
+        item: Expolygon | undefined;
+        id: string = uuid();
+        rectData = {
+            Outline: [
+                [{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":{
+                    "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(){
-                this.view = new SGraphView(`polygon${this.time}`);
-                const scene = new SGraphScene();
+        };
+        init(){
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
 
-                this.item = new SGraphPolyGroupItem(null, this.rectData);
-                this.item.selectable = true;
-                scene.addItem(this.item);
+            this.item = new Expolygon(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;
-                }
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        };
+        changeEnable(){
+            if (this.item) {
+                this.item.enabled = !this.item.enabled;
             }
         }
     }

+ 4 - 0
docs/guides/scene/items/polygon.md

@@ -13,3 +13,7 @@
 ::: details 查看代码使用
 <<< @/docs/.vuepress/components/scene/items/polygon.vue
 :::
+
+::: tip 注意
+选中时, 会出现对应的选中框, 如果想要多边形支持可编辑, 需要增加``` resize ```方法, 并添加响应的大小改变需要作出的改变
+:::

+ 2 - 2
package.json

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