SGraphyClockItem.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /*
  2. * ********************************************************************************************************************
  3. *
  4. * iFHS7.
  5. * ;BBMBMBMc rZMBMBR BMB
  6. * MBEr:;PBM, 7MBMMEOBB: BBB RBW
  7. * XK: BO SB. :SZ MBM. c;; ir BBM :FFr :SSF: ;xBMB:r iuGXv. i:. iF2;
  8. * DBBM0r. :D S7 ;XMBMB GMBMu. MBM: BMB MBMBBBMBMS WMBMBMBBK MBMBMBM BMBRBMBW .MBMBMBMBB
  9. * :JMRMMD .. , 1MMRM1; ;MBMBBR: MBM ;MB: BMB: MBM. RMBr sBMH BM0 UMB, BMB. KMBv
  10. * ;. XOW B1; :uM: 1RE, i .2BMBs rMB. MBO MBO JMB; MBB MBM BBS 7MBMBOBM: MBW :BMc
  11. * OBRJ.SEE MRDOWOR, 3DE:7OBM . ;BMB RMR7BM BMB MBB. BMB ,BMR .BBZ MMB rMB, BMM rMB7
  12. * :FBRO0D0 RKXSXPR. JOKOOMPi BMBSSWBMB; BMBB: MBMB0ZMBMS .BMBOXRBMB MBMDE RBM2;SMBM; MBB xBM2
  13. * iZGE O0SHSPO. uGZ7. sBMBMBDL :BMO OZu:BMBK, rRBMB0; ,EBMB xBMBr:ER. RDU :OO;
  14. * ,BZ, 1D0 RPSFHXR. xWZ .SMr . .BBB
  15. * :0BMRDG RESSSKR. 2WOMBW; BMBMR
  16. * i0BM: SWKHKGO MBDv
  17. * .UB OOGDM. MK, Copyright (c) 2015-2018. 斯伯坦机器人世界
  18. * , XMW ..
  19. * r All rights reserved.
  20. *
  21. * ********************************************************************************************************************
  22. */
  23. import SGraphyItem from '../SGraphyItem'
  24. import SRect from '../types/SRect'
  25. /** 定义符号,用于定义私有成员变晴儿 */
  26. const drawScale = Symbol('drawScale')
  27. const drawScaleText = Symbol('drawScaleText')
  28. const drawHour = Symbol('drawHour')
  29. const drawMinute = Symbol('drawMinute')
  30. const drawSecond = Symbol('drawSecond')
  31. /**
  32. * SGraphy引擎时钟Item
  33. *
  34. * @author Andy
  35. */
  36. export default class SGraphyClockItem extends SGraphyItem {
  37. /**
  38. * 构造函数
  39. *
  40. * @param parent 指向父对象
  41. */
  42. constructor(width, height, parent = null) {
  43. super(parent)
  44. this.name = 'ClockItem'
  45. this.width = width
  46. this.height = height
  47. /** 是否显示刻度 */
  48. this.isShowScale = true
  49. /** 刻度颜色 */
  50. this.scaleColor = '#000'
  51. /** 刻度文本颜色 */
  52. this.textColor = '#000'
  53. /** 时针颜色 */
  54. this.hourColor = '#000'
  55. /** 分针颜色 */
  56. this.minuteColor = '#000'
  57. /** 秒针颜色 */
  58. this.secondColor = '#F00'
  59. /** 是否显示钞针 */
  60. this.isShowSecond = true
  61. /** 是否平滑移动秒针 */
  62. this.isSmooth = true
  63. /** 边缘宽度 */
  64. this.padding = 100.0
  65. } // Function constructor()
  66. /**
  67. * Item对象边界区域
  68. *
  69. * @return SRect
  70. */
  71. boundingRect() {
  72. return new SRect(0, 0, this.width / 2, this.height / 2)
  73. } // Function boundingRect()
  74. /**
  75. * 时钟半径,只读属性
  76. *
  77. * @return number
  78. */
  79. get radius() {
  80. return Math.min(this.width, this.height) / 2.0
  81. } // getter radius()
  82. /**
  83. * 绘制时钟
  84. *
  85. * @param canvas 画布
  86. * @param rect 绘制区域
  87. */
  88. onDraw(canvas, rect) {
  89. canvas.translate(this.width / 2, this.height / 2)
  90. canvas.arc(0, 0, this.radius, 0, 2 * Math.PI)
  91. let t = new Date()
  92. this[drawScale](canvas)
  93. this[drawHour](canvas, t.getHours(), t.getMinutes(), t.getSeconds())
  94. this[drawMinute](canvas, t.getMinutes(), t.getSeconds())
  95. this[drawSecond](canvas, t.getSeconds() + t.getMilliseconds() / 1000.0)
  96. } // Function onDraw()
  97. /**
  98. * 绘制刻度
  99. *
  100. * @param canvas 画布
  101. */
  102. [drawScale](canvas) {
  103. let scaleLength = Math.max(this.radius / 10.0, 2.0)
  104. let scaleLength1 = scaleLength * 1.2
  105. let strokeWidth = Math.max(this.radius / 100.0, 2.0)
  106. let strokeWidth1 = strokeWidth * 2.0
  107. canvas.save()
  108. canvas.strokeStyle = this.scaleColor
  109. for (let i = 1; i <= 12; i++) { // 12小时刻度
  110. canvas.lineWidth = strokeWidth1
  111. canvas.drawLine(0, -this.radius, 0, -this.radius + scaleLength1)
  112. if (this.radius >= 40) { // 如果半度大于40显示分钟刻度
  113. canvas.rotate(6 * Math.PI / 180)
  114. for (let j = 1; j <= 4; j++) { // 分钟刻度
  115. canvas.lineWidth = strokeWidth
  116. canvas.drawLine(0, -this.radius, 0, -this.radius + scaleLength)
  117. canvas.rotate(6 * Math.PI / 180)
  118. }
  119. } else {
  120. canvas.rotate(30 * Math.PI / 180)
  121. }
  122. }
  123. canvas.restore()
  124. } // Function drawScale()
  125. /**
  126. * 绘制刻度数字
  127. *
  128. * @param canvas 画布
  129. */
  130. [drawScaleText](canvas) {
  131. } // Function drawScaleText()
  132. /**
  133. * 绘制时针
  134. *
  135. * @param canvas 画布
  136. * @param hour 时
  137. * @param minute 分
  138. * @param second 秒
  139. */
  140. [drawHour](canvas, hour, minute, second) {
  141. canvas.save()
  142. canvas.lineCap = 'round'
  143. canvas.lineWidth = Math.max(this.radius / 30.0, 4.0)
  144. canvas.strokeStyle = this.hourColor
  145. canvas.rotate((hour * 30.0 + minute * 30.0 / 60 + second * 30.0 / 60 / 60) * Math.PI / 180)
  146. canvas.drawLine(0, this.radius / 10.0, 0, -this.radius / 2.0)
  147. canvas.restore()
  148. } // Function drawHour()
  149. /**
  150. * 绘制分针
  151. *
  152. * @param canvas 画布
  153. * @param minute 分
  154. * @param second 秒
  155. */
  156. [drawMinute](canvas, minute, second) {
  157. canvas.save()
  158. canvas.lineCap = 'round'
  159. canvas.lineWidth = Math.max(this.radius / 40.0, 4.0)
  160. canvas.strokeStyle = this.minuteColor
  161. canvas.rotate((minute * 6 + second * 6 / 60.0) * Math.PI / 180.0)
  162. canvas.drawLine(0, this.radius / 10.0, 0, -this.radius * 2.0 / 3.0)
  163. canvas.restore()
  164. } // Function drawMinute()
  165. /**
  166. * 绘制秒针
  167. *
  168. * @param canvas 画布
  169. * @param second 秒
  170. */
  171. [drawSecond](canvas, second) {
  172. canvas.save()
  173. canvas.lineCap = 'round'
  174. canvas.lineWidth = Math.max(this.radius / 100.0, 3.0)
  175. canvas.strokeStyle = this.secondColor
  176. canvas.rotate(second * 6 * Math.PI / 180)
  177. canvas.drawLine(0, this.radius / 5.0, 0, -this.radius + this.radius / 10.0)
  178. // canvas.drawCircle(0, 0, this.radius / 30.0)
  179. // canvas.drawCircle(0, -this.radius + this.radius / 5.0, this.radius / 60.0)
  180. // canvas.strokeStyle = Color.YELLOW
  181. // canvas.drawCircle(0, 0, this.radius / 100.0)
  182. canvas.restore()
  183. } // Function drawSecond()
  184. } // Class SGraphyClockItem