YaolongHan 4 years ago
parent
commit
8e39a781d0
41 changed files with 990 additions and 89 deletions
  1. 1 1
      docs/.vuepress/components/big/items/column.vue
  2. 3 3
      docs/.vuepress/components/big/items/door.vue
  3. 1 1
      docs/.vuepress/components/big/items/space.vue
  4. 1 1
      docs/.vuepress/components/big/items/wall.vue
  5. 2 3
      docs/.vuepress/components/big/items/window.vue
  6. 61 0
      docs/.vuepress/components/engine/composite/sourceOver.vue
  7. 37 0
      docs/.vuepress/components/engine/gradient/GradRect.ts
  8. 39 0
      docs/.vuepress/components/engine/gradient/lineGradient.vue
  9. 39 0
      docs/.vuepress/components/engine/gradient/lineGradient2.vue
  10. 39 0
      docs/.vuepress/components/engine/gradient/radialGradient.vue
  11. 46 0
      docs/.vuepress/components/engine/gradient/radialGradient2.vue
  12. 59 0
      docs/.vuepress/components/engine/gradient/radialGradient3.vue
  13. 47 0
      docs/.vuepress/components/engine/gradient/radialGradient4.vue
  14. 46 0
      docs/.vuepress/components/engine/gradient/radialGradient5.vue
  15. 73 0
      docs/.vuepress/components/engine/gradient/radialGradient6.vue
  16. 202 2
      docs/.vuepress/components/scene/items/ClockItem.vue
  17. 3 7
      docs/.vuepress/components/scene/items/ImageItem.vue
  18. 15 0
      docs/.vuepress/config.js
  19. 17 0
      docs/guides/big/factory/itemFactory.md
  20. 123 0
      docs/guides/big/factory/src/SItemFactory.ts
  21. 2 2
      docs/guides/big/items/column.md
  22. 7 1
      docs/guides/big/items/door.md
  23. 6 6
      docs/guides/big/items/src/SDoorItem.ts
  24. 6 0
      docs/guides/big/layerOrder.md
  25. 18 0
      docs/guides/big/style.md
  26. 8 0
      docs/guides/engine/composite.md
  27. 46 36
      docs/guides/engine/gradient.md
  28. 0 2
      docs/guides/engine/image.md
  29. BIN
      docs/guides/engine/img/line-gradient.png
  30. BIN
      docs/guides/engine/img/line-gradient2.png
  31. BIN
      docs/guides/engine/img/radial-gradient.png
  32. BIN
      docs/guides/engine/img/radial-gradient2.png
  33. BIN
      docs/guides/engine/img/radial-gradient3.png
  34. BIN
      docs/guides/engine/img/radial-gradient4.png
  35. BIN
      docs/guides/engine/img/radial-gradient5.png
  36. BIN
      docs/guides/engine/img/radial-gradient6.png
  37. BIN
      docs/guides/engine/img/radial-gradient7.png
  38. 0 3
      docs/guides/engine/text.md
  39. 27 19
      docs/guides/index.js
  40. 1 1
      docs/guides/scene/items/image.md
  41. 15 1
      docs/setup/ide/nodejs.md

+ 1 - 1
docs/.vuepress/components/big/items/column.vue

@@ -29,7 +29,6 @@
         methods:{
             init(){
                 this.view = new SGraphView('wall');
-                this.view.scalable = false;
                 const scene = new SGraphScene();
                 this.view.scene = scene;
                 // 只模拟了轮廓数据
@@ -39,6 +38,7 @@
                 const item2 = new SColumnItem(null,{OutLine:this.outline2});
                 scene.addItem(item2);
                 this.view.fitSceneToView();
+                this.view.scalable = false;
             }
         }
     }

+ 3 - 3
docs/.vuepress/components/big/items/door.vue

@@ -15,7 +15,7 @@
             return {
                 view: null,
                 // 图中靠上位置的黑色矩形轮廓
-                outline1:[[{X:120,Y:100},{X:120,Y:300}]],
+                outline1:[[{X:12000,Y:10000},{X:12000,Y:30000}]],
                 // 图中靠下位置的,绘制多个图形,会覆盖
                 outline2:[
                     [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
@@ -29,7 +29,6 @@
         methods:{
             init(){
                 this.view = new SGraphView('wall');
-                // this.view.scalable = false;
                 const scene = new SGraphScene();
                 this.view.scene = scene;
                 // 只模拟了轮廓数据
@@ -50,7 +49,8 @@
                 //     }
                 // );
                 // scene.addItem(item2);
-                // this.view.fitSceneToView();
+                this.view.fitSceneToView();
+                // this.view.scalable = false;
             }
         }
     }

+ 1 - 1
docs/.vuepress/components/big/items/space.vue

@@ -29,7 +29,6 @@
         methods:{
             init(){
                 this.view = new SGraphView('wall');
-                this.view.scalable = false;
                 const scene = new SGraphScene();
                 this.view.scene = scene;
                 // 只模拟了轮廓数据
@@ -39,6 +38,7 @@
                 const item2 = new SSpaceItem(null,{OutLine:this.outline2});
                 scene.addItem(item2);
                 this.view.fitSceneToView();
+                this.view.scalable = false;
             }
         }
     }

+ 1 - 1
docs/.vuepress/components/big/items/wall.vue

@@ -29,7 +29,6 @@
         methods:{
             init(){
                 this.view = new SGraphView('wall');
-                this.view.scalable = false;
                 const scene = new SGraphScene();
                 this.view.scene = scene;
                 // 只模拟了轮廓数据
@@ -39,6 +38,7 @@
                 const item2 = new SWallItem(null,{OutLine:this.outline2});
                 scene.addItem(item2);
                 this.view.fitSceneToView();
+                this.view.scalable = false;
             }
         }
     }

+ 2 - 3
docs/.vuepress/components/big/items/window.vue

@@ -15,7 +15,7 @@
             return {
                 view: null,
                 // 图中靠上位置的黑色矩形轮廓
-                outline1:[[{X:120,Y:100},{X:120,Y:300}]],
+                outline1:[[{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}]],
             }
         },
         mounted() {
@@ -24,14 +24,13 @@
         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)
+                this.view.scalable = false;
             }
         }
     }

+ 61 - 0
docs/.vuepress/components/engine/composite/sourceOver.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <canvas id="sourceOver" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
+
+    class Circle extends SGraphItem{
+        constructor(parent, com){
+            super(parent);
+            this.composite = com ? SCompositeType.SourceOver : com;
+        }
+        boundingRect() {
+            return new SRect(-500,-500,1500,1500);
+        }
+        onDraw(painter) {
+            painter.brush.color = SColor.Blue;
+            painter.pen.color = SColor.Transparent;
+            painter.drawRect(0,0,1000,1000);
+
+            painter.composite = SCompositeType.SourceOut;
+
+            painter.brush.color = SColor.Red;
+            painter.drawCircle(0,0,500);
+
+            painter.brush.color = SColor.Transparent;
+            painter.pen.color = SColor.Black;
+            painter.drawRect(-500,-500,1500,1500);
+        }
+    }
+
+    export default {
+        name: "sourceOver",
+        data(){
+            return {
+                view:''
+            }
+        },
+        mounted() {
+            this.init()
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('sourceOver');
+                const scene = new SGraphScene();
+                const circle = new Circle(null, SCompositeType.SourceOut);
+                scene.addItem(circle);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 37 - 0
docs/.vuepress/components/engine/gradient/GradRect.ts

@@ -0,0 +1,37 @@
+import {SGraphItem} from "@persagy-web/graph/lib";
+import {SColor, SLinearGradient, SPainter, SRadialGradient, SRect} from "@persagy-web/draw/lib";
+
+export class GradRect extends SGraphItem{
+    minX = 0;
+    minY = 0;
+    maxY = 1000;
+    maxX = 1000;
+    gradient: SRadialGradient | SLinearGradient |  null = null;
+    constructor(parent: SGraphItem, grad: SRadialGradient) {
+        super(parent);
+        this.gradient = grad;
+        this.gradient.addColorStop(0, new SColor('#ff483b'));
+        this.gradient.addColorStop(0.5, new SColor('#04ff00'));
+        this.gradient.addColorStop(1, new SColor('#3d4eff'));
+    }
+
+    boundingRect() {
+        return new SRect(
+            this.minX,
+            this.minY,
+            this.maxX - this.minX,
+            this.maxY - this.minY
+        );
+    }
+
+    onDraw(painter:SPainter) {
+        painter.pen.color = SColor.Black;
+        painter.brush.gradient = this.gradient;
+        painter.drawRect(0,0,1000,1000);
+        if (this.gradient instanceof  SRadialGradient) {
+            painter.brush.color = SColor.Transparent;
+            painter.drawCircle(this.gradient.x1, this.gradient.y1, this.gradient.r1);
+            painter.drawCircle(this.gradient.x2, this.gradient.y2, this.gradient.r2);
+        }
+    }
+}

+ 39 - 0
docs/.vuepress/components/engine/gradient/lineGradient.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <canvas id="lineGradient1" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SLinearGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "lineGradient1",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('lineGradient1');
+                const scene = new SGraphScene();
+                const grad = new SLinearGradient(0,0,0,1000);
+                const item = new GradRect(null, grad);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 39 - 0
docs/.vuepress/components/engine/gradient/lineGradient2.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <canvas id="lineGradient2" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SLinearGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "lineGradient1",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('lineGradient2');
+                const scene = new SGraphScene();
+                const grad = new SLinearGradient(0,0,1000,0);
+                const item = new GradRect(null, grad);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 39 - 0
docs/.vuepress/components/engine/gradient/radialGradient.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <canvas id="radialGradient1" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SRadialGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "radialGradient1",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('radialGradient1');
+                const scene = new SGraphScene();
+                const grad = new SRadialGradient(500,500,50,500,500,500);
+                const item = new GradRect(null, grad);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 46 - 0
docs/.vuepress/components/engine/gradient/radialGradient2.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <canvas id="radialGradient2" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SRadialGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "radialGradient1",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('radialGradient2');
+                const scene = new SGraphScene();
+                const grad = new SRadialGradient(
+                    250,
+                    250,
+                    50, //圆1半径
+                    500,
+                    500,
+                    500 //圆2半径
+                );
+                const item = new GradRect(null, grad);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 59 - 0
docs/.vuepress/components/engine/gradient/radialGradient3.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <canvas id="radialGradient3" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import {SColor, SRadialGradient, SRect} from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "radialGradient3",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('radialGradient3');
+                const scene = new SGraphScene();
+                // 渐变1
+                const grad1 = new SRadialGradient(
+                    100,
+                    100,
+                    50, //圆1半径
+                    800,
+                    800,
+                    500 //圆2半径
+                );
+                // 渐变2
+                const grad2 = new SRadialGradient(
+                    200,
+                    200,
+                    300, //圆1半径
+                    800,
+                    800,
+                    50 //圆2半径
+                );
+                const item = new GradRect(null, grad1);
+                scene.addItem(item);
+                const item2 = new GradRect(null,grad2);
+                item2.moveTo(1300,0);
+                scene.addItem(item2);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 47 - 0
docs/.vuepress/components/engine/gradient/radialGradient4.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <canvas id="radialGradient4" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SRadialGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "radialGradient4",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('radialGradient4');
+                const scene = new SGraphScene();
+                // 渐变1
+                const grad1 = new SRadialGradient(
+                    200,
+                    200,
+                    200, //圆1半径
+                    800,
+                    800,
+                    200 //圆2半径
+                );
+                const item = new GradRect(null, grad1);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 46 - 0
docs/.vuepress/components/engine/gradient/radialGradient5.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <canvas id="radialGradient5" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SRadialGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+    export default {
+        name: "radialGradient5",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('radialGradient5');
+                const scene = new SGraphScene();
+                // 渐变1
+                const grad1 = new SRadialGradient(
+                    400,
+                    400,
+                    200, //圆1半径
+                    600,
+                    600,
+                    200 //圆2半径
+                );
+                const item = new GradRect(null, grad1);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 73 - 0
docs/.vuepress/components/engine/gradient/radialGradient6.vue

@@ -0,0 +1,73 @@
+<!--
+  - **********************************************************************************************************************
+  -
+  -          !!
+  -        .F88X
+  -        X8888Y
+  -      .}888888N;
+  -        i888888N;        .:!              .I$WI:
+  -          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+  -          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+  -            +888888N;  .8888888Y                                  "&&8Y.}8,
+  -            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+  -              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+  -              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+  -            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+  -            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+  -          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+  -        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+  -      .:R888888I
+  -      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+  -        ~8888'
+  -        .!88~                                                                     All rights reserved.
+  -
+  - **********************************************************************************************************************
+  -->
+
+<template>
+    <div>
+        <canvas id="radialGradient6" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SRadialGradient } from "@persagy-web/draw/lib";
+    import {GradRect} from "./GradRect";
+
+    export default {
+        name: "radialGradient6",
+        data(){
+            return {
+                view: ''
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('radialGradient6');
+                const scene = new SGraphScene();
+                // 渐变1
+                const grad1 = new SRadialGradient(
+                    500,
+                    500,
+                    200, //圆1半径
+                    500,
+                    500,
+                    200 //圆2半径
+                );
+                const item = new GradRect(null, grad1);
+                scene.addItem(item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 202 - 2
docs/.vuepress/components/scene/items/ClockItem.vue

@@ -3,8 +3,208 @@
 </template>
 
 <script lang="ts">
-    import { SGraphItem, SGraphScene, SGraphView, SGraphClockItem } from "@persagy-web/graph";
-    import { SPainter } from "@persagy-web/draw/lib";
+    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
+
+    import {
+        SColor,
+        SLineCapStyle,
+        SPainter,
+        SRect,
+        SSize
+    } from "@persagy-web/draw";
+
+    class SGraphClockItem extends SGraphItem {
+        /** 大小 */
+        size: SSize;
+
+        /** 宽度 */
+        get width() {
+            return this.size.width;
+        } // Get width
+        set width(v: number) {
+            this.size.width = v;
+        } // Set width
+
+        /** 高度 */
+        get height() {
+            return this.size.height;
+        } // Get width
+        set height(v: number) {
+            this.size.height = v;
+        } // Set width
+
+        /** 半径 */
+        get radius() {
+            return Math.min(this.width, this.height) / 2.0;
+        } // Get radius
+
+        /**
+         * 构造函数
+         *
+         * @param   parent      指向父Item
+         * @param   size        大小
+         */
+        constructor(parent: SGraphItem | null, size: SSize);
+
+        /**
+         * 构造函数
+         *
+         * @param   parent      指向父Item
+         * @param   width       宽度
+         * @param   height      高度
+         */
+        constructor(parent: SGraphItem | null, width: number, height: number);
+
+        /**
+         * 构造函数
+         *
+         * @param   parent      指向父Item
+         * @param   width       宽度
+         * @param   height      高度
+         */
+        constructor(
+            parent: SGraphItem | null,
+            width: number | SSize,
+            height?: number
+        ) {
+            super(parent);
+            if (width instanceof SSize) {
+                this.size = new SSize(width.width, width.height);
+            } else {
+                this.size = new SSize(width as number, height as number);
+            }
+        } // Constructor()
+
+        /**
+         * 对象边界区域
+         *
+         * @return  边界区域
+         */
+        boundingRect(): SRect {
+            return new SRect(0, 0, this.width, this.height);
+        } // Function SRect()
+
+        /**
+         * Item绘制操作
+         *
+         * @param   painter       painter对象
+         */
+        onDraw(painter: SPainter): void {
+            painter.translate(this.width / 2, this.height / 2);
+            let t = new Date();
+
+            this.drawScale(painter);
+            this.drawHour(painter, t.getHours(), t.getMinutes(), t.getSeconds());
+            this.drawMinute(painter, t.getMinutes(), t.getSeconds());
+            this.drawSecond(painter, t.getSeconds() + t.getMilliseconds() / 1000.0);
+        } // Function onDraw()
+
+        /**
+         * 绘制表刻度
+         *
+         * @param   painter     painter对象
+         */
+        private drawScale(painter: SPainter): void {
+            let scaleLength = Math.max(this.radius / 10.0, 2.0);
+            let scaleLength1 = scaleLength * 1.2;
+            let strokeWidth = Math.max(this.radius / 100.0, 2.0);
+            let strokeWidth1 = strokeWidth * 2.0;
+
+            painter.save();
+            painter.pen.color = SColor.Blue;
+
+            for (let i = 1; i <= 12; i++) {
+                // 12小时刻度
+                painter.pen.lineWidth = strokeWidth1;
+                painter.drawLine(0, -this.radius, 0, -this.radius + scaleLength1);
+
+                if (this.radius >= 40) {
+                    // 如果半度大于40显示分钟刻度
+                    painter.rotate(6);
+                    for (let j = 1; j <= 4; j++) {
+                        // 分钟刻度
+                        painter.pen.lineWidth = strokeWidth;
+                        painter.drawLine(
+                            0,
+                            -this.radius,
+                            0,
+                            -this.radius + scaleLength
+                        );
+                        painter.rotate(6);
+                    }
+                } else {
+                    painter.rotate(30);
+                }
+            }
+
+            painter.restore();
+        } // Function drawScale()
+
+        /**
+         * 绘制时针
+         *
+         * @param   painter     painter对象
+         * @param   hour        时
+         * @param   minute      分
+         * @param   second      秒
+         */
+        private drawHour(
+            painter: SPainter,
+            hour: number,
+            minute: number,
+            second: number
+        ): void {
+            painter.save();
+            painter.pen.lineCapStyle = SLineCapStyle.Round;
+            painter.pen.lineWidth = Math.max(this.radius / 30.0, 4.0);
+            painter.rotate(
+                hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600
+            );
+            painter.drawLine(0, this.radius / 10.0, 0, -this.radius / 2.0);
+            painter.restore();
+        } // Function drawHour()
+
+        /**
+         * 绘制秒针
+         *
+         * @param   painter     painter对象
+         * @param   minute      分
+         * @param   second      秒
+         */
+        private drawMinute(
+            painter: SPainter,
+            minute: number,
+            second: number
+        ): void {
+            painter.save();
+            painter.pen.lineCapStyle = SLineCapStyle.Round;
+            painter.pen.lineWidth = Math.max(this.radius / 40.0, 4.0);
+            painter.rotate(minute * 6 + (second * 6) / 60.0);
+            painter.drawLine(0, this.radius / 10.0, 0, (-this.radius * 2.0) / 3.0);
+            painter.restore();
+        } // Function drawMinute()
+
+        /**
+         * 绘制秒针
+         *
+         * @param   painter     painter对象
+         * @param   second      秒
+         */
+        private drawSecond(painter: SPainter, second: number): void {
+            painter.save();
+            painter.pen.lineCapStyle = SLineCapStyle.Round;
+            painter.pen.lineWidth = Math.max(this.radius / 100.0, 3.0);
+            painter.pen.color = SColor.Red;
+            painter.rotate(second * 6);
+            painter.drawLine(
+                0,
+                this.radius / 5.0,
+                0,
+                -this.radius + this.radius / 10.0
+            );
+            painter.restore();
+        } // Function drawSecond()
+    } // Class SGraphClockItem
 
     class TestView extends SGraphView {
         clock1 = new SGraphClockItem(null, 300, 300);

+ 3 - 7
docs/.vuepress/components/scene/items/ImageItem.vue

@@ -9,11 +9,11 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph";
 
     class SScene extends SGraphScene {
-        imageItem: SImageItem = new SImageItem(null);
+        imageItem = new SImageItem(null);
         constructor() {
             super();
             this.imageItem.moveable = true;
@@ -31,9 +31,8 @@
     }
 
     export default {
-        mounted(): void {
+        mounted() {
             let view = new ImageView();
-            // @ts-ignore
             view.scene = this.scene;
             view.fitSceneToView();
         },
@@ -44,15 +43,12 @@
         },
         methods: {
             Full() {
-                // @ts-ignore
                 this.scene.imageItem.showType = SImageShowType.Full;
             },
             Equivalency() {
-                // @ts-ignore
                 this.scene.imageItem.showType = SImageShowType.Equivalency;
             },
             AutoFit() {
-                // @ts-ignore
                 this.scene.imageItem.showType = SImageShowType.AutoFit;
             },
         }

+ 15 - 0
docs/.vuepress/config.js

@@ -67,6 +67,7 @@ module.exports = {
             },
             {
                 text: "开发文档",
+<<<<<<< HEAD
                 items: [{
                     text: "引擎",
                     items: [{
@@ -95,6 +96,20 @@ module.exports = {
                         }
                     ]
                 }, ]
+=======
+                items: [
+                    {
+                        text: "引擎",
+                        items: [
+                            {text: "图形引擎", link: "/guides/engine/"},
+                            {text: "场景管理", link: "/guides/scene/"},
+                            {text: "楼层平面图", link: "/guides/big/"},
+                            {text: "系统图", link: "/guides/system-diagram/"},
+                            {text: "编辑器", link: "/guides/edit/"}
+                        ]
+                    },
+                ]
+>>>>>>> a5361b3c73737dafb997d2168184296691e4255f
             },
             {
                 text: "API参考",

+ 17 - 0
docs/guides/big/factory/itemFactory.md

@@ -0,0 +1,17 @@
+# item 创建工厂
+::: details 目录
+[[toc]]
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/big/factory/src/SItemFactory.ts
+
+:::
+
+::: tip 工厂主要职责
+    根据传入的item风格,创建相应样式的 item, 并返回
+:::
+

+ 123 - 0
docs/guides/big/factory/src/SItemFactory.ts

@@ -0,0 +1,123 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import {Column} from "@persagy-web/big/lib/types/floor/Column";
+import {SColumnItem} from "@persagy-web/big/lib/items/floor/SColumnItem";
+import {Wall} from "@persagy-web/big/lib/types/floor/Wall";
+import {SWallItem} from "@persagy-web/big/lib/items/floor/SWallItem";
+import {VirtualWall} from "@persagy-web/big/lib/types/floor/VirtualWall";
+import {SVirtualWallItem} from "@persagy-web/big/lib/items/floor/SVirtualWallItem";
+import {Space} from "@persagy-web/big/lib/types/floor/Space";
+import {SSpaceItem} from "@persagy-web/big/lib/items/floor/SSpaceItem";
+import {Door} from "@persagy-web/big/lib/types/floor/Door";
+import {SDoorItem} from "@persagy-web/big/lib/items/floor/SDoorItem";
+import {Casement} from "@persagy-web/big/lib/types/floor/Casement";
+import {SWindowItem} from "@persagy-web/big/lib/items/floor/SWindowItem";
+import {SZoneItem} from "@persagy-web/big/lib/items/floor/ZoneItem";
+import {Zone} from "@persagy-web/big/lib/types/floor/Zone";
+
+/**
+ * item创建工厂
+ *
+ */
+
+export class SItemFactory {
+    /**
+     * 构造函数
+     *
+     * */
+    constructor() {} // Constructor
+
+    /**
+     * 创建柱子item
+     *
+     * @param   data    柱子数据
+     * @return  柱子item
+     * */
+    createColumn(data: Column): SColumnItem {
+        return new SColumnItem(null, data);
+    } // Function createColumn()
+
+    /**
+     * 创建墙item
+     *
+     * @param   data    墙数据
+     * @return  墙item
+     * */
+    createWall(data: Wall): SWallItem {
+        return new SWallItem(null, data);
+    } // Function createWall()
+
+    /**
+     * 创建虚拟墙item
+     *
+     * @param   data    虚拟墙数据
+     * @return  虚拟墙item
+     * */
+    createVirtualWall(data: VirtualWall): SVirtualWallItem {
+        return new SVirtualWallItem(null, data);
+    } // Function createVirtualWall()
+
+    /**
+     * 创建空间item
+     *
+     * @param   data    空间数据
+     * @return  空间item
+     * */
+    createSpace(data: Space): SSpaceItem {
+        return new SSpaceItem(null, data);
+    } // Function createSpace()
+
+    /**
+     * 创建门item
+     *
+     * @param   data    门数据
+     * @return  门item
+     * */
+    createDoor(data: Door): SDoorItem {
+        return new SDoorItem(null, data);
+    } // Function createDoor()
+
+    /**
+     * 创建窗item
+     *
+     * @param   data    窗户数据
+     * @return  窗户item
+     * */
+    createWindow(data: Casement): SWindowItem {
+        return new SWindowItem(null, data);
+    } // Function createWindow()
+
+    /**
+     * 创建业务空间item
+     *
+     * @param   data    业务空间数据
+     * @return  业务空间item
+     * */
+    createZone(data: Zone): SZoneItem {
+        return new SZoneItem(null, data);
+    } // Function createZone()
+} // Class SItemFactory

+ 2 - 2
docs/guides/big/items/column.md

@@ -30,8 +30,8 @@
         ...
     ]
 ```
-::: tip
-1、柱子可能有多个块组成<br/>
+::: tip
+1、柱子可能有多个块组成 <br/>
 2、柱子不会挖洞,是累加 <br/>
 3、内外轮廓数据无排序要求 <br/>
 4、轮廓数据单位均为毫米

+ 7 - 1
docs/guides/big/items/door.md

@@ -35,7 +35,7 @@
         ...
     ]
 ```
-::: tip
+::: tip
 1、根据把手方向确定门的转轴 <br/>
 2、根据面朝方向确定门朝哪边开 <br/>
 3、outline 仅有一项,且只有2个点 <br/>
@@ -46,6 +46,12 @@
 不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;<br/>
 计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
 
+### 计算门开的方向及旋转方向
+使用向量点乘 => x1 * x2 + y1 * y2,计算得到,大于0同向,则旋转点使用第二个点;否则使用第一个 <br />
+计算两点间距离,从而得到门的长度 <br />
+利用arctan计算得到,门展开方向与水平方向夹角<br />
+使用向量叉乘 => x1 * y2 - x2 * y1, 计算得到, 小于0代表门顺时针展开,同时确定了展开的弧线绘制起始和结束角度 <br /> 
+
 ### Y轴取反
 revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;<br/>
 数据是通过 revit 模型导出

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

@@ -1,4 +1,4 @@
-import { SPainter, SPoint, SRect } from "@persagy-web/draw/lib";
+import {SColor, SPainter, SPoint, SRect} from "@persagy-web/draw/lib";
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { Door } from "@persagy-web/big/lib/types/floor/Door";
 import { ItemColor, ItemOrder } from "@persagy-web/big/lib";
@@ -105,10 +105,10 @@ export class SDoorItem extends SGraphItem {
      */
     boundingRect(): SRect {
         return new SRect(
-            this.minX,
-            this.minY,
-            this.maxX - this.minX,
-            this.maxY - this.minY
+            0,
+            0,
+            this.r,
+            this.r
         );
     } // Function boundingRect()
 
@@ -123,7 +123,7 @@ export class SDoorItem extends SGraphItem {
         painter.pen.lineWidth = painter.toPx(1);
         painter.pen.color = ItemColor.doorColor;
         painter.drawLine(0, 0, this.r, 0);
-        painter.pen.lineDash = [5, 5];
+        painter.pen.lineDash = [50, 100];
         painter.pen.lineWidth = painter.toPx(1);
         painter.drawArc(
             -this.r,

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

@@ -0,0 +1,6 @@
+# 图层
+
+::: tip
+1.创建的 item 要添加到对应的层 <br />
+2.保存图数据将其对应的层级一块保存 <br />
+:::

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

@@ -0,0 +1,18 @@
+# 底图风格
+::: details 目录
+[[toc]]
+:::
+
+## style类
+
+主要包含线条颜色(strokeColor:值为SColor类型),填充颜色,线条宽度,被选中时颜色,高亮时颜色,渐变属性
+```json
+{
+    "strokeColor": "SColor",
+    "fillColor": "SColor",            
+    "lineWidth": "number",
+    "selectColor": "SColor",
+    "highlightColor": "SColor",
+    "backgroundImage": "Gradient"
+}
+```

+ 8 - 0
docs/guides/engine/composite.md

@@ -12,6 +12,14 @@
 
 ![融合1](./img/source-over.png) 
 
+定义从左到右的渐变,作为矩形的填充样式:
+
+<engine-composite-sourceOver /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/composite/sourceOver.vue
+:::
+
 ```
 painter.composite = SCompositeType.SourceOver
 ```

+ 46 - 36
docs/guides/engine/gradient.md

@@ -6,35 +6,31 @@
 
 ![渐变结构](./img/jianbianjiegou.png)
 
+::: tip 以下示例均基于 GradRect 绘制
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/GradRect.ts
+:::
+
+:::
+
 ## 线性渐变
 
 定义从上到下的渐变,作为矩形的填充样式:
 
-![线性渐变1](./img/line-gradient2.png) 
+<engine-gradient-lineGradient /> 
 
-demo代码示例
-
-```
-let gradient = new SLinearGradient(this.minX,this.minY,this.minX,this.maxY)
-gradient.addColorStop(0,new SColor('#d8b31d'))
-gradient.addColorStop(0.5,new SColor('#38ded6'))
-gradient.addColorStop(1,new SColor('#c3470c'))
-painter.brush.gradient = gradient
-```
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/lineGradient.vue
+:::
 
 定义从左到右的渐变,作为矩形的填充样式:
 
-![线性渐变2](./img/line-gradient.png) 
-
-demo代码示例
+<engine-gradient-lineGradient2 /> 
 
-```
-let gradient = new SLinearGradient(this.minX,this.minY,this.maxX,this.minY)
-gradient.addColorStop(0,new SColor('#d8b31d'))
-gradient.addColorStop(0.5,new SColor('#38ded6'))
-gradient.addColorStop(1,new SColor('#c3470c'))
-painter.brush.gradient = gradient
-```
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/lineGradient2.vue
+:::
 
 ## 放射渐变
 
@@ -42,40 +38,54 @@ painter.brush.gradient = gradient
 
 情况1:圆心重合,圆1半径小于圆2半径
 
-![放射渐变1](./img/radial-gradient.png) 
-
-示例demo代码,填充的图形为700*700的矩形,
+<engine-gradient-radialGradient /> 
 
-```
-let gradient = new SRadialGradient((this.minX+this.maxX)/2,(this.minY+this.maxY)/2,5,(this.minX+this.maxX)/2,(this.minY+this.maxY)/2,35)
-gradient.addColorStop(0,new SColor('#ff483b'))
-gradient.addColorStop(0.5,new SColor('#04ff00'))
-gradient.addColorStop(1,new SColor('#3d4eff'))
-painter.brush.gradient = gradient
-```
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/radialGradient.vue
+:::
 
 还有其他更多情况,实现更多图案,均可以调整参数来实现,一下列举几种情况
 
 情况2:圆1在圆2内部,圆1半径小于圆2半径
 
-![放射渐变2](./img/radial-gradient2.png) 
+<engine-gradient-radialGradient2 /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/radialGradient2.vue
+:::
 
 情况3:圆1和圆2相离时,并且大小不相同
 
-![放射渐变3](./img/radial-gradient3.png) 
-![放射渐变4](./img/radial-gradient4.png) 
+<engine-gradient-radialGradient3 /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/radialGradient3.vue
+:::
 
 情况4:当圆1和圆2相离时,并且大小相同
 
-![放射渐变5](./img/radial-gradient5.png) 
+<engine-gradient-radialGradient4 /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/radialGradient4.vue
+:::
 
 情况5:当圆1和圆2相交时,并且大小相同
 
-![放射渐变5](./img/radial-gradient6.png) 
+<engine-gradient-radialGradient5 /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/radialGradient5.vue
+:::
+
 
 情况6:当圆1和圆2相交时,圆心相同,并且大小相同
 
-![放射渐变5](./img/radial-gradient7.png) 
+<engine-gradient-radialGradient6 /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/gradient/radialGradient6.vue
+:::
 
 ## 渐变属性
 

+ 0 - 2
docs/guides/engine/image.md

@@ -1,2 +0,0 @@
-# 绘制图片
-

BIN
docs/guides/engine/img/line-gradient.png


BIN
docs/guides/engine/img/line-gradient2.png


BIN
docs/guides/engine/img/radial-gradient.png


BIN
docs/guides/engine/img/radial-gradient2.png


BIN
docs/guides/engine/img/radial-gradient3.png


BIN
docs/guides/engine/img/radial-gradient4.png


BIN
docs/guides/engine/img/radial-gradient5.png


BIN
docs/guides/engine/img/radial-gradient6.png


BIN
docs/guides/engine/img/radial-gradient7.png


+ 0 - 3
docs/guides/engine/text.md

@@ -1,3 +0,0 @@
-# 绘制文字
-
-

+ 27 - 19
docs/guides/index.js

@@ -1,14 +1,10 @@
-const content = [{
-        title: "安装",
-        path: "/guides/base/"
-    },
+const content = [
     {
         title: "绘图引擎",
+        path: "/guides/engine/",
         children: [
             ["/guides/engine/draw", "绘制形状"],
             ["/guides/engine/style", "颜色与样式"],
-            ["/guides/engine/text", "绘制文字"],
-            ["/guides/engine/image", "绘制图片"],
             ["/guides/engine/gradient", "渐变"],
             ["/guides/engine/composite", "融合"],
             ["/guides/engine/transform", "变型"],
@@ -18,26 +14,30 @@ const content = [{
     },
     {
         title: "场景管理",
-        children: [{
-                title: "图元素实例",
+        path: "/guides/scene/",
+        children: [
+            {
+                title: "Item 示例",
+                children: [
+                    ["/guides/scene/items/text", "绘制文字"],
+                    ["/guides/scene/items/image", "绘制图片"],
+                ]
+            },
+            {
+                title: "综合示例",
                 children: [
                     ["/guides/scene/items/clock", "时钟"],
-                    ["/guides/scene/items/text", "文本"],
-                    ["/guides/scene/items/image", "图片"],
-                    ["/guides/scene/items/editLine", "可编辑直线"],
-                    ["/guides/scene/items/editPolyline", "可编辑折线"],
-                    ["/guides/scene/items/editPolygon", "可编辑多边形示例"],
-                    ["/guides/scene/items/imgText", "图例item(图片文本组合)"]
+                    ["/guides/scene/undo", "Undo示例"],
+                    ["/guides/scene/align", "对齐示例"],
                 ]
             },
-            ["/guides/scene/undo", "Undo示例"],
-            ["/guides/scene/align", "对齐示例"],
         ]
     },
     {
         title: "建筑信息图",
-        children: [{
-                title: "底图 Item 示例",
+        children: [
+            {
+                title: "Item 示例",
                 children: [
                     ["/guides/big/items/wall", "墙"],
                     ["/guides/big/items/column", "柱子"],
@@ -50,7 +50,15 @@ const content = [{
             },
             ["/guides/big/workLine", "工作流程"],
             ["/guides/big/downloadFile", "手工下载楼层底图文件"],
-            ["/guides/big/jsonFile", "json数据格式"],
+            {
+                title: "数据格式",
+                children: [
+                    ["/guides/big/jsonFile", "jsonz 数据格式"],
+                ]
+            },
+            ["/guides/big/style", "底图风格"],
+            ["/guides/big/layerOrder", "图层"],
+            ["/guides/big/factory/itemFactory", "item 创建工厂"],
             ["/guides/big/divide", "划分"],
             ["/guides/big/mapDemo", "楼层平面图范例"],
         ]

+ 1 - 1
docs/guides/scene/items/image.md

@@ -6,5 +6,5 @@
 <scene-items-ImageItem/>
 
 ::: details 查看代码
-@/docs/.vuepress/components/scene/items/ImageItem.vue
+<<< @/docs/.vuepress/components/scene/items/ImageItem.vue
 :::

+ 15 - 1
docs/setup/ide/nodejs.md

@@ -120,10 +120,24 @@ npm install -g element-ui 2.12.0
 做组件包时用
 npm insall -g babel-plugin-component
 
+### 设置数据源为公司私服
+```
+npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
+```
+#### @persagy-web/base
+```
+npm i @persagy-web/base
+```
+::: tip 如果改完源以后,npm i的时候没有成功
+    1.需要先把node_modules删除,package-lock.json删除 
+    2.将源改到淘宝源或者官网源,把package.json中的公司服的npm包先删掉,执行npm i安装 
+    3.安装成功后,再把@persagy-web/graph等几个包添加到package.json中,并把源切换至公司服,在安装 
+:::
+
 ## 常见错误
 ### npm install出现Unexpected end of JSON input while parsing near
 
 执行如下命令解决:
 ```
 npm cache clean --force
-```
+```