uni-progress.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <view class="progress_box">
  3. <canvas class="progress_bg" canvas-id="cpbg"></canvas>
  4. <canvas class="progress_bar" canvas-id="cpbar"></canvas>
  5. <canvas class="progress_line" canvas-id="cpline"></canvas>
  6. <view class="progress_txt">
  7. <view class="progress_info">{{ progress_txt }}<text>分</text></view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. props: {
  14. progress_txt: {
  15. type: Number,
  16. default: 0
  17. }
  18. },
  19. mounted: function() {
  20. this.drawProgressbg();
  21. this.drawCircle(this.progress_txt); //参数为1-100
  22. this.drawLine();
  23. },
  24. methods: {
  25. drawProgressbg: function() {
  26. // 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
  27. var ctx = uni.createCanvasContext('cpbg', this);
  28. ctx.setLineWidth(12); // 设置圆环的宽度
  29. ctx.setStrokeStyle('#fdee1b'); // 设置圆环的颜色
  30. // ctx.setLineCap('round'); // 设置圆环端点的形状
  31. ctx.setLineCap('square'); // 设置圆环端点的形状
  32. ctx.beginPath(); //开始一个新的路径
  33. ctx.arc(55, 55, 45, 0 * Math.PI, 2 * Math.PI, false);
  34. //设置一个原点(100,100),半径为100的圆的路径到当前路径
  35. ctx.stroke(); //对当前路径进行描边
  36. ctx.draw();
  37. },
  38. drawCircle: function(step) {
  39. var ctx = uni.createCanvasContext('cpbar', this);
  40. // 进度条的渐变(中心x坐标-半径-边宽,中心Y坐标,中心x坐标+半径+边宽,中心Y坐标)
  41. var gradient = ctx.createLinearGradient(0, 0, 65, 0);
  42. let increase = 0.05;
  43. let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
  44. let current = -Math.PI / 2; // 起始角度
  45. let timer = setInterval(() => {
  46. gradient.addColorStop('0', '#ff9549');
  47. gradient.addColorStop('1.0', '#ff5500');
  48. ctx.setLineWidth(12);
  49. ctx.setStrokeStyle(gradient);
  50. ctx.setLineCap('square');
  51. ctx.beginPath();
  52. // 参数step 为绘制的百分比
  53. if (current < end) {
  54. current = current + increase;
  55. }
  56. if (current >= end) {
  57. current = end;
  58. clearInterval(timer);
  59. }
  60. ctx.arc(55, 55, 45, -Math.PI / 2, current, false);
  61. ctx.stroke();
  62. ctx.draw();
  63. }, 30);
  64. },
  65. // 画刻度
  66. drawLine() {
  67. var context = uni.createCanvasContext("cpline",this);
  68. var r = 45;
  69. var x0 = 55;
  70. var y0 = 55;
  71. var x;
  72. var y;
  73. var lineWidth = 12;
  74. for (let i = 0; i < 60; i++) {
  75. context.beginPath();
  76. context.setLineWidth(lineWidth);
  77. context.setStrokeStyle("#fdee1b");
  78. x = x0 - r * Math.sin(((6 * (i + 1) - 3) * Math.PI) / 180);
  79. y = y0 - r * Math.cos(((6 * (i + 1) - 3) * Math.PI) / 180);
  80. // console.log('x0:' + x0 + ' y0:' + y0 + ' x:' + x + ' y:' + y);
  81. context.moveTo(x, y);
  82. context.arc(
  83. x0,
  84. y0,
  85. r,
  86. ((270 - 6 * (i + 1) + 3) * Math.PI) / 180,
  87. ((270 - 6 * i) * Math.PI) / 180,
  88. false
  89. );
  90. context.stroke();
  91. context.closePath();
  92. }
  93. context.stroke();
  94. context.draw();
  95. }
  96. }
  97. };
  98. </script>
  99. <style>
  100. .progress_box {
  101. position: relative;
  102. width: 100%;
  103. height: 200upx;
  104. display: flex;
  105. align-items: center;
  106. justify-content: center;
  107. text-align: center;
  108. }
  109. .progress_bg {
  110. position: absolute;
  111. width: 110px;
  112. height: 110px;
  113. }
  114. .progress_bar {
  115. position: absolute;
  116. width: 110px;
  117. height: 110px;
  118. }
  119. .progress_line {
  120. position: absolute;
  121. width: 110px;
  122. height: 110px;
  123. }
  124. .progress_txt {
  125. position: absolute;
  126. font-size: 28upx;
  127. color: #999999;
  128. }
  129. .progress_info {
  130. padding-left: 16upx;
  131. letter-spacing: 2upx;
  132. font-size: 50upx;
  133. color: #333333;
  134. display: flex;
  135. align-items: center;
  136. justify-content: center;
  137. }
  138. .progress_info text{
  139. font-size: 24upx;
  140. }
  141. .progress_dot {
  142. width: 16upx;
  143. height: 16upx;
  144. border-radius: 50%;
  145. background-color: #fb9126;
  146. }
  147. </style>