基于canvas 2D实现微信小程序自定义组件-环形进度条
最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个环形进度条微信小程序自定义组件，文中有示例代码,写的比较粗陋，感兴趣的小伙伴们可以讨论交流
本文实例为大家分享了微信小程序实现环形进度条的具体代码，具体实现功能如下
参考微信小程序自定义组件官方教程实现进度渐变实现颜色渐变
先上效果图(录制不清晰,凑合着看v)
开发步骤
1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。
2、创建名为circle的文件夹，用来放环形进度条自定义组件。
3、代码拷贝到对应目录下即可正常使用
目录结构图：
主要代码,代码比较简单,文中有相应的注释(完整项目,最后有下载地址)
circle.json
{"component": true,"usingComponents": {}}
circle.wxml
<canvas id="myCanvas_circle" ><view class="circle-bar" style="height:{{canvasWidth}}px;"><view class="title_name">{{title}}</view><view class="title_val" >{{value}} {{suffix}}</view></view></canvas>
circle.wxss
.circle-bar{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;position: absolute;top: 0;}.circle-bar .title_name{max-height: 62rpx;font-size: 26rpx;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
circle.js
_setPercent: function (per, old) {var ctx = this.data.ctx2d;if (!ctx) {return;}// 大小值的计算var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径var startDegree = this.data.startDegree; //从什么角度开始var maxValue = this.data.maxValue; //最大值var minValue = this.data.minValue; //最小值var lineColor = this.data.lineColor; //线条颜色var lineWidth = this.data.lineWidth; //线条宽度var percent = 360 * ((this.data.value - minValue) / (maxValue - minValue)); //计算结果var direction = false; //默认顺时针//根据差值计算if (per > old) {//绘制彩色 if (this.data.isColours) {//设置渐变色var my_gradient = ctx.createLinearGradient(0, 0, 200, 0); my_gradient.addColorStop(0, this.data.lineColor);my_gradient.addColorStop(0.5, "red");my_gradient.addColorStop(1, "#FA6400");lineColor = my_gradient;}startDegree = 360 * ((old - minValue) / (maxValue - minValue));percent = 360 * (((per - old) - minValue) / (maxValue - minValue))} else {//绘制灰色,反向绘制lineColor = "#ebebeb";direction = true;startDegree = 360 * ((old - minValue) / (maxValue - minValue));percent = 360 * (((old - per) - minValue) / (maxValue - minValue))}//绘制有色彩的圆弧 var currtnt_st = 0; //绘制进度var step = 10;var span = 200 * step / (percent); //200ms完成绘制var drawInterval = setInterval(() => {currtnt_st = currtnt_st + step;if (currtnt_st > percent) {currtnt_st = percent;}ctx.beginPath();ctx.strokeStyle = lineColor;ctx.lineWidth = lineWidth;if (!direction) {ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, (startDegree + currtnt_st) * Math.PI / 180 - 0.5 * Math.PI, direction);} else {ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, ((startDegree - currtnt_st) * Math.PI / 180) - 0.5 * Math.PI, direction);}ctx.stroke();ctx.closePath();if (currtnt_st >= percent) {clearInterval(drawInterval);}}, span);}
使用组件
index.json
{"navigationBarTitleText": "测试页面","usingComponents": {"circle": "/components/circle/circle"}}
index.wxml
<view class="circle-ps"><circle type="2d" id="can" canvasWidth="{{80}}" value="{{per}}" valueColor="#333" lineWidth="{{3}}"></circle></view><view class="circle-ps"><circle type="2d" name="cans1" canvasWidth="{{90}}" value="{{per1}}" valueColor="#333" lineWidth="{{3}}"></circle></view>
index.js
setInterval(() => {this.setData({per:parseInt(Math.random()*100),per1:parseInt(Math.random()*100),})}, 1000);
组件的属性介绍
环形进度条的组件完整代码:
下载完整源码
