Преглед на файлове

修改 plantuml 的使用说明。

sybotan преди 4 години
родител
ревизия
346fb0b386
променени са 3 файла, в които са добавени 659 реда и са изтрити 643 реда
  1. 192 175
      docs/.vuepress/components/edit/items/editimage/editimage.vue
  2. 458 468
      docs/.vuepress/components/engine/demo/elsfkDifficult.vue
  3. 9 0
      docs/guides/standard/typescript.md

+ 192 - 175
docs/.vuepress/components/edit/items/editimage/editimage.vue

@@ -61,205 +61,222 @@
 </template>
 
 <script>
-    import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
-    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-    import { SColor } from "@persagy-web/draw/";
-    //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
-    import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem";
-    import { hexify } from "./../../../../public/until/rgbaUtil";
+import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
+import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+import { SColor } from "@persagy-web/draw/";
+//注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
+import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem";
+import { hexify } from "./../../../../public/until/rgbaUtil";
 
-    class SScene extends SGraphScene {
-        cmdStatus = "";
-        imageItem = null;
+/**
+ * 编辑图片场景类
+ *
+ * @author 韩耀龙 <hanyaolong@persagy.com>
+ */
+class SScene extends SGraphScene {
+    /** 命令状态 */
+    cmdStatus = "";
+    /** 绘制图片 Item */
+    imageItem = null;
 
-      /**
-       * 构造函数
-       */
-        constructor() {
-            super();
-        }
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super();
+    }
 
-      /**
-       * 鼠标按下事件
-       *
-       * @param event   事件
-       * @returns 是否处理
-       */
-        onMouseDown(event) {
-            if (this.cmdStatus == "create" && this.imageItem) {
-                this.imageItem.moveTo(event.x, event.y);
-                this.addItem(this.imageItem);
-                this.changeStatus("");
-            } else {
-                return super.onMouseDown(event);
-            }
+    /**
+     * 鼠标按下事件
+     *
+     * @param event   事件
+     * @returns 是否处理
+     */
+    onMouseDown(event) {
+        if (this.cmdStatus == "create" && this.imageItem) { // 创建状态并且 Image 图片存在
+            //todo 缺少注释
+            this.imageItem.moveTo(event.x, event.y);
+            this.addItem(this.imageItem);
+            this.changeStatus("");
+        } else {
+            return super.onMouseDown(event);
         }
+    }
 
-        //   触发cmdStatus
-        changeStatus() {
-        }
+    /**
+     * 改变状态
+     */
+    changeStatus() {
+        // todo 未完成
     }
+}
 
-    export default {
-        name: "EditPolylineItem",
-        data() {
-            return {
-                scene: null, //场景
-                view: null, //view实例
-                isCreated: false, //是否创建完成
-                cmdStatus: "", //选中状态
-                imageItem: null, //存放创建的Item
-                lineWidth: 1, //border线宽
-                lineColor: "", //border线颜色
-                fillColor: "", //填充色
-                showType: "", //图展示类型
-                options: [
-                    {
-                        value: "Full",
-                        label: "铺满"
-                    },
-                    {
-                        value: "AutoFit",
-                        label: "自适应"
-                    },
-                    {
-                        value: "Equivalency",
-                        label: "等比缩放"
-                    }
-                ]
-            };
+export default {
+    name: "EditPolylineItem",
+    data() {
+        return {
+            scene: null, //场景
+            view: null, //view实例
+            isCreated: false, //是否创建完成
+            cmdStatus: "", //选中状态
+            imageItem: null, //存放创建的Item
+            lineWidth: 1, //border线宽
+            lineColor: "", //border线颜色
+            fillColor: "", //填充色
+            showType: "", //图展示类型
+            options: [
+                {
+                    value: "Full",
+                    label: "铺满"
+                },
+                {
+                    value: "AutoFit",
+                    label: "自适应"
+                },
+                {
+                    value: "Equivalency",
+                    label: "等比缩放"
+                }
+            ]
+        };
+    },
+    /**
+     * 页面挂载
+     */
+    mounted() {
+        this.view = new SGraphView("edit_polygon");
+        this.scene = new SScene();
+        this.view.scene = this.scene;
+        this.scene.changeStatus = this.changeStatus
+    },
+    methods: {
+        /**
+         * 创建对象
+         */
+        create() {
+            this.cmdStatus = "create";
+            this.scene.root.children = [];
+            this.imageItem = new EditImageItem(null);
+            this.imageItem.url =
+                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
+            this.imageItem.width = 100;
+            this.imageItem.height = 100;
+            this.imageItem.moveable = true;
+            this.scene.imageItem = this.imageItem;
         },
-        mounted() {
-            this.view = new SGraphView("edit_polygon");
-            this.scene = new SScene();
-            this.view.scene = this.scene;
-            this.scene.changeStatus = this.changeStatus
+        deleteItem() {
+            this.cmdStatus = "";
+            this.scene.removeItem(this.imageItem);
+            this.imageItem = null;
+            this.view.update();
         },
-        methods: {
-            create() {
-                this.cmdStatus = "create";
-                this.scene.root.children = [];
-                this.imageItem = new EditImageItem(null);
-                this.imageItem.url =
-                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
-                this.imageItem.width = 100;
-                this.imageItem.height = 100;
-                this.imageItem.moveable = true;
-                this.scene.imageItem = this.imageItem;
-            },
-            deleteItem() {
-                this.cmdStatus = "";
-                this.scene.removeItem(this.imageItem);
-                this.imageItem = null;
-                this.view.update();
-            },
-            edit() {
-                if (this.imageItem) {
-                    if (this.imageItem.status == SItemStatus.Normal) {
-                        this.scene.grabItem = this.imageItem;
-                        this.imageItem.status = SItemStatus.Edit;
-                        // this.imageItem.verAndLeve = false;
-                        this.cmdStatus = "edit";
-                    } else {
-                        this.imageItem.status = SItemStatus.Normal;
-                        this.scene.grabItem = null;
-                        this.cmdStatus = "";
-                    }
-                }
-            },
-            eqDrawLine() {
-                this.cmdStatus = "eqDrawLine";
-                this.scene.root.children = [];
-                //   this.imageItem = new EditPolylineItem(null, []);
-                this.imageItem.verAndLeve = true;
-                this.imageItem.status = SItemStatus.Create;
-                this.imageItem.connect("finishCreated", this, this.finishCreated);
-                this.imageItem.moveable = true;
-                this.scene.addItem(this.imageItem);
-                this.view.update();
-            },
-            // 改变线宽属性
-            changeLineWidth(val) {
-                if (this.imageItem) {
-                    this.lineWidth = val;
-                    this.imageItem.lineWidth = val;
+        edit() {
+            if (this.imageItem) {
+                if (this.imageItem.status == SItemStatus.Normal) {
+                    this.scene.grabItem = this.imageItem;
+                    this.imageItem.status = SItemStatus.Edit;
+                    // this.imageItem.verAndLeve = false;
+                    this.cmdStatus = "edit";
+                } else {
+                    this.imageItem.status = SItemStatus.Normal;
+                    this.scene.grabItem = null;
+                    this.cmdStatus = "";
                 }
-            },
-            // 改变颜色
-            changeColor(val) {
-                if (this.imageItem) {
-                    this.lineColor = hexify(val);
-                    this.imageItem.strokeColor = new SColor(this.lineColor);
-                }
-            },
-            // 改变填充颜色
-            changeFillColor(val) {
-                if (this.imageItem) {
-                    this.fillColor = hexify(val);
-                    this.imageItem.fillColor = new SColor(this.lineColor);
-                }
-            },
-            //改变图的展示类型
-            changeType(val) {
-                if (this.imageItem) {
-                    this.imageItem.showType = SImageShowType[val];
-                }
-            },
-            // 完成创建后的回调
-            changeStatus() {
-                this.cmdStatus = "";
             }
         },
-        watch: {
-            imageItem(val) {
-                //   if (val) {
-                //     this.lineWidth = val.lineWidth; // 线宽
-                this.showType = this.options[val.showType].value;
-                //   } else {
-                //     this.lineWidth = 0;
-                //   }
-            },
-            cmdStatus(val) {
-                this.scene.cmdStatus = val;
+        eqDrawLine() {
+            this.cmdStatus = "eqDrawLine";
+            this.scene.root.children = [];
+            //   this.imageItem = new EditPolylineItem(null, []);
+            this.imageItem.verAndLeve = true;
+            this.imageItem.status = SItemStatus.Create;
+            this.imageItem.connect("finishCreated", this, this.finishCreated);
+            this.imageItem.moveable = true;
+            this.scene.addItem(this.imageItem);
+            this.view.update();
+        },
+        // 改变线宽属性
+        changeLineWidth(val) {
+            if (this.imageItem) {
+                this.lineWidth = val;
+                this.imageItem.lineWidth = val;
+            }
+        },
+        // 改变颜色
+        changeColor(val) {
+            if (this.imageItem) {
+                this.lineColor = hexify(val);
+                this.imageItem.strokeColor = new SColor(this.lineColor);
+            }
+        },
+        // 改变填充颜色
+        changeFillColor(val) {
+            if (this.imageItem) {
+                this.fillColor = hexify(val);
+                this.imageItem.fillColor = new SColor(this.lineColor);
+            }
+        },
+        //改变图的展示类型
+        changeType(val) {
+            if (this.imageItem) {
+                this.imageItem.showType = SImageShowType[val];
             }
+        },
+        // 完成创建后的回调
+        changeStatus() {
+            this.cmdStatus = "";
+        }
+    },
+    watch: {
+        imageItem(val) {
+            //   if (val) {
+            //     this.lineWidth = val.lineWidth; // 线宽
+            this.showType = this.options[val.showType].value;
+            //   } else {
+            //     this.lineWidth = 0;
+            //   }
+        },
+        cmdStatus(val) {
+            this.scene.cmdStatus = val;
         }
-    };
+    }
+};
 </script>
 
 <style scoped lang="less">
-    .edit-line {
-        width: 100%;
-        height: 500px;
+.edit-line {
+    width: 100%;
+    height: 500px;
 
-        .content {
-            display: flex;
-            justify-content: flex-start;
+    .content {
+        display: flex;
+        justify-content: flex-start;
 
-            .left {
-                margin-right: 20px;
-            }
+        .left {
+            margin-right: 20px;
+        }
 
-            .line-property {
-                width: 300px;
-                margin-top: 20px;
+        .line-property {
+            width: 300px;
+            margin-top: 20px;
 
-                .always {
-                    width: 100%;
-                    height: 100%;
-                }
+            .always {
+                width: 100%;
+                height: 100%;
+            }
 
-                .always-item {
-                    display: flex;
-                    margin-top: 10px;
-                    justify-content: space-between;
-                }
+            .always-item {
+                display: flex;
+                margin-top: 10px;
+                justify-content: space-between;
             }
         }
+    }
 
-        .heightLight {
-            color: #409eff;
-            border-color: #c6e2ff;
-            background-color: #ecf5ff;
-        }
+    .heightLight {
+        color: #409eff;
+        border-color: #c6e2ff;
+        background-color: #ecf5ff;
     }
+}
 </style>

+ 458 - 468
docs/.vuepress/components/engine/demo/elsfkDifficult.vue

@@ -9,522 +9,512 @@
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
-    import { v1 as uuid } from "uuid";
-    import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
+import { Component, Vue } from "vue-property-decorator";
+import { v1 as uuid } from "uuid";
+import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
+
+/**
+ * 俄罗斯方块视图
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.com>
+ */
+class TestView extends SCanvasView {
+    /** 背景表示数组 */
+    map: number[][] = [];
+    /** 方块类型索引 0-6 */
+    boxType: number = Number(Math.floor(Math.random() * 7));  
+    /** 方块变形索引 0-3 */
+    dir: number = Number(Math.floor(Math.random() * 4)); 
+    /** 所有方块集合 */
+    box: number[][][] = [
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 1, 1],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [1, 1, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [1, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 1],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 0],
+            [1, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 1],
+            [0, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 0],
+            [0, 1, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 1, 0],
+            [0, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 0],
+        ]
+    ];
+    /** 方块初始位置x坐标 */
+    x = 5;
+    /** 方块初始位置y坐标 */
+    y = 0;
+    /** 记录上次刷新时间 */
+    t = Date.now();
+    /** 是否游戏结束 */
+    gameOver: boolean = false;
+    /** 方块颜色 */
+    boxColor: SColor = new SColor();
+
+    /**
+     * 构造函数
+     *
+     * @param id canvas DOM id
+     */
+    constructor(id: string) {
+        super(id);
+        this.initMap();
+        this.initColor();
+    }
 
     /**
-     * 俄罗斯方块视图
+     * 键盘按下事件
      *
-     * @author 郝建龙
-     * */
-    class TestView extends SCanvasView {
-        /** 背景表示数组 */
-        map: number[][] = [];
-        /** 方块类型索引 */
-        boxType: number = Number(Math.floor(Math.random() * 7));  // 0-6
-        /** 方块变形索引 */
-        dir: number = Number(Math.floor(Math.random() * 4));  // 0-3
-        /** 所有方块集合 */
-        box: number[][][] = [
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 1, 1],
-                [0, 0, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 0, 0],
-                [1, 1, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [1, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 1],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 0],
-                [1, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 1],
-                [0, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 0],
-                [0, 1, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 1, 0],
-                [0, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 0, 0],
-            ]
-        ];
-        /** 方块初始位置x坐标 */
-        x = 5;
-        /** 方块初始位置y坐标 */
-        y = 0;
-        /** 记录上次刷新时间 */
-        t = Date.now();
-        /** 是否游戏结束 */
-        gameOver: boolean = false;
-        /** 方块颜色 */
-        boxColor: SColor = new SColor();
-
-        /**
-         * 构造函数
-         *
-         * @param id canvas DOM id
-         */
-        constructor(id: string) {
-            super(id);
-            this.initMap();
-            this.initColor();
+     * @param event 事件对象
+     */
+    onKeyDown(event: KeyboardEvent): void {
+        if (this.gameOver) {    // 游戏结束
+            return;
         }
 
-        /**
-         * 键盘按下事件
-         *
-         * @param event 事件对象
-         */
-        onKeyDown(event: KeyboardEvent): void {
-            //游戏结束
-            if (this.gameOver) {
-                return;
+        if (event.code == "KeyW") { // 按键 w
+            if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {    // 检查变形后是否碰撞
+                this.dir = (this.dir + 1) % 4;
             }
-
-            if (event.code == "KeyW") {
-                //检查变形后是否碰撞
-                if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {
-                    this.dir = (this.dir + 1) % 4;
-                }
-            } else if (event.code == "KeyA") {
-                //检查左移后是否碰撞
-                if (!this.checkKnocked(this.x - 1, this.y, this.dir)) {
-                    this.x--;
-                }
-            } else if (event.code == "KeyD") {
-                //检查右移后是否碰撞
-                if (!this.checkKnocked(this.x + 1, this.y, this.dir)) {
-                    this.x++;
-                }
-            } else if (event.code == "KeyS") {
-                //检查下移后是否碰撞
-                if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
-                    this.y++;
-                } else {
-                    this.fullMap();
-                }
+        } else if (event.code == "KeyA") {  // 按键 a
+            if (!this.checkKnocked(this.x - 1, this.y, this.dir)) { // 检查左移后是否碰撞
+                this.x--;
+            }
+        } else if (event.code == "KeyD") { // 按键 d
+            if (!this.checkKnocked(this.x + 1, this.y, this.dir)) { // 检查右移后是否碰撞
+                this.x++;
+            }
+        } else if (event.code == "KeyS") { // 按键 s
+            if (!this.checkKnocked(this.x, this.y + 1, this.dir)) { // 检查下移后是否碰撞
+                this.y++;
+            } else {
+                this.fillMap();
             }
+        }
+
+        this.update();
+    }
 
-            this.update();
+    /**
+     * Item 绘制操作
+     *
+     * @param painter 绘制对象
+     */
+    onDraw(painter: SPainter): void {
+
+        if (this.gameOver) {    // 游戏结束绘制文字
+            painter.brush.color = SColor.Blue;
+            painter.font.size = 20;
+            painter.font.textAlign = STextAlign.Center;
+            painter.drawText("GAME OVER", 180, 30);
+            return;
         }
 
-        /**
-         * Item 绘制操作
-         *
-         * @param painter 绘制对象
-         */
-        onDraw(painter: SPainter): void {
-            //游戏结束绘制文字
-            if (this.gameOver) {
-                painter.brush.color = SColor.Blue;
-                painter.font.size = 20;
-                painter.font.textAlign = STextAlign.Center;
-                painter.drawText("GAME OVER", 180, 30);
-                return;
-            }
+        painter.clearRect(0, 0, this.width, this.height);
 
-            painter.clearRect(0, 0, this.width, this.height);
-
-            painter.pen.color = new SColor("#0bc0ff");
-            painter.brush.color = new SColor("#2accc7");
-            this.drawMap(painter);
-
-            painter.pen.color = this.boxColor;
-            painter.brush.color = this.boxColor;
-            //绘制图形
-            this.drawBox(painter);
-            //下落速度,下移一格
-            if (Date.now() - this.t > 500) {
-                //下移是否碰撞
-                if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
-                    this.y++;
-                } else {
-                    this.fullMap();
-                }
-                this.t = Date.now();
+        painter.pen.color = new SColor("#0bc0ff");
+        painter.brush.color = new SColor("#2accc7");
+        this.drawMap(painter);
+
+        painter.pen.color = this.boxColor;
+        painter.brush.color = this.boxColor;
+        // 绘制图形
+        this.drawBox(painter);
+
+
+        if (Date.now() - this.t > 500) {    // 下落速度,下移一格
+            if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {  // 下移是否碰撞
+                this.y++;
+            } else {
+                this.fillMap();
             }
-            this.update();
+            this.t = Date.now();
         }
+        this.update();
+    }
 
-        /**
-         * 初始化背景
-         */
-        initMap(): void {
-            this.gameOver = false;
-            this.map = [];
-            //循环行数
-            for (let row = 0; row < 22; row++) {
-                const m1: number[] = [];
-                //循环列数
-                for (let col = 0; col < 14; col++) {
-                    //左侧,右侧,底部补充两个格
-                    if (row > 19 || col < 2 || col > 11) {
-                        //-1代表左右填充
-                        m1.push(-1);
-                    } else {
-                        m1.push(0);
-                    }
+    /**
+     * 初始化背景
+     */
+    initMap(): void {
+        this.gameOver = false;
+        this.map = [];
+        for (let row = 0; row < 22; row++) {    // 循环行数
+            const m1: number[] = [];
+            for (let col = 0; col < 14; col++) {    // 循环列数
+                if (row > 19 || col < 2 || col > 11) {  // 左侧,右侧,底部补充两个格
+                    // -1 代表左右填充
+                    m1.push(-1);
+                } else {
+                    m1.push(0);
                 }
-                this.map.push(m1);
             }
+            this.map.push(m1);
         }
+    }
 
-        /**
-         * 初始化方块形状
-         */
-        initBox(): void {
-            this.x = 5;
-            this.y = 0;
-            this.boxType = Number(Math.floor(Math.random() * 7));
-            this.dir = Number(Math.floor(Math.random() * 4));
-            this.initColor();
-        }
+    /**
+     * 初始化方块形状
+     */
+    initBox(): void {
+        this.x = 5;
+        this.y = 0;
+        this.boxType = Number(Math.floor(Math.random() * 7));
+        this.dir = Number(Math.floor(Math.random() * 4));
+        this.initColor();
+    }
 
-        /**
-         * 初始化方块颜色
-         */
-        initColor(): void {
-            const a = Number(Math.floor(Math.random() * 128));
-            const b = Number(Math.floor(Math.random() * 128));
-            const c = Number(Math.floor(Math.random() * 128));
-            this.boxColor = new SColor(a, b, c);
-        }
+    /**
+     * 初始化方块颜色
+     */
+    initColor(): void {
+        const a = Number(Math.floor(Math.random() * 128));
+        const b = Number(Math.floor(Math.random() * 128));
+        const c = Number(Math.floor(Math.random() * 128));
+        this.boxColor = new SColor(a, b, c);
+    }
 
-        /**
-         * 绘制背景
-         *
-         * @param painter 绘制对象
-         */
-        private drawMap(painter: SPainter): void {
-            //行数
-            for (let row = 0; row < 22; row++) {
-                //列数
-                for (let col = 0; col < 14; col++) {
-                    this.drawShape(painter, row, col, this.map[row][col]);
-                    // if (n == 0) {
-                    //     painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
-                    // }
-                }
+    /**
+     * 绘制背景
+     *
+     * @param painter 绘制对象
+     */
+    private drawMap(painter: SPainter): void {
+        for (let row = 0; row < 22; row++) {    // 行数
+            for (let col = 0; col < 14; col++) {  // 列数
+                this.drawShape(painter, row, col, this.map[row][col]);
             }
         }
+    }
 
-        /**
-         * 绘制实体图形
-         *
-         * @param painter   绘制对象
-         * @param row       行
-         * @param col       列
-         * @param type      图类型
-         */
-        private drawShape(painter: SPainter, row: number, col: number, type: number): void {
-            const x = col * 30 + 11 - 60;
-            const y = row * 30 + 11;
-            //类型判断,0为空白,-1填充
-            switch (type) {
-                case 0:
-                    break;
-                case -1:
-                    painter.drawRoundRect(x, y, 28, 28, 6);
-                    break;
-                default:
-                    painter.drawRoundRect(x, y, 28, 28, 6);
-                    break;
-            }
+    /**
+     * 绘制实体图形
+     *
+     * @param painter   绘制对象
+     * @param row       行
+     * @param col       列
+     * @param type      图类型
+     */
+    private drawShape(painter: SPainter, row: number, col: number, type: number): void {
+        const x = col * 30 + 11 - 60;
+        const y = row * 30 + 11;
+
+        switch (type) { // 类型判断
+            case 0:     // 空白
+                break;
+
+            case -1:    // 边界
+                painter.drawRoundRect(x, y, 28, 28, 6);
+                break;
+
+            default:    // 填充
+                painter.drawRoundRect(x, y, 28, 28, 6);
+                break;
         }
+    }
 
-        /**
-         * 绘制方块
-         *
-         * @param painter 绘制对象
-         */
-        private drawBox(painter: SPainter): void {
-            //绘制图形行数
-            for (let row = 0; row < 4; row++) {
-                //绘制图形列数
-                for (let col = 0; col < 4; col++) {
-                    this.drawShape(painter, row + this.y, col + this.x, this.box[this.boxType * 4 + this.dir][row][col]);
-                }
+    /**
+     * 绘制方块
+     *
+     * @param painter 绘制对象
+     */
+    private drawBox(painter: SPainter): void {
+        for (let row = 0; row < 4; row++) {   // 绘制图形行数
+            for (let col = 0; col < 4; col++) {  // 绘制图形列数
+                this.drawShape(painter, row + this.y, col + this.x, this.box[this.boxType * 4 + this.dir][row][col]);
             }
         }
+    }
 
-        /**
-         * 是否碰撞
-         *
-         * @param x     x坐标
-         * @param y     y坐标
-         * @param dir   方块变形索引
-         * @return 是否碰撞
-         */
-        private checkKnocked(x: number, y: number, dir: number): boolean {
-            //绘制图形行数
-            for (let row = 0; row < 4; row++) {
-                //绘制图形列数
-                for (let col = 0; col < 4; col++) {
-                    //判断是否重合,每种图形四个一组,四种变形的某种变形,不为零表示绘制(确定方块),坐标转换,背景图中绘制
-                    if (this.box[this.boxType * 4 + dir][row][col] != 0 && this.map[y + row][x + col] != 0) {
-                        return true;
-                    }
+    /**
+     * 是否碰撞
+     *
+     * @param x     x 坐标
+     * @param y     y 坐标
+     * @param dir   方块变形索引
+     * @return 是否碰撞
+     */
+    private checkKnocked(x: number, y: number, dir: number): boolean {
+        for (let row = 0; row < 4; row++) { // 绘制图形行数
+            for (let col = 0; col < 4; col++) { // 绘制图形列数
+                // 判断是否重合,每种图形四个一组,四种变形的某种变形,不为零表示绘制(确定方块),坐标转换,背景图中绘制
+                if (this.box[this.boxType * 4 + dir][row][col] != 0 && this.map[y + row][x + col] != 0) {
+                    return true;
                 }
             }
-            return false;
         }
+        return false;
+    }
 
-        /**
-         * 将方块合到背景中
-         */
-        private fullMap(): void {
-            //遍历图形的行数
-            for (let row = 0; row < 4; row++) {
-                //遍历图形的列数
-                for (let col = 0; col < 4; col++) {
-                    //判断图形绘制,填充至背景中
-                    if (this.box[this.boxType * 4 + this.dir][row][col] == 1) {
-                        this.map[this.y + row][this.x + col] = 1;
-                    }
+    /**
+     * 将方块合到背景中
+     */
+    private fillMap(): void {
+        for (let row = 0; row < 4; row++) {  // 遍历图形的行数
+            for (let col = 0; col < 4; col++) { // 遍历图形的列数
+                if (this.box[this.boxType * 4 + this.dir][row][col] == 1) { // 判断图形绘制
+                    // 填充至背景中
+                    this.map[this.y + row][this.x + col] = 1;
                 }
             }
+        }
 
-            this.initBox();
-            //判断背景上的图形与初始化图形是否重合
-            if (this.checkKnocked(this.x, this.y, this.dir)) {
-                //游戏结束
-                this.gameOver = true;
-            }
-
-            this.remove();
+        this.initBox();
+        if (this.checkKnocked(this.x, this.y, this.dir)) {  // 判断背景上的图形与初始化图形是否重合
+            //游戏结束
+            this.gameOver = true;
         }
 
-        /**
-         * 消除满行
-         */
-        private remove(): void {
-            //消除行数
-            let removeCount = 0;
-            //循环行数,不包含底部填充2行
-            for (let row = 0; row < 20; row++) {
-                //消除标记,true 是
-                let flag = true;
-                //
-                // for (let col = 0; col < 14; col++) {
-                //     if (this.map[row][col] == 0) {
-                //         flag = false;
-                //         break;
-                //     }
-                // }
-
-                //若当前行有一个空格,则不消除
-                for (let col = 2; col < 12; col++) {
-                    if (this.map[row][col] == 0) {
-                        flag = false;
-                        break;
-                    }
-                }
+        this.remove();
+    }
 
-                if (flag) {
-                    this.map.splice(row, 1);
-                    //顶部加一行空行
-                    this.map.unshift(this.randomRow(10, 0));
-                    removeCount++;
+    /**
+     * 消除满行
+     */
+    private remove(): void {
+        //消除行数
+        let removeCount = 0;
+        //循环行数,不包含底部填充2行
+        for (let row = 0; row < 20; row++) {
+            //消除标记,true 是
+            let flag = true;
+            //若当前行有一个空格,则不消除
+            for (let col = 2; col < 12; col++) {
+                if (this.map[row][col] == 0) {  // 存在空格
+                    flag = false;
+                    break;
                 }
             }
-            //记录消除行数
-            if (removeCount > 0) {
-                this.$emit("score", removeCount);
-                //删除行
-                this.map.shift();
-                //底部随机产生一行
-                this.map.splice(19, 0, this.randomRow());
-            }
-        }
 
-        /**
-         * 随机数组生成
-         *
-         * @return 数组
-         */
-        private randomRow(len: number = 10, num: number = 2): number[] {
-            let array = new Array(len + 4).fill(-1);
-            //生成随机数,循环不包含左右填充格
-            for (let i = 2; i < array.length - 2; i++) {
-                array[i] = Math.floor(num * Math.random());
+            if (flag) { // 标记删除
+                this.map.splice(row, 1);
+                //顶部加一行空行
+                this.map.unshift(this.randomRow(10, 0));
+                removeCount++;
             }
+        }
 
-            return array;
+        if (removeCount > 0) {   // 记录消除行数
+            this.$emit("score", removeCount);
+            // 删除行
+            this.map.shift();
+            // 底部随机产生一行
+            this.map.splice(19, 0, this.randomRow());
         }
     }
 
-    @Component
-    export default class ElsfkCanvas extends Vue {
-        id: string = uuid();
-        scoreList: number[] = [100, 300, 600, 1000];
-        score: number = 0;
-        view: TestView | undefined = undefined;
-
-        mounted(): void {
-            this.view = new TestView(this.id);
-            this.view.connect("score", this, this.changeScore);
-            document.getElementById(this.id)!!.focus();
+    /**
+     * 随机数组生成
+     *
+     * @return 数组
+     */
+    private randomRow(len: number = 10, num: number = 2): number[] {
+        let array = new Array(len + 4).fill(-1);
+        // 生成随机数,循环不包含左右填充格
+        for (let i = 2; i < array.length - 2; i++) {
+            array[i] = Math.floor(num * Math.random());
         }
 
-        changeScore(v: SCanvasView, count: number[]) {
-            //根据消除行数判断分值
-            this.score += this.scoreList[count[0] - 1];
-        }
+        return array;
+    }
+}
 
-        reset() {
-            this.view!!.initMap();
-            this.view!!.initBox();
-            this.score = 0;
-            this.view!!.update();
-            document.getElementById(this.id)!!.focus();
-        }
+@Component
+export default class ElsfkCanvas extends Vue {
+    /** 图 id */
+    id: string = uuid();
+    /** 记分数组列表 */
+    scoreList: number[] = [100, 300, 600, 1000];
+    /** 记分分数 */
+    score: number = 0;
+    /** 实例化 view */
+    view: TestView | undefined = undefined;
+
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.view = new TestView(this.id);
+        this.view.connect("score", this, this.changeScore);
+        document.getElementById(this.id)!!.focus();
+    }
+
+    /**
+     * 分值展示
+     *
+     * @param v     canvas 视图对象
+     * @param count 计数分值
+     */
+    changeScore(v: SCanvasView, count: number[]) {
+        //根据消除行数判断分值
+        this.score += this.scoreList[count[0] - 1];
+    }
+
+    /**
+     * 重置操作
+     */
+    reset() {
+        this.view!!.initMap();
+        this.view!!.initBox();
+        this.score = 0;
+        this.view!!.update();
+        document.getElementById(this.id)!!.focus();
     }
+}
 </script>

+ 9 - 0
docs/guides/standard/typescript.md

@@ -72,4 +72,13 @@
    (比如 使用var x = 1; var y = 2;而不是var x = 1, y = 2;)。
 8. <font color=red> else </font>要在结束的}后另起一行。
 
+类添加类的注释头 姓名 + 邮箱,如果多个,用逗号分割。
+```javascript
+/**
+ * 俄罗斯方块视图
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.com>,郝洁 <haojie@persagy.com>
+ */
+```
+