微信小程序之圆形进度条实现思路


Posted in Javascript onFebruary 22, 2018

需求概要

小程序中使用圆形倒计时,效果图:

微信小程序之圆形进度条实现思路

思路

  • 使用2个canvas 一个是背景圆环,一个是彩色圆环。
  • 使用setInterval 让彩色圆环逐步绘制。

解决方案

第一步先写结构

一个盒子包裹2个canvas以及文字盒子;

盒子使用相对定位作为父级,flex布局,设置居中;

一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg"

另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"

代码如下:

// wxml
 <view class="container">
 <view class='progress_box'>
 <canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas> 
 <canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas> 
 <view class="progress_text">
  <view class="progress_dot"></view> 
  <text class='progress_info'> {{progress_txt}}</text>
 </view> 
 </view>
</view>
// wxss
.progress_box{
 position: relative;
 width:220px;
 height: 220px; 
// 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了
// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备,下绘制的圆环跑盒子外去了
// 小程序使用rpx单位适配 ,但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示
 display: flex; 
 align-items: center;
 justify-content: center;
 background-color: #eee;
}
.progress_bg{
 position: absolute;
 width:220px;
 height: 220px; 
}
.progress_canvas{ 
 width:220px;
 height: 220px; 
} 
.progress_text{ 
 position: absolute; 
 display: flex; 
 align-items: center;
 justify-content: center
}
.progress_info{ 
 font-size: 36rpx;
 padding-left: 16rpx;
 letter-spacing: 2rpx
} 
.progress_dot{
 width:16rpx;
 height: 16rpx; 
 border-radius: 50%;
 background-color: #fb9126;
}

第二步数据绑定

从wxml中可以看到我们使用了一个数据progress_txt,所以在js中设置data如下:

data: {
 progress_txt: '正在匹配中...', 
 },

第三步canvas绘制

敲黑板,划重点

1. 先绘制背景

  1. 在js中封装一个画圆环的函数drawProgressbg,canvas 画圆
  2. 在onReady中执行这个函数;

小程序canvas组件与H5的canvas有点差别,请查看文档,代码如下

drawProgressbg: function(){
 // 使用 wx.createContext 获取绘图上下文 context
 var ctx = wx.createCanvasContext('canvasProgressbg')
 ctx.setLineWidth(4);// 设置圆环的宽度
 ctx.setStrokeStyle('#20183b'); // 设置圆环的颜色
 ctx.setLineCap('round') // 设置圆环端点的形状
 ctx.beginPath();//开始一个新的路径
 ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
 //设置一个原点(100,100),半径为90的圆的路径到当前路径
 ctx.stroke();//对当前路径进行描边
 ctx.draw();
 },
 onReady: function () {
 this.drawProgressbg(); 
 },

看一下效果如下:

微信小程序之圆形进度条实现思路

2. 绘制彩色圆环

  1. 在js中封装一个画圆环的函数drawCircle,
  2. 在onReady中执行这个函数;
drawCircle: function (step){ 
 var context = wx.createCanvasContext('canvasProgress');
 // 设置渐变
 var gradient = context.createLinearGradient(200, 100, 100, 200);
 gradient.addColorStop("0", "#2661DD");
 gradient.addColorStop("0.5", "#40ED94");
 gradient.addColorStop("1.0", "#5956CC");
 
 context.setLineWidth(10);
 context.setStrokeStyle(gradient);
 context.setLineCap('round')
 context.beginPath(); 
 // 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
 context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
 context.stroke(); 
 context.draw() 
 },
 onReady: function () {
 this.drawProgressbg(); 
 this.drawCircle(2) 
 },

this.drawCircle(0.5) 效果如下: this.drawCircle(1) 效果如下: this.drawCircle(2) 效果如下:  

微信小程序之圆形进度条实现思路

3. 设置一个定时器

在js中的data设置一个计数器 count,一个步骤step,一个定时器

在js中封装一个定时器的函数countInterval,

在onReady中执行这个函数;

data: {
 progress_txt: '正在匹配中...', 
 count:0, // 设置 计数器 初始为0
 countTimer: null // 设置 定时器 初始为null
 },
 countInterval: function () {
 // 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
 this.countTimer = setInterval(() => {
 if (this.data.count <= 60) {
 /* 绘制彩色圆环进度条 
 注意此处 传参 step 取值范围是0到2,
 所以 计数器 最大值 60 对应 2 做处理,计数器count=60的时候step=2
 */
  this.drawCircle(this.data.count / (60/2))
 this.data.count++;
 } else {
 this.setData({
  progress_txt: "匹配成功"
 }); 
 clearInterval(this.countTimer);
 }
 }, 100)
 },
 onReady: function () {
 this.drawProgressbg();
 // this.drawCircle(2) 
 this.countInterval()
 },

最终效果

微信小程序之圆形进度条实现思路

总结

以上所述是小编给大家介绍的微信小程序之圆形进度条实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Fixie.js 自动填充内容的插件
Jun 28 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
babel基本使用详解
Feb 17 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
webpack下实现动态引入文件方法
Feb 22 #Javascript
JavaScript 有用的代码片段和 trick
Feb 22 #Javascript
3种vue路由传参的基本模式
Feb 22 #Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 #Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 #Javascript
webpack将js打包后的map文件详解
Feb 22 #Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 #Javascript
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
Python 远程开关机的方法
2020/11/18 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
中药专业大学生医药工作求职信
2013/10/25 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
回复函范文
2015/07/14 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle