Explorar o código

Merge branch 'master' of http://39.106.8.246:3003/doc/persagy-web-doc

YaolongHan %!s(int64=4) %!d(string=hai) anos
pai
achega
ac66ce825d

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

+ 127 - 0
docs/.vuepress/components/scene/items/roundRect.vue

@@ -0,0 +1,127 @@
+<template>
+  <div style="margin-top: 10px">
+    <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
+    <canvas id="roundRect" width="740" height="400"/>
+  </div>
+</template>
+
+<script>
+  import {SGraphScene, SGraphShape, SGraphView} from '@persagy-web/graph/lib'
+  import {SRect} from '@persagy-web/draw/lib'
+
+  class roundRect extends SGraphShape {
+    constructor(parent, data) {
+      super(parent, data.Style);
+      this.leftTopX = data.X;
+      this.leftTopY = data.Y;
+      this.width = data.Width;
+      this.height = data.Height;
+      this.radius = data.Radius;
+    }
+
+    boundingRect() {
+      return new SRect(this.leftTopX, this.leftTopY, this.width, this.height)
+    }
+
+    onDraw(painter) {
+      super.onDraw(painter);
+      painter.drawRoundRect(this.leftTopX, this.leftTopY, this.width, this.height, this.radius)
+    }
+  }
+
+  export default {
+    name: "roundRect",
+    data() {
+      return {
+        view: '',
+        item: '',
+        item2: '',
+        rectData: {
+          X: 0,
+          Y: 0,
+          Width: 500,
+          Height: 500,
+          Radius: 50,
+          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: 50,
+          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() {
+      this.init()
+    },
+    methods: {
+      init() {
+        this.view = new SGraphView('roundRect');
+        const scene = new SGraphScene();
+
+        this.item = new roundRect(null, this.rectData);
+        this.item.selectable = true;
+        scene.addItem(this.item);
+
+        this.item2 = new roundRect(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
+        }
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

+ 48 - 1
docs/guides/scene/items/roundRect.md

@@ -3,6 +3,53 @@
 ::: details 目录
 [[toc]]
 :::
+## item 实例
+<scene-items-roundRect/>
 
+示例中展示了 一种渐变风格的 json 传参
+
+``` json
+"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": {}
+},
+```
+
+一种普通纯色风格的 json 传参
+
+``` json
+"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": {}
+},
+```
+
+
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/items/roundRect.vue
+:::
+
+
+## item 传参注意
+
+item 传入的数据 data 大写跟随数据字典 <br />
+保存item的时候,保存类型为<font color=red> String </font>,调用渐变类的``` value() ```方法即可返回当前渐变类的字符串; <br />
+item 状态切换及<font color=red> Style </font>内容详情参考 [建筑信息图-底图风格](../../format/style.md)
 
-左上角 宽高 圆角半径

+ 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",