Browse Source

增加时钟实例。

sybotan 4 years ago
parent
commit
1633a4e8c2

+ 193 - 0
docs/.vuepress/components/example/web/graph/scene/ClockItem.vue

@@ -0,0 +1,193 @@
+<template>
+    <canvas id="clockItem1" width="400" height="400" />
+</template>
+
+<script lang="ts">
+    import { SColor, SPainter, SRect } from "@saga-web/draw";
+    import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
+
+    class ClockItem extends SGraphyItem {
+        /** 宽度 */
+        width = 100;
+        /** 高度 */
+        height = 100;
+
+        /** 半径 */
+        get radius(): number {
+            return Math.min(this.width, this.height) / 2.0;
+        }
+
+        /**
+         * 构造函数
+         *
+         * @param   parent      指向父Item
+         * @param   width       宽度
+         * @param   height      高度
+         */
+        constructor(parent: SGraphyItem | null, width: number, height: number) {
+            super(parent);
+            this.width = width;
+            this.height = height;
+        }
+
+        /**
+         * 对象边界区域
+         *
+         * @return  边界区域
+         */
+        boundingRect(): SRect {
+            return new SRect(0, 0, this.width, this.height);
+        }
+
+        /**
+         * Item绘制操作
+         *
+         * @param   canvas      画布
+         */
+        onDraw(canvas: SPainter): void {
+            canvas.translate(this.width / 2, this.height / 2);
+            const t = new Date();
+            this.drawScale(canvas);
+            this.drawHour(canvas, t.getHours(), t.getMinutes(), t.getSeconds());
+            this.drawMinute(canvas, t.getMinutes(), t.getSeconds());
+            this.drawSecond(canvas, t.getSeconds() + t.getMilliseconds() / 1000.0);
+
+            this.update();
+        }
+
+        /**
+         * 绘制表刻度
+         *
+         * @param   canvas      画布
+         */
+        private drawScale(canvas: SPainter): void {
+            const scaleLength = Math.max(this.radius / 10.0, 2.0);
+            const scaleLength1 = scaleLength * 1.2;
+            const strokeWidth = Math.max(this.radius / 100.0, 2.0);
+            const strokeWidth1 = strokeWidth * 2.0;
+
+            canvas.save();
+            canvas.pen.color = SColor.Blue;
+
+            for (let i = 1; i <= 12; i++) {
+                // 12小时刻度
+                canvas.pen.lineWidth = strokeWidth1;
+                canvas.drawLine(
+                    0,
+                    -this.radius,
+                    0,
+                    -this.radius + scaleLength1
+                );
+
+                if (this.radius >= 40) {
+                    // 如果半度大于40显示分钟刻度
+                    canvas.rotate((6 * Math.PI) / 180);
+                    for (let j = 1; j <= 4; j++) {
+                        // 分钟刻度
+                        canvas.pen.lineWidth = strokeWidth;
+                        canvas.drawLine(
+                            0,
+                            -this.radius,
+                            0,
+                            -this.radius + scaleLength
+                        );
+                        canvas.rotate((6 * Math.PI) / 180);
+                    }
+                } else {
+                    canvas.rotate((30 * Math.PI) / 180);
+                }
+            }
+
+            canvas.restore();
+        }
+
+        /**
+         * 绘制时针
+         *
+         * @param   canvas      画布
+         * @param   hour        时
+         * @param   minute      分
+         * @param   second      秒
+         */
+        private drawHour(
+            canvas: SPainter,
+            hour: number,
+            minute: number,
+            second: number
+        ): void {
+            canvas.save();
+            canvas.pen.color = SColor.Black;
+            canvas.rotate(
+                ((hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600) *
+                    Math.PI) /
+                180
+            );
+            canvas.drawLine(
+                0,
+                this.radius / 10.0,
+                0,
+                -this.radius / 2.0
+            );
+            canvas.restore();
+        }
+
+        /**
+         * 绘制秒针
+         *
+         * @param   canvas      画布
+         * @param   minute      分
+         * @param   second      秒
+         */
+        private drawMinute(canvas: SPainter, minute: number, second: number): void {
+            canvas.save();
+            canvas.pen.color = SColor.Black;
+            canvas.rotate(((minute * 6 + (second * 6) / 60.0) * Math.PI) / 180);
+            canvas.drawLine(
+                0,
+                this.radius / 10.0,
+                0,
+                (-this.radius * 2.0) / 3.0
+            );
+            canvas.restore();
+        }
+
+        /**
+         * 绘制秒针
+         *
+         * @param   canvas      画布
+         * @param   second      秒
+         */
+        private drawSecond(canvas: SPainter, second: number): void {
+            canvas.save();
+            canvas.pen.color = SColor.Red;
+            canvas.rotate((second * 6 * Math.PI) / 180);
+            canvas.drawLine(
+                0,
+                this.radius / 5.0,
+                0,
+                -this.radius + this.radius / 10.0
+            );
+            canvas.restore();
+        }
+    }
+
+    class TestView extends SGraphyView {
+        clock1 = new ClockItem(null, 300, 300);
+
+        constructor() {
+            super("clockItem1");
+            this.scene = new SGraphyScene();
+            this.scene.addItem(this.clock1);
+        }
+    }
+
+    export default {
+        mounted(): void {
+            new TestView();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 6 - 1
docs/dev/saga-graphy/index.js

@@ -18,7 +18,12 @@ const content = [
         title: "场景管理",
         path: "/dev/saga-graphy/scene-manage/",
         children: [
-
+            {
+                title: "图元素实例",
+                children: [
+                    ["/dev/saga-graphy/graphy-manage/items/clock", "时钟"],
+                ]
+            }
         ]
     },
     {

+ 10 - 0
docs/dev/saga-graphy/scene-manage/items/clock.md

@@ -0,0 +1,10 @@
+# 时钟实例
+::: details 目录
+[[toc]]
+:::
+
+<examples-web-graph-scene-ClockItem />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/examples/web/graph/scene/ClockItem.vue
+:::

+ 1 - 1
package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@saga-web/base": "^2.1.9",
-    "@saga-web/draw": "^2.1.80",
+    "@saga-web/draw": "^2.1.82",
     "@saga-web/graphy": "^2.1.52",
     "axios": "^0.18.1",
     "element-ui": "^2.12.0",