Browse Source

目录修正;渐变文档补充

haojianlong 4 years ago
parent
commit
81a347cc03

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

@@ -0,0 +1,32 @@
+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);
+    }
+}

+ 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;
             },
         }

+ 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 @@
-# 绘制图片
-

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

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

+ 11 - 12
docs/guides/index.js

@@ -5,8 +5,6 @@ const content = [
         children: [
             ["/guides/engine/draw", "绘制形状"],
             ["/guides/engine/style", "颜色与样式"],
-            ["/guides/engine/text", "绘制文字"],
-            ["/guides/engine/image", "绘制图片"],
             ["/guides/engine/gradient", "渐变"],
             ["/guides/engine/composite", "融合"],
             ["/guides/engine/transform", "变型"],
@@ -19,26 +17,27 @@ const content = [
         path: "/guides/scene/",
         children: [
             {
-                title: "图元素实例",
+                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 示例",
+                title: "Item 示例",
                 children: [
                     ["/guides/big/items/wall", "墙"],
                     ["/guides/big/items/column", "柱子"],

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