ClockItem.vue 6.7 KB

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