ClockItem.vue 6.6 KB

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