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


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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
详解YII关联查询
2016/01/10 PHP
use jscript List Installed Software
2007/06/11 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python多线程下载文件的方法
2015/07/10 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python实现推箱子游戏
2020/03/25 Python
python把1变成01的步骤总结
2019/02/27 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python如何实现邮件功能
2020/05/27 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
软件测试有哪些?什么是配置项?
2012/02/12 面试题
企业务虚会发言材料
2014/10/20 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
欠条样本
2015/07/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书