基于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);

组件的属性介绍

属性名称	类型	默认值	说明
画布宽度	float	100%*0.4	画布默认大小
线条宽度	float	10	环形线条粗细
线条颜色	string	“#3696FA”	颜色代码
标题	string	“完成率”
最大值	int	100
最小值	int	0
值后缀	string	%
开始角度	int	0	开始绘制圆环的角度(0-360)
是否开启渐变	bool	false	是否启用圆环进度颜色渐变

环形进度条的组件完整代码:
下载完整源码

基于canvas 2D实现微信小程序自定义组件-环形进度条相关推荐

微信小程序自定义封装环形进度条组件
我们先看效果-选不了视频没办法了说明:此组件对圆的宽度,进度条的宽度.颜色.旋转方向,还有进度条的值,还有两端是否要圆角都进行了动态化,无坑可放心用,参数解释在注释里,我就不写了 .效果图看到尾部的 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用组件与模块类似,实现了功能的复用,提高开发速率,减少代码量在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者导航栏等 . ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下微信小程序自定义组件微信小程序支持自定义组件下方的目录其中,components为组件目录,nodemodule ...

基于canvas 2D实现微信小程序自定义组件-环形进度条

基于canvas 2D实现微信小程序自定义组件-环形进度条

基于canvas 2D实现微信小程序自定义组件-环形进度条相关推荐

最新文章

热门文章