|
@@ -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>
|