浏览代码

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

YaolongHan 4 年之前
父节点
当前提交
4df29ea587

+ 49 - 0
docs/.vuepress/components/big/items/column.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SColumnItem} from "../../../../guides/big/items/src/SColumnItem";
+
+
+    export default {
+        name: "wall",
+        data(){
+            return {
+                view: null,
+                // 图中靠上位置的黑色矩形轮廓
+                outline1:[[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]],
+                // 图中靠下位置的,绘制多个图形,会覆盖
+                outline2:[
+                    [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
+                    [{X:20,Y:-30},{X:20,Y:-85},{X:110,Y:-85},{X:110,Y:-40}]
+                ]
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                this.view.scalable = false;
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SColumnItem(null,{OutLine:this.outline1});
+                scene.addItem(item);
+                // 只模拟了轮廓数据
+                const item2 = new SColumnItem(null,{OutLine:this.outline2});
+                scene.addItem(item2);
+                this.view.fitSceneToView();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 61 - 0
docs/.vuepress/components/big/items/door.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SDoorItem} from "../../../../guides/big/items/src/SDoorItem";
+
+
+    export default {
+        name: "wall",
+        data(){
+            return {
+                view: null,
+                // 图中靠上位置的黑色矩形轮廓
+                outline1:[[{X:120,Y:100},{X:120,Y:300}]],
+                // 图中靠下位置的,绘制多个图形,会覆盖
+                outline2:[
+                    [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
+                    [{X:20,Y:-30},{X:20,Y:-85},{X:110,Y:-85},{X:110,Y:-40}]
+                ]
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                // this.view.scalable = false;
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SDoorItem(null,
+                        {
+                            OutLine:this.outline1,
+                            FaceDirection: {X: 0, Y: -1, Z: 0},
+                            HandDirection: {X: 1, Y: 0, Z: 0}
+                        }
+                );
+                scene.addItem(item);
+                // 只模拟了轮廓数据
+                // const item2 = new SDoorItem(null,
+                //     {
+                //         OutLine:this.outline2,
+                //         FaceDirection: {X: -1, Y: 1, Z: 0},
+                //         HandDirection: {X: 1, Y: 1, Z: 0}
+                //     }
+                // );
+                // scene.addItem(item2);
+                // this.view.fitSceneToView();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 49 - 0
docs/.vuepress/components/big/items/space.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SSpaceItem} from "../../../../guides/big/items/src/SSpaceItem";
+
+
+    export default {
+        name: "space",
+        data(){
+            return {
+                view: null,
+                // 图中靠上位置的黑色矩形轮廓
+                outline1:[[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]],
+                // 图中靠下位置的,中间掏洞
+                outline2:[
+                    [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
+                    [{X:20,Y:-40},{X:20,Y:-45},{X:100,Y:-45},{X:100,Y:-40}]
+                ]
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                this.view.scalable = false;
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SSpaceItem(null,{OutLine:this.outline1});
+                scene.addItem(item);
+                // 只模拟了轮廓数据
+                const item2 = new SSpaceItem(null,{OutLine:this.outline2});
+                scene.addItem(item2);
+                this.view.fitSceneToView();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 49 - 0
docs/.vuepress/components/big/items/virtualWall.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SVirtualWallItem} from "../../../../guides/big/items/src/SVirtualWallItem";
+
+
+    export default {
+        name: "wall",
+        data(){
+            return {
+                view: null,
+                // 图中靠上位置的黑色矩形轮廓
+                outline1:[[{X:12000,Y:1000},{X:12000,Y:3000},{X:1000,Y:3000},{X:1000,Y:1000}]],
+                // 图中靠下位置的,中间掏洞
+                outline2:[
+                    [{X:12000,Y:-3000},{X:12000,Y:-5000},{X:1000,Y:-5000},{X:10,Y:-3000}],
+                    [{X:2000,Y:-4000},{X:2000,Y:-4500},{X:10000,Y:-4500},{X:10000,Y:-4000}]
+                ]
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SVirtualWallItem(null,{OutLine:this.outline1});
+                scene.addItem(item);
+                // 只模拟了轮廓数据
+                const item2 = new SVirtualWallItem(null,{OutLine:this.outline2});
+                scene.addItem(item2);
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 49 - 0
docs/.vuepress/components/big/items/wall.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SWallItem} from "../../../../guides/big/items/src/SWallItem";
+
+
+    export default {
+        name: "wall",
+        data(){
+            return {
+                view: null,
+                // 图中靠上位置的黑色矩形轮廓
+                outline1:[[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]],
+                // 图中靠下位置的,中间掏洞
+                outline2:[
+                    [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
+                    [{X:20,Y:-40},{X:20,Y:-45},{X:100,Y:-45},{X:100,Y:-40}]
+                ]
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                this.view.scalable = false;
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SWallItem(null,{OutLine:this.outline1});
+                scene.addItem(item);
+                // 只模拟了轮廓数据
+                const item2 = new SWallItem(null,{OutLine:this.outline2});
+                scene.addItem(item2);
+                this.view.fitSceneToView();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 42 - 0
docs/.vuepress/components/big/items/window.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SWindowItem} from "../../../../guides/big/items/src/SWindowItem";
+
+
+    export default {
+        name: "wall",
+        data(){
+            return {
+                view: null,
+                // 图中靠上位置的黑色矩形轮廓
+                outline1:[[{X:120,Y:100},{X:120,Y:300}]],
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                // this.view.scalable = false;
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SWindowItem(null,{OutLine:this.outline1});
+                scene.addItem(item);
+                this.view.fitSceneToView();
+                console.log(this.view)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 63 - 0
docs/.vuepress/components/big/items/zone.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <canvas id="wall" width="800" height="400"  tabindex="0" />
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/";
+    import {SZoneItem} from "../../../../guides/big/items/src/SZoneItem";
+    export default {
+        name: "zone",
+        data(){
+            return {
+                outline:[
+                    [
+                        // 未掏洞的空间
+                        [
+                            {"X":30150.15,"Y":82300.04,"Z":59400.0},
+                            {"X":30150.15,"Y":81400.04,"Z":59400.0},
+                            {"X":33400.15,"Y":82300.04,"Z":59400.0},
+                            {"X":30150.15,"Y":82300.04,"Z":59400.0}
+                        ],
+                    ],
+                    [
+                        // 掏洞的空间
+                        [
+                            {"X":25500.15,"Y":77100.04,"Z":59400.0},
+                            {"X":28200.15,"Y":77100.04,"Z":59400.0},
+                            {"X":28200.15,"Y":82300.04,"Z":59400.0},
+                            {"X":25500.15,"Y":82300.04,"Z":59400.0},
+                            {"X":25500.15,"Y":77100.04,"Z":59400.0}
+                        ],
+                        [
+                            {"X":25900.15,"Y":80300.04,"Z":59400.0},
+                            {"X":27200.15,"Y":80300.04,"Z":59400.0},
+                            {"X":27200.15,"Y":77900.04,"Z":59400.0},
+                            {"X":25900.15,"Y":77900.04,"Z":59400.0},
+                        ]
+                    ]
+                ]
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('wall');
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                // 只模拟了轮廓数据
+                const item = new SZoneItem(null,{OutLine:this.outline});
+                scene.addItem(item);
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 58 - 0
docs/guides/big/items/column.md

@@ -0,0 +1,58 @@
+# 柱子 Item 示例
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/items/src/SColumnItem.ts
+
+:::
+
+## 代码说明
+    
+### 数据说明
+```
+    Columns:[
+        {
+            Name: '',                           // 名称
+            OutLine: [
+                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+                ...                             // 内轮廓
+            ],                                  // 轮廓线
+            RoomBoundary: '',                   // 房间边界
+            Location: {X:0,Y:0,Z:0},            // 位置
+            ModelId: '',                        // 模型id
+            SourceId: '',                       // 对应Revit模型id
+        },
+        ...
+    ]
+```
+::: tip 注
+1、柱子可能有多个块组成<br/>
+2、柱子不会挖洞,是累加 <br/>
+3、内外轮廓数据无排序要求 <br/>
+4、轮廓数据单位均为毫米
+:::
+
+### 计算边界矩阵
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
+计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
+
+### Y轴取反
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
+数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-column />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/column.vue
+
+:::
+
+

+ 63 - 0
docs/guides/big/items/door.md

@@ -0,0 +1,63 @@
+# 门 Item 示例
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/items/src/SDoorItem.ts
+
+:::
+
+## 代码说明
+    
+### 数据说明
+```
+    Doors:[
+        {
+            FaceDirection: {X:0,Y:0,Z:0},       // 面朝方向
+            HandDirection: {X:0,Y:0,Z:0},       // 把手方向
+            Location: {X:0,Y:0,Z:0},            // 位置
+            ModelId: '',                        // 模型id
+            Name: '',                           // 名称
+            OutLine: [
+                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+                ...                             // 内轮廓
+            ],                                  // 轮廓线
+            Owner: '',                          // 拥有者的RevitId
+            SourceId: '',                       // 对应Revit模型id
+            Thick: 200,                         // 厚度
+            WallId: '',                         // 所属墙
+            Width: 200,                         // 宽度
+        },
+        ...
+    ]
+```
+::: tip 注
+1、根据把手方向确定门的转轴 <br/>
+2、根据面朝方向确定门朝哪边开 <br/>
+3、outline 仅有一项,且只有2个点 <br/>
+5、轮廓数据单位均为毫米
+:::
+
+### 计算边界矩阵
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
+计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
+
+### Y轴取反
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
+数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-door />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/door.vue
+
+:::
+
+

+ 60 - 0
docs/guides/big/items/space.md

@@ -0,0 +1,60 @@
+# 空间 Item 示例
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/items/src/SSpaceItem.ts
+
+:::
+
+## 代码说明
+    
+### 数据说明
+```
+    Spaces:[
+        {
+            BoundarySegments: [[''],...],       // 轮廓线段
+            Location: {X:0,Y:0,Z:0},            // 位置
+            ModelId: '',                        // 模型id
+            Name: '',                           // 名称
+            OutLine: [
+                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+                ...                             // 内轮廓
+            ],                                  // 轮廓线
+            SourceId: '',                       // 对应Revit模型id
+            Tag: '',                            // 补充信息
+            Height: 200,                        // 高度
+        },
+        ...
+    ]
+```
+::: tip 注
+1、空间会挖洞,所以 outline 是二维数组 <br/>
+2、outline 中第一项是外轮廓,从第二项开始均为内轮廓,内轮廓即为挖洞 <br/>
+3、外轮廓数据顺时针排序,内轮廓为逆时针排序 <br/>
+4、轮廓数据单位均为毫米
+:::
+
+### 计算边界矩阵
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
+计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
+
+### Y轴取反
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
+数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-space />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/space.vue
+
+:::
+
+

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

@@ -120,18 +120,18 @@ export class SDoorItem extends SGraphItem {
     onDraw(painter: SPainter): void {
         painter.translate(this.p.x, this.p.y);
         painter.rotate(this.ang);
-        painter.pen.lineWidth = 100;
+        painter.pen.lineWidth = painter.toPx(1);
         painter.pen.color = ItemColor.doorColor;
         painter.drawLine(0, 0, this.r, 0);
-        painter.pen.lineDash = [50, 100];
+        painter.pen.lineDash = [5, 5];
         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()
 } // Class SDoorItem

+ 1 - 1
docs/guides/big/items/src/SVirtualWallItem.ts

@@ -84,7 +84,7 @@ export class SVirtualWallItem extends SGraphItem {
     onDraw(painter: SPainter): void {
         painter.pen.lineWidth = painter.toPx(1);
         painter.pen.color = ItemColor.virtualWallColor;
-        painter.pen.lineDash = [20, 20];
+        painter.pen.lineDash = [200, 100];
         this.pointArr.forEach((t): void => {
             painter.drawPolyline(t);
         });

+ 7 - 6
docs/guides/big/items/src/SWallItem.ts

@@ -1,4 +1,4 @@
-import { SPainter, SPoint, SRect } from "@persagy-web/draw/lib";
+import {SPainter, SPath2D, SPoint, SRect} from "@persagy-web/draw/lib";
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { Wall } from "@persagy-web/big/lib/types/floor/Wall";
 import { ItemColor, ItemOrder } from "@persagy-web/big/lib";
@@ -21,6 +21,8 @@ export class SWallItem extends SGraphItem {
     private maxY = Number.MIN_SAFE_INTEGER;
     /** 墙轮廓线坐标list  */
     private readonly pointArr: SPoint[][] = [];
+    /** path对象  */
+    private path = new SPath2D();
 
     /**
      * 构造函数
@@ -38,8 +40,8 @@ export class SWallItem extends SGraphItem {
             this.maxX = this.minX;
             this.minY = -tempArr[0][0].Y;
             this.maxY = this.minY;
-            this.pointArr = tempArr.map((t): SPoint[] => {
-                return t.map(
+            tempArr.forEach((t): void => {
+                const temp = t.map(
                     (it): SPoint => {
                         let x = it.X,
                             y = -it.Y;
@@ -58,6 +60,7 @@ export class SWallItem extends SGraphItem {
                         return new SPoint(x, y);
                     }
                 );
+                this.path.polygon(temp);
             });
         }
     } // Constructor
@@ -85,8 +88,6 @@ export class SWallItem extends SGraphItem {
         painter.pen.color = ItemColor.wallColor;
         painter.pen.lineWidth = painter.toPx(1);
         painter.brush.color = ItemColor.wallColor;
-        this.pointArr.forEach((t): void => {
-            painter.drawPolygon(t);
-        });
+        painter.drawPath(this.path);
     } // Function onDraw()
 } // Class SWallItem

+ 1 - 1
docs/guides/big/items/src/SWindowItem.ts

@@ -49,7 +49,7 @@ export class SWindowItem extends SGraphItem {
                     if (y > this.maxY) {
                         this.maxY = y;
                     }
-                    return new SPoint(t.X, -t.Y);
+                    return new SPoint(x, y);
                 }
             );
         }

docs/guides/big/items/src/ZoneItem.ts → docs/guides/big/items/src/SZoneItem.ts


+ 57 - 0
docs/guides/big/items/virtualWall.md

@@ -0,0 +1,57 @@
+# 虚拟墙 Item 示例
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/items/src/SVirtualWallItem.ts
+
+:::
+
+## 代码说明
+    
+### 数据说明
+```
+    VirtualWalls:[
+        {
+            Location: {X:0,Y:0,Z:0},            // 位置
+            ModelId: '',                        // 模型id
+            Name: '',                           // 名称
+            OutLine: [
+                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+                ...                             // 内轮廓
+            ],                                  // 轮廓线
+            SourceId: '',                       // 对应Revit模型id
+        },
+        ...
+    ]
+```
+::: tip 注
+1、虚拟墙是一段一段组成的 <br/>
+2、outline是二维代表是由多段虚拟墙组成 <br/>
+3、outline无排序要求 <br/>
+4、轮廓数据单位均为毫米
+:::
+
+### 计算边界矩阵
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
+计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
+
+### Y轴取反
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
+数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-virtualWall />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/virtualWall.vue
+
+:::
+
+

+ 21 - 5
docs/guides/big/items/wall.md

@@ -32,14 +32,30 @@
         ...
     ]
 ```
-墙是一段一段组成的;每段墙都可能挖洞; outline 中第一项是外轮廓,从第二项开始均为内轮廓,内轮廓即为挖洞;外轮廓数据顺时针排序,内轮廓为逆时针排序;
+::: tip 注
+1、墙是一段一段组成的 <br/>
+2、每段墙都可能挖洞,所以 outline 是二维数组 <br/>
+3、outline 中第一项是外轮廓,从第二项开始均为内轮廓,内轮廓即为挖洞 <br/>
+4、外轮廓数据顺时针排序,内轮廓为逆时针排序 <br/>
+5、轮廓数据单位均为毫米
+:::
 
 ### 计算边界矩阵
-不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;
-
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
 计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
 
 ### Y轴取反
-revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;
- 
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
 数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-wall />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/wall.vue
+
+:::
+
+

+ 54 - 0
docs/guides/big/items/window.md

@@ -0,0 +1,54 @@
+# 窗户 Item 示例
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/items/src/SWindowItem.ts
+
+:::
+
+## 代码说明
+    
+### 数据说明
+```
+    Walls:[
+        {
+            LevelId: '',                        // 层id
+            Location: {X:0,Y:0,Z:0},            // 位置
+            ModelId: '',                        // 模型id
+            Name: '',                           // 名称
+            OutLine: [
+                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+                ...                             // 内轮廓
+            ],                                  // 轮廓线
+            SourceId: '',                       // 对应Revit模型id
+            Tag: '',                            // 补充信息
+            Width: 200,                         // 厚度
+        },
+        ...
+    ]
+```
+
+### 计算边界矩阵
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
+计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
+
+### Y轴取反
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
+数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-window />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/window.vue
+
+:::
+
+

+ 59 - 0
docs/guides/big/items/zone.md

@@ -0,0 +1,59 @@
+# 业务空间 Item 示例
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/items/src/SZoneItem.ts
+
+:::
+
+## 代码说明
+    
+### 数据说明
+```
+    Zone: {
+            xxx: xxx,                           // 等业务空间属性
+            OutLine: [
+                [
+                    [{X:0,Y:0,Z:0},...],        // 第一个空间的外轮廓
+                    ...                         // 第一个空间的内轮廓
+                ],
+                [
+                    [{X:0,Y:0,Z:0},...],        // 第二个空间的外轮廓
+                    ...                         // 第二个空间的内轮廓
+                ],
+                ...                             // ...
+            ],                                  // 轮廓线
+        }
+```
+::: tip 注
+1、业务空间由多个空间组成 <br/>
+2、每个空间可能挖洞,所以 outline 是三维数组 <br/>
+3、外轮廓数据顺时针排序,内轮廓为逆时针排序 <br/>
+4、轮廓数据单位均为毫米
+:::
+
+### 计算边界矩阵
+不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
+计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
+
+### Y轴取反
+业务空间轮廓线由空间轮廓线直接组成或者由空间轮廓线计算而来<br />
+revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
+数据是通过 revit 模型导出
+
+## 绘制示例
+
+<big-items-zone />
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/big/items/zone.vue
+
+:::
+
+

+ 7 - 1
docs/guides/index.js

@@ -42,7 +42,13 @@ const content = [
             {
                 title: "底图 Item 示例",
                 children: [
-                    ["/guides/big/items/wall", "墙"]
+                    ["/guides/big/items/wall", "墙"],
+                    ["/guides/big/items/column", "柱子"],
+                    ["/guides/big/items/door", "门"],
+                    ["/guides/big/items/space", "空间"],
+                    ["/guides/big/items/virtualWall", "虚拟墙"],
+                    ["/guides/big/items/window", "窗户"],
+                    ["/guides/big/items/zone", "业务空间"],
                 ]
             },
             ["/guides/big/workLine", "工作流程"],