123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <template>
- <canvas id="clockItem1" width="400" height="400" />
- </template>
- <script lang="ts">
- import { SColor, SPainter, SRect } from "@saga-web/draw";
- import { SGraphItem, SGraphScene, SGraphView } from "@saga-web/graph";
- class ClockItem extends SGraphItem {
- /** 宽度 */
- 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: SGraphItem | 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 SGraphView {
- clock1 = new ClockItem(null, 300, 300);
- constructor() {
- super("clockItem1");
- this.scene = new SGraphScene();
- this.scene.addItem(this.clock1);
- }
- }
- export default {
- mounted(): void {
- new TestView();
- }
- }
- </script>
- <style scoped>
- </style>
|