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


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 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js实现新年倒计时效果
Dec 10 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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的历史和优缺点
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python框架中flask知识点总结
2018/08/17 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python isinstance函数用法详解
2020/02/13 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2014年德育工作总结
2014/11/20 职场文书
社区好人好事材料
2014/12/26 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA