circle-progress.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. // components/circle/circle.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. properties: {
  7. // 新增一个进度百分比属性,外部可通过此属性传递进度值
  8. progress: {
  9. type: Number,
  10. value: 0,
  11. observer(newVal) {
  12. this.updateProgress(newVal);
  13. }
  14. },
  15. disabled: {
  16. type: Boolean,
  17. value: false,
  18. observer(newVal) {
  19. this.updateDisabled(newVal);
  20. }
  21. },
  22. // width: {
  23. // type: Number,
  24. // value: 100,
  25. // observer(newVal) {
  26. // this.updateWidth(newVal);
  27. // }
  28. // },
  29. // r: {
  30. // type: Number,
  31. // value: 90,
  32. // observer(newVal) {
  33. // this.updateR(newVal);
  34. // }
  35. // },
  36. // lw: {
  37. // type: Number,
  38. // value: 5,
  39. // observer(newVal) {
  40. // this.updateLw(newVal);
  41. // }
  42. // },
  43. },
  44. /**
  45. * 组件的初始数据
  46. */
  47. data: {
  48. progress_txt: '加载中...', // 提示文字
  49. progress: 0,
  50. disabled: false,
  51. width:110,
  52. r:110,
  53. lw:7,
  54. },
  55. lifetimes: {
  56. attached() {
  57. const container = this.selectComponent('#container')
  58. // const width = container.offsetWidth;
  59. // const height = container.offsetHeight;
  60. console.log("xxxxxxxxxxxxxxxxxxxxxxx")
  61. console.log(container)
  62. // console.log(width)
  63. // console.log(height)
  64. console.log("xxxxxxxxxxxxxxxxxxxxxxx")
  65. // 组件加载后准备绘制
  66. this.initCanvas();
  67. },
  68. },
  69. /**
  70. * 组件的方法列表
  71. */
  72. methods: {
  73. /**
  74. * 初始化 Canvas 上下文
  75. */
  76. initCanvas() {
  77. let that = this
  78. // 获取两个canvas元素的上下文
  79. this.bgContext = wx.createCanvasContext('canvasProgressbg', this);
  80. this.progressContext = wx.createCanvasContext('canvasProgress', this);
  81. const container = this.selectComponent('#container')
  82. var query = wx.createSelectorQuery().in(this);
  83. query.select('#container').boundingClientRect()
  84. query.exec(function (res) {
  85. //res就是 所有标签为publicImg的元素的信息 的数组
  86. console.log(res);
  87. that.data.width = res[0].width / 2
  88. that.data.r = that.data.width - 1
  89. that.data.lw = 1
  90. that.drawProgressbg();
  91. that.drawCircle(that.data.progress);
  92. })
  93. },
  94. /**
  95. * 画progress底部背景
  96. */
  97. drawProgressbg() {
  98. let w = this.data.width;
  99. let r = this.data.r;
  100. let lw = this.data.lw;
  101. this.progressContext.setFillStyle('#FFFFFF');
  102. this.progressContext.beginPath();
  103. this.progressContext.arc(w, w, r, 0, 2 * Math.PI, false);
  104. this.progressContext.fill();
  105. this.bgContext.setLineWidth(lw);
  106. this.bgContext.setStrokeStyle('#FFFFFF');
  107. this.bgContext.setLineCap('round');
  108. this.bgContext.beginPath();
  109. this.bgContext.arc(w, w, r, 0, 2 * Math.PI, false);
  110. this.bgContext.stroke();
  111. this.bgContext.draw(false, () => {}); // 第二个参数用于兼容旧版API,新版不需要传入回调函数
  112. this.progressContext.setFillStyle('red');
  113. },
  114. /**
  115. * 更新并画progress进度
  116. */
  117. updateProgress(progressPercentage) {
  118. this.setData({
  119. progress:progressPercentage
  120. })
  121. //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度,最大值为2(对应100%)
  122. if(this.progressContext){
  123. this.drawCircle(this.data.progressPercentage);
  124. }
  125. },
  126. /**
  127. * 更新并画disabled
  128. */
  129. updateDisabled(dis) {
  130. this.setData({
  131. disabled:dis
  132. })
  133. //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度,最大值为2(对应100%)
  134. if(this.progressContext){
  135. this.drawCircle(this.data.progress);
  136. }
  137. },
  138. /**
  139. * 更新并画disabled
  140. */
  141. // updateWidth(dis) {
  142. // this.setData({
  143. // width:dis
  144. // })
  145. // //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度,最大值为2(对应100%)
  146. // if(this.progressContext){
  147. // this.drawCircle(this.data.progressPercentage);
  148. // }
  149. // },
  150. // updateR(dis) {
  151. // this.setData({
  152. // r:dis
  153. // })
  154. // //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度,最大值为2(对应100%)
  155. // if(this.progressContext){
  156. // this.drawCircle(this.data.progressPercentage);
  157. // }
  158. // },
  159. // updateLw(dis) {
  160. // this.setData({
  161. // r:dis
  162. // })
  163. // //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度,最大值为2(对应100%)
  164. // if(this.progressContext){
  165. // this.drawCircle(this.data.progressPercentage);
  166. // }
  167. // },
  168. /**
  169. * 画progress进度
  170. */
  171. drawCircle(step) {
  172. step = step * 2 / 100;
  173. let w = this.data.width;
  174. let r = this.data.r;
  175. let lw = this.data.lw;
  176. this.progressContext.setLineWidth(lw+1);
  177. this.progressContext.setStrokeStyle(this.data.disabled?'#B6B3C1':'#21ADFF');
  178. this.progressContext.setLineCap('round');
  179. this.progressContext.beginPath();
  180. this.progressContext.arc(w, w, r, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
  181. this.progressContext.stroke();
  182. this.progressContext.draw(false, () => {}); // 同样添加false参数
  183. this.setData({
  184. progress_txt:this.data.progress + "%"
  185. })
  186. },
  187. }
  188. })