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


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 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
原生js 秒表实现代码
Jul 24 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
vue router 配置路由的方法
Jul 26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
ThinkPHP之getField详解
2014/06/20 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python数据库小程序源代码
2019/09/15 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
秋天的雨教学反思
2014/04/27 职场文书
个人安全生产承诺书
2014/05/22 职场文书
节约用水标语
2014/06/11 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
优秀创业计划书分享
2019/07/19 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
python 中的@运算符使用
2021/05/26 Python
Python提取PDF指定内容并生成新文件
2021/06/09 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
MySQL数据库简介与基本操作
2022/05/30 MySQL