Browse Source

矩形item 圆角矩形item 文档修改

haojianlong 4 years ago
parent
commit
6456097c98

+ 1 - 1
docs/.vuepress/components/GitCode.vue

@@ -1,6 +1,6 @@
 <template>
     <details class="custom-block details custom-code">
-        <summary>查看代码:{{ fileUrl }}</summary>
+        <summary>查看代码:{{ fileUrl }}</summary>
         <pre class="line-numbers">
     <code class="language-typescript" v-html="code"></code>
         </pre>

+ 12 - 20
docs/.vuepress/components/scene/items/rect.vue

@@ -1,31 +1,15 @@
 <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="rect" width="740" height="400" />
     </div>
 </template>
 
 <script>
 
-    import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
-    import {SRect} from "@persagy-web/draw/lib";
+    import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
 
-    class Rect extends SGraphShape{
-        constructor(parent, data) {
-            super(parent, data.Style);
-            this.leftTopX = data.X;
-            this.leftTopyY= data.Y;
-            this.width = data.Width;
-            this.height = data.Height;
-        }
-        boundingRect() {
-            return new SRect(this.leftTopX,this.leftTopyY,this.width,this.height);
-        }
-        onDraw(painter) {
-            super.onDraw(painter);
-            painter.drawRect(this.leftTopX,this.leftTopyY,this.width,this.height)
-        }
-    }
     export default {
         name: "rect1",
         data(){
@@ -33,11 +17,13 @@
                 view: '',
                 item: '',
                 item2: '',
+                R: 0,
                 rectData: {
                     X: 0,
                     Y: 0,
                     Width: 500,
                     Height: 500,
+                    Radius: 0,
                     Style: {
                         "Default":{
                             "Stroke": "#cccccc",
@@ -64,6 +50,7 @@
                     Y: 0,
                     Width: 500,
                     Height: 500,
+                    Radius: 0,
                     Style: {
                         "Default":{
                             "Stroke": "#cccccc",
@@ -95,11 +82,11 @@
                 this.view = new SGraphView('rect');
                 const scene = new SGraphScene();
 
-                this.item = new Rect(null, this.rectData);
+                this.item = new SGraphRectItem(null, this.rectData);
                 this.item.selectable = true;
                 scene.addItem(this.item);
 
-                this.item2 = new Rect(null, this.rectData2);
+                this.item2 = new SGraphRectItem(null, this.rectData2);
                 this.item2.selectable = true;
                 scene.addItem(this.item2);
 
@@ -111,6 +98,11 @@
                 if (this.item) {
                     this.item.enabled = !this.item.enabled;
                 }
+            },
+            // 修改圆角半径
+            changeY(val) {
+                this.item.radius = val;
+                this.item2.radius = val;
             }
         }
     }

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

@@ -1,127 +0,0 @@
-<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>

+ 0 - 1
docs/guides/index.js

@@ -32,7 +32,6 @@ const content = [
                 title: "Item 示例",
                 children: [
                     ["/guides/scene/items/rect", "矩形"],
-                    ["/guides/scene/items/roundRect", "圆角矩形"],
                     ["/guides/scene/items/polygon", "多边形"],
                     ["/guides/scene/items/polygonGroup", "多边形组"],
                     ["/guides/scene/items/area", "区域类型"],

+ 6 - 4
docs/guides/scene/items/rect.md

@@ -1,4 +1,4 @@
-# 矩形
+# 矩形&圆角矩形
 
 ::: details 目录
 [[toc]]
@@ -7,6 +7,8 @@
 
 ## item 实例
 
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphRectItem.ts" />
+
 <scene-items-rect />
 
 示例中展示了 一种渐变风格的 json 传参
@@ -43,12 +45,12 @@
 },
 ```
 
-::: details 查看代码
+::: details 查看代码使用
 <<< @/docs/.vuepress/components/scene/items/rect.vue
 :::
 
 ## item 传参注意
-
-item 传入的数据 data 大写跟随数据字典 <br />
+item 传入的圆角的半径默认是 0,即不绘制圆角; 如果传入的值是数字类型且不为0则绘制圆角; <br />
+item 传入的数据 data 大写跟随数据字典; <br />
 保存item的时候,保存类型为<font color=red> String </font>,调用渐变类的``` value() ```方法即可返回当前渐变类的字符串; <br />
 item 状态切换及<font color=red> Style </font>内容详情参考 [建筑信息图-底图风格](../../format/style.md)

+ 0 - 55
docs/guides/scene/items/roundRect.md

@@ -1,55 +0,0 @@
-# 圆角矩形
-
-::: 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)
-