ar-circle-progress.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view
  3. class="circle-progress"
  4. :style="{
  5. width: widthPx + 'px',
  6. height: widthPx + 'px',
  7. backgroundColor: bgColor
  8. }"
  9. >
  10. <!-- 有的不支持canvas-id属性,必须用id属性 -->
  11. <canvas
  12. class="canvas-bg"
  13. :canvas-id="canvasId"
  14. :id="canvasId"
  15. :style="{
  16. width: widthPx + 'px',
  17. height: widthPx + 'px'
  18. }"
  19. ></canvas>
  20. <canvas
  21. class="canvas"
  22. :canvas-id="elId"
  23. :id="elId"
  24. :style="{
  25. width: widthPx + 'px',
  26. height: widthPx + 'px'
  27. }"
  28. ></canvas>
  29. <slot></slot>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'circle-progress',
  35. props: {
  36. // 圆环进度百分比值
  37. percent: {
  38. type: Number,
  39. default: 0,
  40. // 值在0到100之间
  41. validator: val => {
  42. return val >= 0 && val <= 100;
  43. }
  44. },
  45. // 圆环底色(灰色的圆环)
  46. inactiveColor: {
  47. type: String,
  48. default: '#ececec'
  49. },
  50. // 圆环激活部分的颜色
  51. activeColor: {
  52. type: String,
  53. default: '#009dff'
  54. },
  55. // 圆环线条的宽度,单位rpx
  56. borderWidth: {
  57. type: [Number, String],
  58. default: 14
  59. },
  60. // 整个圆形的宽度,单位rpx
  61. width: {
  62. type: [Number, String],
  63. default: 200
  64. },
  65. // 整个圆环执行一圈的时间,单位ms
  66. duration: {
  67. type: [Number, String],
  68. default: 1500
  69. },
  70. // 圆环进度区域的背景色
  71. bgColor: {
  72. type: String,
  73. default: '#ffffff'
  74. }
  75. },
  76. data() {
  77. return {
  78. canvasId: 'canvasId', //一个页面多个圆形进度
  79. elId: 'elId',
  80. widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
  81. borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
  82. startAngle: -Math.PI / 2, // canvas画圆的起始角度,默认为3点钟方向,定位到12点钟方向
  83. progressContext: null, // 活动圆的canvas上下文
  84. newPercent: 0, // 当动态修改进度值的时候,保存进度值的变化前后值,用于比较用
  85. oldPercent: 0 // 当动态修改进度值的时候,保存进度值的变化前后值,用于比较用
  86. };
  87. },
  88. watch: {
  89. percent(nVal, oVal = 0) {
  90. if (nVal > 100) nVal = 100;
  91. if (nVal < 0) oVal = 0;
  92. this.newPercent = nVal;
  93. this.oldPercent = oVal;
  94. setTimeout(() => {
  95. this.drawCircleByProgress(oVal);
  96. }, 50);
  97. }
  98. },
  99. created() {
  100. // 赋值,用于加载后第一个画圆使用
  101. this.newPercent = this.percent;
  102. this.oldPercent = 0;
  103. },
  104. mounted() {
  105. this.drawProgressBg();
  106. this.drawCircleByProgress(this.oldPercent);
  107. },
  108. methods: {
  109. //一个页面多个progress时ID需不同
  110. randomId(){
  111. return 'progressId'+parseInt(Math.random()*1000000)
  112. },
  113. drawProgressBg() {
  114. let ctx = uni.createCanvasContext(this.canvasId, this);
  115. ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
  116. ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
  117. ctx.beginPath(); // 开始描绘路径
  118. let radius = this.widthPx / 2;
  119. ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
  120. ctx.stroke(); // 对路径进行描绘
  121. ctx.draw();
  122. },
  123. drawCircleByProgress(progress) {
  124. let ctx = this.progressContext;
  125. if (!ctx) {
  126. ctx = uni.createCanvasContext(this.elId, this);
  127. this.progressContext = ctx;
  128. }
  129. // 表示进度的两端为圆形
  130. ctx.setLineCap('round');
  131. // 设置线条的宽度和颜色
  132. ctx.setLineWidth(this.borderWidthPx);
  133. ctx.setStrokeStyle(this.activeColor);
  134. // 计算过渡时间
  135. let time = Math.floor(this.duration / 100);
  136. let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
  137. ctx.beginPath();
  138. // 半径为整个canvas宽度的一半
  139. let radius = this.widthPx / 2;
  140. ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
  141. ctx.stroke();
  142. ctx.draw();
  143. // 增大了百分比
  144. if (this.newPercent > this.oldPercent) {
  145. progress=progress+10;
  146. if (progress > this.newPercent) return;
  147. } else {
  148. // 减少百分比
  149. progress=progress-10;
  150. if (progress < this.newPercent) return;
  151. }
  152. setTimeout(() => {
  153. // 定时器,为了让进度条有动画效果
  154. this.drawCircleByProgress(progress);
  155. }, time);
  156. }
  157. }
  158. };
  159. </script>
  160. <style scoped>
  161. .circle-progress {
  162. position: relative;
  163. display: flex;
  164. align-items: center;
  165. justify-content: center;
  166. }
  167. .canvas-bg {
  168. position: absolute;
  169. }
  170. .canvas {
  171. position: absolute;
  172. }
  173. </style>