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


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 相关文章推荐
jquery下checked取值问题的解决方法
Aug 09 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
javascript中的事件代理初探
Mar 08 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
angular directive的简单使用总结
May 24 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
php仿discuz分页效果代码
2008/10/02 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python文件操作基础流程解析
2020/03/19 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
公司同意接收函
2014/01/13 职场文书
文艺演出策划方案
2014/06/07 职场文书
党员志愿者活动总结
2014/06/26 职场文书
庆元旦演讲稿
2014/09/15 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
网吧温馨提示
2015/07/17 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
python语言中pandas字符串分割str.split()函数
2022/08/05 Python