ClockItem.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <canvas id="clockItem1" width="400" height="400" />
  3. </template>
  4. <script lang="ts">
  5. import { SColor, SPainter, SRect } from "@saga-web/draw";
  6. import { SGraphItem, SGraphScene, SGraphView } from "@saga-web/graph";
  7. class ClockItem extends SGraphItem {
  8. /** 宽度 */
  9. width = 100;
  10. /** 高度 */
  11. height = 100;
  12. /** 半径 */
  13. get radius(): number {
  14. return Math.min(this.width, this.height) / 2.0;
  15. }
  16. /**
  17. * 构造函数
  18. *
  19. * @param parent 指向父Item
  20. * @param width 宽度
  21. * @param height 高度
  22. */
  23. constructor(parent: SGraphItem | null, width: number, height: number) {
  24. super(parent);
  25. this.width = width;
  26. this.height = height;
  27. }
  28. /**
  29. * 对象边界区域
  30. *
  31. * @return 边界区域
  32. */
  33. boundingRect(): SRect {
  34. return new SRect(0, 0, this.width, this.height);
  35. }
  36. /**
  37. * Item绘制操作
  38. *
  39. * @param canvas 画布
  40. */
  41. onDraw(canvas: SPainter): void {
  42. canvas.translate(this.width / 2, this.height / 2);
  43. const t = new Date();
  44. this.drawScale(canvas);
  45. this.drawHour(canvas, t.getHours(), t.getMinutes(), t.getSeconds());
  46. this.drawMinute(canvas, t.getMinutes(), t.getSeconds());
  47. this.drawSecond(canvas, t.getSeconds() + t.getMilliseconds() / 1000.0);
  48. this.update();
  49. }
  50. /**
  51. * 绘制表刻度
  52. *
  53. * @param canvas 画布
  54. */
  55. private drawScale(canvas: SPainter): void {
  56. const scaleLength = Math.max(this.radius / 10.0, 2.0);
  57. const scaleLength1 = scaleLength * 1.2;
  58. const strokeWidth = Math.max(this.radius / 100.0, 2.0);
  59. const strokeWidth1 = strokeWidth * 2.0;
  60. canvas.save();
  61. canvas.pen.color = SColor.Blue;
  62. for (let i = 1; i <= 12; i++) {
  63. // 12小时刻度
  64. canvas.pen.lineWidth = strokeWidth1;
  65. canvas.drawLine(
  66. 0,
  67. -this.radius,
  68. 0,
  69. -this.radius + scaleLength1
  70. );
  71. if (this.radius >= 40) {
  72. // 如果半度大于40显示分钟刻度
  73. canvas.rotate((6 * Math.PI) / 180);
  74. for (let j = 1; j <= 4; j++) {
  75. // 分钟刻度
  76. canvas.pen.lineWidth = strokeWidth;
  77. canvas.drawLine(
  78. 0,
  79. -this.radius,
  80. 0,
  81. -this.radius + scaleLength
  82. );
  83. canvas.rotate((6 * Math.PI) / 180);
  84. }
  85. } else {
  86. canvas.rotate((30 * Math.PI) / 180);
  87. }
  88. }
  89. canvas.restore();
  90. }
  91. /**
  92. * 绘制时针
  93. *
  94. * @param canvas 画布
  95. * @param hour 时
  96. * @param minute 分
  97. * @param second 秒
  98. */
  99. private drawHour(
  100. canvas: SPainter,
  101. hour: number,
  102. minute: number,
  103. second: number
  104. ): void {
  105. canvas.save();
  106. canvas.pen.color = SColor.Black;
  107. canvas.rotate(
  108. ((hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600) *
  109. Math.PI) /
  110. 180
  111. );
  112. canvas.drawLine(
  113. 0,
  114. this.radius / 10.0,
  115. 0,
  116. -this.radius / 2.0
  117. );
  118. canvas.restore();
  119. }
  120. /**
  121. * 绘制秒针
  122. *
  123. * @param canvas 画布
  124. * @param minute 分
  125. * @param second 秒
  126. */
  127. private drawMinute(canvas: SPainter, minute: number, second: number): void {
  128. canvas.save();
  129. canvas.pen.color = SColor.Black;
  130. canvas.rotate(((minute * 6 + (second * 6) / 60.0) * Math.PI) / 180);
  131. canvas.drawLine(
  132. 0,
  133. this.radius / 10.0,
  134. 0,
  135. (-this.radius * 2.0) / 3.0
  136. );
  137. canvas.restore();
  138. }
  139. /**
  140. * 绘制秒针
  141. *
  142. * @param canvas 画布
  143. * @param second 秒
  144. */
  145. private drawSecond(canvas: SPainter, second: number): void {
  146. canvas.save();
  147. canvas.pen.color = SColor.Red;
  148. canvas.rotate((second * 6 * Math.PI) / 180);
  149. canvas.drawLine(
  150. 0,
  151. this.radius / 5.0,
  152. 0,
  153. -this.radius + this.radius / 10.0
  154. );
  155. canvas.restore();
  156. }
  157. }
  158. class TestView extends SGraphView {
  159. clock1 = new ClockItem(null, 300, 300);
  160. constructor() {
  161. super("clockItem1");
  162. this.scene = new SGraphScene();
  163. this.scene.addItem(this.clock1);
  164. }
  165. }
  166. export default {
  167. mounted(): void {
  168. new TestView();
  169. }
  170. }
  171. </script>
  172. <style scoped>
  173. </style>