Browse Source

graph item 补充文档修改

haojianlong 4 years ago
parent
commit
866ff5cf25

+ 51 - 5
docs/.vuepress/components/scene/items/rect.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
     <div>
     <div>
-        <el-button size="small" @click="changeEnable">切换item禁用状态</el-button>
+        <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
         <canvas id="rect" width="740" height="400" />
         <canvas id="rect" width="740" height="400" />
     </div>
     </div>
 </template>
 </template>
@@ -8,7 +8,7 @@
 <script>
 <script>
 
 
     import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
     import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
-    import {SRect} from "@persagy-web/draw/lib";
+    import {SRect,SRadialGradient,SLinearGradient} from "@persagy-web/draw/lib";
 
 
     class rect extends SGraphShape{
     class rect extends SGraphShape{
         constructor(parent, data) {
         constructor(parent, data) {
@@ -32,6 +32,7 @@
             return {
             return {
                 view: '',
                 view: '',
                 item: '',
                 item: '',
+                item2: '',
                 rectData: {
                 rectData: {
                     X: 0,
                     X: 0,
                     Y: 0,
                     Y: 0,
@@ -40,13 +41,39 @@
                     Style: {
                     Style: {
                         "Default":{
                         "Default":{
                             "Stroke": "#cccccc",
                             "Stroke": "#cccccc",
-                            "Fill": "#ccffcc",
+                            "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                             "LineWidth": 2,
                             "LineWidth": 2,
                             "Effect": {}
                             "Effect": {}
                         },
                         },
                         "Selected": {
                         "Selected": {
                             "Stroke": "#66ff66",
                             "Stroke": "#66ff66",
-                            "Fill": "#11effe",
+                            "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,
+                    Style: {
+                        "Default":{
+                            "Stroke": "#cccccc",
+                            "Fill": "#ffccee",
+                            "LineWidth": 2,
+                            "Effect": {}
+                        },
+                        "Selected": {
+                            "Stroke": "#66ff66",
+                            "Fill": "#ff33ee",
                             "LineWidth": 3,
                             "LineWidth": 3,
                             "Effect": {}
                             "Effect": {}
                         },
                         },
@@ -67,10 +94,16 @@
             init(){
             init(){
                 this.view = new SGraphView('rect');
                 this.view = new SGraphView('rect');
                 const scene = new SGraphScene();
                 const scene = new SGraphScene();
+
                 this.item = new rect(null, this.rectData);
                 this.item = new rect(null, this.rectData);
                 this.item.selectable = true;
                 this.item.selectable = true;
-                this.view.scene = scene;
                 scene.addItem(this.item);
                 scene.addItem(this.item);
+
+                this.item2 = new rect(null, this.rectData2);
+                this.item2.selectable = true;
+                scene.addItem(this.item2);
+
+                this.view.scene = scene;
                 this.view.fitSceneToView();
                 this.view.fitSceneToView();
                 this.view.scalable = false;
                 this.view.scalable = false;
             },
             },
@@ -78,6 +111,19 @@
                 if (this.item) {
                 if (this.item) {
                     this.item.enabled = !this.item.enabled;
                     this.item.enabled = !this.item.enabled;
                 }
                 }
+            },
+            parseGrad(str){
+                if (str.indexOf('SLinearGradient') > -1) {
+                    const index1 = str.indexOf('{');
+                    const index2 = str.indexOf('}');
+                    const temp = str.substring(index1, index2);
+                    const grad = new SLinearGradient();
+                    return
+                } else if (str.indexOf('SRadialGradient') > -1) {
+                    const grad = new SRadialGradient();
+                    return
+                }
+                return str;
             }
             }
         }
         }
     }
     }

+ 1 - 1
docs/guides/README.md

@@ -1,3 +1,3 @@
-# 图形引擎
+# 简介
 
 
 ## 安装
 ## 安装

+ 4 - 0
docs/guides/big/README.md

@@ -1 +1,5 @@
 # 楼层平面图
 # 楼层平面图
+
+::: details 目录
+[[toc]]
+:::

+ 5 - 2
docs/guides/big/downloadFile.md

@@ -1,6 +1,9 @@
+# 手工下载楼层底图文件
 
 
-## 手工下载楼层底图文件
+::: details 目录
+[[toc]]
+:::
 
 
-手工下载地址例:[http://adm.sagacloud.cn/image-service/common/file_get?systemId=revit&key=Fl11010500011b85b9eeff8211e8b8b087ac5144d0ef20191108102222bim.jsonz](http://adm.sagacloud.cn/image-service/common/file_get?systemId=revit&key=Fl11010500011b85b9eeff8211e8b8b087ac5144d0ef20191108102222bim.jsonz)
+手工下载地址例:[http://adm.sagacloud.cn/image-service/common/file_get?systemId=revit&key=Fl11010500011b85b9eeff8211e8b8b087ac5144d0ef20191108102222bim.jsonz](http://adm.sagacloud.cn/image-service/common/file_get?systemId=revit&key=Fl11010500011b85b9eeff8211e8b8b087ac5144d0ef20191108102222bim.jsonz) <br />
 
 
 下载后为无后缀压缩文件,直接打开是乱码,需手工添加zip后缀并解压方可得到json文件
 下载后为无后缀压缩文件,直接打开是乱码,需手工添加zip后缀并解压方可得到json文件

+ 11 - 8
docs/guides/big/jsonFile.md

@@ -1,7 +1,10 @@
+# 楼层平面图底图数据格式
 
 
-## json数据格式
+::: details 目录
+[[toc]]
+:::
 
 
-### 整体数据格式
+## 整体数据格式
 
 
 ```
 ```
     {
     {
@@ -21,7 +24,7 @@
     }
     }
 ```
 ```
 
 
-### 柱子具体数据内容
+## 柱子具体数据内容
 
 
 ```
 ```
     Columns:[
     Columns:[
@@ -40,7 +43,7 @@
     ]
     ]
 ```
 ```
 
 
-### 门具体数据
+## 门具体数据
 
 
 ```
 ```
     Doors:[
     Doors:[
@@ -64,7 +67,7 @@
     ]
     ]
 ```
 ```
 
 
-### 空间具体数据
+## 空间具体数据
 
 
 ```
 ```
     Spaces:[
     Spaces:[
@@ -85,7 +88,7 @@
     ]
     ]
 ```
 ```
 
 
-### 虚拟墙具体数据
+## 虚拟墙具体数据
 
 
 ```
 ```
     VirtualWalls:[
     VirtualWalls:[
@@ -103,7 +106,7 @@
     ]
     ]
 ```
 ```
 
 
-### 墙具体数据
+## 墙具体数据
 
 
 ```
 ```
     Walls:[
     Walls:[
@@ -124,7 +127,7 @@
     ]
     ]
 ```
 ```
 
 
-### 窗户具体数据
+## 窗户具体数据
 
 
 ```
 ```
     Windows:[
     Windows:[

+ 112 - 0
docs/guides/big/format/systemJson.md

@@ -0,0 +1,112 @@
+# Json 文件格式
+
+::: details 目录
+[[toc]]
+:::
+
+## 整体数据格式
+
+```
+{
+    Data:[
+        {
+          
+            Elements:{                          // 系统图展示所需数据
+                Nodes:[],                       // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+                Markers:[],                     // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+                Relations:[],                   // 管线对象
+            },
+            ID: '',                             // 图ID
+            Name: '',                           // 名称
+            CategoryID: '',                     // 图分类ID
+            ProjectID: '',                      // 项目ID
+            BuildingID: '',                     // 建筑ID
+            FloorID: '',                        // 楼层id
+            Note: '',                           // 图说明
+            Log: {                              //图操作日志
+                  Mark:'',                      //图的存盘标记
+                  CommandList:[
+                   {
+                        Command: '',            //命令
+                        Desc: '',               //描述
+                        Detail: ''              //详情
+                    }
+                ]
+            }
+        }
+    ],
+    Message: '',
+    Result: ''
+}
+```
+
+## 图例节点
+
+```
+    Nodes:[
+        {   
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            AttachObjectIds:[],                 // 返回工程信息化对象 ID 列表
+            GraphElementType: '',               // 图例类型 None/Line/Zone/Image:非图例/线条/区域类型/图标
+            GraphElementId: '',                 // 对应的图元ID
+            Num: 1                              //图例数量
+            Pos: {X: 0, Y: 0},                  // 位置
+            Scale: {X: 1, Y: 1, Z: 1},          // 缩放
+            Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
+            Size: {Width:0, Height: 0},         // 大小
+            AnchorList:[
+                    {
+                        ID: '',                 // 锚点ID
+                        Pos: '',                // 锚点的坐标
+                    },
+                    ...
+                ],
+            OutLine: [
+                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+                ...                             // 内轮廓
+            ],                                  // 轮廓线
+            Properties: {}                      // 由应用自己定义
+        },
+        ...
+    ]
+```
+
+## 标识对象
+
+```
+    Markers:[
+        {
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            Type: '',                           // 图标(Image),线类型(Line),文本(Text)
+            Pos: {X: 0, y: 0},                  // 位置
+            Scale: {X: 1, Y: 1, Z: 1},          // 缩放
+            Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
+            Size: {Width:0, Height: 0},         // 大小
+            Properties: {}                      // 由应用自己定义
+        },
+        ...
+    ]
+```
+
+## 对象关系
+
+```
+    Relations: [
+        {
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            GraphElementId: '',                 // 对应的图例ID
+            Node1ID: '',                        // 关联节点1_id
+            Node2ID: '',                        // 关联节点2_id
+            Anchor1ID: '',                      // 关联锚点1_id
+            Anchor2ID: '',                      // 关联锚点2_id
+            Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
+            LineType: '',                       // 直线(Line),水平垂直
+            PointList: [],                      // 线的顶点坐标
+            Style: ''                           // 线的绘图样式
+        },
+        ...
+    ]
+```

+ 8 - 8
docs/guides/big/items/src/SDoorItem.ts

@@ -125,13 +125,13 @@ export class SDoorItem extends SGraphItem {
         painter.drawLine(0, 0, this.r, 0);
         painter.drawLine(0, 0, this.r, 0);
         painter.pen.lineDash = [50, 100];
         painter.pen.lineDash = [50, 100];
         painter.pen.lineWidth = painter.toPx(1);
         painter.pen.lineWidth = painter.toPx(1);
-        painter.drawArc(
-            -this.r,
-            -this.r,
-            this.r * 2,
-            this.r * 2,
-            this.startAng,
-            this.startAng + Math.PI / 2
-        );
+        // painter.drawArc(
+        //     -this.r,
+        //     -this.r,
+        //     this.r * 2,
+        //     this.r * 2,
+        //     this.startAng,
+        //     this.startAng + Math.PI / 2
+        // );
     } // Function onDraw()
     } // Function onDraw()
 } // Class SDoorItem
 } // Class SDoorItem

+ 2 - 2
docs/guides/big/items/src/SSpaceItem.ts

@@ -1,7 +1,7 @@
 import {
 import {
     SColor,
     SColor,
     SPainter,
     SPainter,
-    SPath2D,
+    SPath,
     SPoint,
     SPoint,
     SPolygonUtil,
     SPolygonUtil,
     SRect,
     SRect,
@@ -30,7 +30,7 @@ export class SSpaceItem extends SGraphItem {
     /** Y坐标最大值  */
     /** Y坐标最大值  */
     maxY = Number.MIN_SAFE_INTEGER;
     maxY = Number.MIN_SAFE_INTEGER;
     /** path对象      */
     /** path对象      */
-    private path = new SPath2D();
+    private path = new SPath();
     /** 高亮状态    */
     /** 高亮状态    */
     private _highLightFlag: boolean = false;
     private _highLightFlag: boolean = false;
     get highLightFlag(): boolean {
     get highLightFlag(): boolean {

+ 2 - 2
docs/guides/big/items/src/SWallItem.ts

@@ -1,4 +1,4 @@
-import {SPainter, SPath2D, SPoint, SRect} from "@persagy-web/draw/lib";
+import {SPainter, SPath, SPoint, SRect} from "@persagy-web/draw/lib";
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { Wall } from "@persagy-web/big/lib/types/floor/Wall";
 import { Wall } from "@persagy-web/big/lib/types/floor/Wall";
 import { ItemColor, ItemOrder } from "@persagy-web/big/lib";
 import { ItemColor, ItemOrder } from "@persagy-web/big/lib";
@@ -22,7 +22,7 @@ export class SWallItem extends SGraphItem {
     /** 墙轮廓线坐标list  */
     /** 墙轮廓线坐标list  */
     private readonly pointArr: SPoint[][] = [];
     private readonly pointArr: SPoint[][] = [];
     /** path对象  */
     /** path对象  */
-    private path = new SPath2D();
+    private path = new SPath();
 
 
     /**
     /**
      * 构造函数
      * 构造函数

+ 3 - 3
docs/guides/big/items/src/SZoneItem.ts

@@ -1,7 +1,7 @@
 import {
 import {
     SColor,
     SColor,
     SPainter,
     SPainter,
-    SPath2D,
+    SPath,
     SPoint,
     SPoint,
     SPolygonUtil,
     SPolygonUtil,
     SRect
     SRect
@@ -30,7 +30,7 @@ export class SZoneItem extends SGraphItem {
     /** Y坐标最大值  */
     /** Y坐标最大值  */
     private maxY = Number.MIN_SAFE_INTEGER;
     private maxY = Number.MIN_SAFE_INTEGER;
     /** path    */
     /** path    */
-    private pathList: SPath2D[] = [];
+    private pathList: SPath[] = [];
     /** 点击位置坐标  */
     /** 点击位置坐标  */
     private clickPoint: SPoint | undefined;
     private clickPoint: SPoint | undefined;
     /** 选中时的颜色  */
     /** 选中时的颜色  */
@@ -94,7 +94,7 @@ export class SZoneItem extends SGraphItem {
             this.maxY = this.minY;
             this.maxY = this.minY;
             // 处理轮廓点数组,同时计算最大最小值
             // 处理轮廓点数组,同时计算最大最小值
             this.pointArr = tempArr.map((t): SPoint[][] => {
             this.pointArr = tempArr.map((t): SPoint[][] => {
-                let sPath = new SPath2D();
+                let sPath = new SPath();
                 let tempArr = t.map((it): SPoint[] => {
                 let tempArr = t.map((it): SPoint[] => {
                     let array = it.map(
                     let array = it.map(
                         (item): SPoint => {
                         (item): SPoint => {

+ 4 - 0
docs/guides/big/layerOrder.md

@@ -1,5 +1,9 @@
 # 图层
 # 图层
 
 
+::: details 目录
+[[toc]]
+:::
+
 ::: tip
 ::: tip
 1.创建的 item 要添加到对应的层 <br />
 1.创建的 item 要添加到对应的层 <br />
 2.保存图数据将其对应的层级一块保存 <br />
 2.保存图数据将其对应的层级一块保存 <br />

+ 1 - 0
docs/guides/big/mapDemo.md

@@ -1,4 +1,5 @@
 # 可编辑直线示例
 # 可编辑直线示例
+
 ::: details 目录
 ::: details 目录
 [[toc]]
 [[toc]]
 :::
 :::

+ 1 - 0
docs/guides/big/style.md

@@ -1,4 +1,5 @@
 # 底图风格
 # 底图风格
+
 ::: details 目录
 ::: details 目录
 [[toc]]
 [[toc]]
 :::
 :::

+ 12 - 8
docs/guides/big/workLine.md

@@ -1,12 +1,16 @@
-## 下载-解析-生成 过程
+# 下载-解析-生成 过程
 
 
-### 工作流程图
+::: details 目录
+[[toc]]
+:::
+
+## 工作流程图
 
 
 ![工作流程图](./img/liucheng.png)
 ![工作流程图](./img/liucheng.png)
 
 
-### 下载底图数据
+## 下载底图数据
 
 
-#### 方式1 通过楼层对象floormap信息点,直接从文件服务器获取压缩数据
+### 方式1 通过楼层对象floormap信息点,直接从文件服务器获取压缩数据
 
 
 引擎中已封装好函数loadUrl,直接传入文件服务器路径即可;并且会将压缩数据自动解压
 引擎中已封装好函数loadUrl,直接传入文件服务器路径即可;并且会将压缩数据自动解压
 
 
@@ -14,7 +18,7 @@
 loadUrl(url: string): Promise<void> {}
 loadUrl(url: string): Promise<void> {}
 ```
 ```
 
 
-#### 方式2 通过模型后台接口 /base-graph/query 传入模型id 直接获取未压缩数据
+### 方式2 通过模型后台接口 /base-graph/query 传入模型id 直接获取未压缩数据
 引擎中已封装好函数getFloorData,直接传入模型id,url为接口地址
 引擎中已封装好函数getFloorData,直接传入模型id,url为接口地址
 
 
 ```
 ```
@@ -22,7 +26,7 @@ getFloorData(url: string, data: { ModelId: string }) {}
 ```
 ```
 
 
 
 
-### 下载设备,业务空间数据
+## 下载设备,业务空间数据
 
 
 下载设备,业务空间等的数据均需要另走查询对象接口
 下载设备,业务空间等的数据均需要另走查询对象接口
 
 
@@ -56,7 +60,7 @@ getFloorData(url: string, data: { ModelId: string }) {}
 
 
 ![工作流程图](./img/space.png) 
 ![工作流程图](./img/space.png) 
 
 
-### 解析
+## 解析
 引擎中会读取下载好的数据,按数据将不同的对象分发到引擎中各个添加对象的方法中
 引擎中会读取下载好的数据,按数据将不同的对象分发到引擎中各个添加对象的方法中
 
 
 ```
 ```
@@ -94,5 +98,5 @@ private addBaseMapItem(data: FloorData): void {
     } // Function addBaseMapItem()
     } // Function addBaseMapItem()
 ```
 ```
 
 
-### 生成
+## 生成
 当视图监听到需要刷新时,就会触发update()方法,刷新视图,用户就可以在页面中看到相应的楼层平面图了
 当视图监听到需要刷新时,就会触发update()方法,刷新视图,用户就可以在页面中看到相应的楼层平面图了

+ 4 - 0
docs/guides/engine/README.md

@@ -1,5 +1,9 @@
 # 绘图引擎
 # 绘图引擎
 
 
+::: details 目录
+[[toc]]
+:::
+
 1.引擎基本结构
 1.引擎基本结构
 
 
 ![绘图引擎结构](./img/draw-engine.png)
 ![绘图引擎结构](./img/draw-engine.png)

+ 4 - 0
docs/guides/engine/gradient.md

@@ -1,5 +1,9 @@
 # 渐变
 # 渐变
 
 
+::: details 目录
+[[toc]]
+:::
+
 渐变是一种有规律性的变化;引擎中分为线性渐变和放射性渐变
 渐变是一种有规律性的变化;引擎中分为线性渐变和放射性渐变
 
 
 渐变实现结构图
 渐变实现结构图

+ 1 - 0
docs/guides/engine/transform.md

@@ -1,4 +1,5 @@
 # 变形
 # 变形
+
 ::: details 目录
 ::: details 目录
 [[toc]]
 [[toc]]
 :::
 :::

+ 3 - 0
docs/guides/feng-map/typeIdMap.md

@@ -1,3 +1,6 @@
 # 地图要素分类编码
 # 地图要素分类编码
 
 
+::: details 目录
+[[toc]]
+:::
 
 

+ 6 - 1
docs/guides/index.js

@@ -1,5 +1,9 @@
 const content = [
 const content = [
     {
     {
+        title: '简介',
+        path: '/guides/'
+    },
+    {
         title: "绘图引擎",
         title: "绘图引擎",
         path: "/guides/engine/",
         path: "/guides/engine/",
         children: [
         children: [
@@ -62,7 +66,8 @@ const content = [
             {
             {
                 title: "数据格式",
                 title: "数据格式",
                 children: [
                 children: [
-                    ["/guides/big/jsonFile", "jsonz 数据格式"],
+                    ["/guides/big/format/floorMap", "底图数据格式"],
+                    ["/guides/big/format/systemJson", "系统图数据格式"],
                 ]
                 ]
             },
             },
             ["/guides/big/style", "底图风格"],
             ["/guides/big/style", "底图风格"],

+ 5 - 0
docs/guides/scene/README.md

@@ -1,5 +1,10 @@
 场景管理
 场景管理
 
 
+::: details 目录
+[[toc]]
+:::
+
+
 
 
 1.视图-场景-对象的基本说明
 1.视图-场景-对象的基本说明
 2.绘制封装,painter传递过程
 2.绘制封装,painter传递过程

+ 5 - 1
docs/guides/scene/items/README.md

@@ -1 +1,5 @@
-Item
+# Item
+
+::: details 目录
+[[toc]]
+:::

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

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

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

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

+ 5 - 0
docs/guides/scene/items/editPolyline.md

@@ -1,5 +1,10 @@
 # 可编辑折线示例
 # 可编辑折线示例
 
 
+::: details 目录
+[[toc]]
+:::
+
+
 <scene-items-PolylineItem/>
 <scene-items-PolylineItem/>
 
 
 ::: tip 注
 ::: tip 注

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

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

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

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

+ 39 - 1
docs/guides/scene/items/rect.md

@@ -1,9 +1,46 @@
 # 矩形
 # 矩形
 
 
-左上角 宽高
+::: details 目录
+[[toc]]
+
+:::
 
 
 <scene-items-rect />
 <scene-items-rect />
 
 
+示例中展示了 一种渐变风格的 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 传参
+
+```
+    "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 查看代码
 ::: details 查看代码
 <<< @/docs/.vuepress/components/scene/items/rect.vue
 <<< @/docs/.vuepress/components/scene/items/rect.vue
 :::
 :::
@@ -11,4 +48,5 @@
 ::: tip item 展示
 ::: tip item 展示
     item 状态切换参考 建筑信息图-底图风格
     item 状态切换参考 建筑信息图-底图风格
     item 传入的数据 data 大写跟随数据字典
     item 传入的数据 data 大写跟随数据字典
+    保存item的时候,保存类型为 string,调用渐变类的 value() 方法即可返回当前渐变类的字符串;
 :::
 :::

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

@@ -1,3 +1,8 @@
 # 圆角矩形
 # 圆角矩形
 
 
+::: details 目录
+[[toc]]
+:::
+
+
 左上角 宽高 圆角半径
 左上角 宽高 圆角半径

+ 5 - 0
docs/guides/scene/items/svg.md

@@ -1 +1,6 @@
 # SVG 图
 # SVG 图
+
+::: details 目录
+[[toc]]
+:::
+

+ 5 - 0
docs/guides/scene/regularPolygon.md

@@ -1,5 +1,10 @@
 # 正多边形
 # 正多边形
 
 
+::: details 目录
+[[toc]]
+:::
+
+
 外接矩形
 外接矩形
 
 
 圆心 边数 外圆半径 旋转角度
 圆心 边数 外圆半径 旋转角度

+ 5 - 0
docs/guides/scene/star.md

@@ -1,5 +1,10 @@
 # 星形
 # 星形
 
 
+::: details 目录
+[[toc]]
+:::
+
+
 外接矩形
 外接矩形
 
 
 圆心 边数 外圆半径 內圆半径(默认是外圆的0.618,黄金比例) 旋转角度
 圆心 边数 外圆半径 內圆半径(默认是外圆的0.618,黄金比例) 旋转角度

+ 5 - 0
docs/guides/system-diagram/README.md

@@ -1,5 +1,10 @@
 系统图
 系统图
 
 
+::: details 目录
+[[toc]]
+:::
+
+
 系统图item继承关系
 系统图item继承关系
 
 
 ![系统图实现结构](./img/systemdiagram.png)
 ![系统图实现结构](./img/systemdiagram.png)

+ 2 - 2
package.json

@@ -14,8 +14,8 @@
   "dependencies": {
   "dependencies": {
     "@persagy-web/base": "2.2.1",
     "@persagy-web/base": "2.2.1",
     "@persagy-web/big": "2.2.1",
     "@persagy-web/big": "2.2.1",
-    "@persagy-web/draw": "2.2.2",
-    "@persagy-web/graph": "2.2.3",
+    "@persagy-web/draw": "2.2.3",
+    "@persagy-web/graph": "2.2.4",
     "vue": "^2.6.10",
     "vue": "^2.6.10",
     "element-ui": "^2.12.0",
     "element-ui": "^2.12.0",
     "vue-property-decorator": "^8.4.2"
     "vue-property-decorator": "^8.4.2"