思路

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

在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的.

它们的缺点为:

1.组件必须用js实例化 (如果我有一个任务列表,后面会显示每个任务的进度,每个任务都必须实例化)

2.它们js实例化时,绘图是用 px绘制,导致页面用rpx布局,组件却用px绘制.

修改后的组件

在components文件加下建立  circle组件,如图

circle.js :

/* components/circle/circle.js */
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
draw: {//画板元素名称id
type: String,
value: 'draw'
},
per:{ //百分比 通过此值转换成step
type: String,
value: '0'
},
r:{//半径
type: String,
value: '50'
} }, data: { /* 私有数据,可用于模版渲染 */
step: 1, //用来算圆的弧度0-2
size:0, //画板大小
screenWidth:750, //实际设备的宽度
txt:0
},
methods: { /**
* el:画圆的元素
* r:圆的半径
* w:圆的宽度
* 功能:画背景
*/
drawCircleBg: function (el, r, w) {
const ctx = wx.createCanvasContext(el,this);
ctx.setLineWidth(w);// 设置圆环的宽度
ctx.setStrokeStyle('#E5E5E5'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(r, r, r - w, 0, 2 * Math.PI, false);
//设置一个原点(110,110),半径为100的圆的路径到当前路径
ctx.stroke();//对当前路径进行描边
ctx.draw(); },
/**
* el:画圆的元素
* r:圆的半径
* w:圆的宽度
* step:圆的弧度 (0-2)
* 功能:彩色圆环
*/
drawCircle: function (el, r, w, step) {
var context = wx.createCanvasContext(el,this);
// 设置渐变
var gradient = context.createLinearGradient(2 * r, r, 0);
gradient.addColorStop("0", "#2661DD");
gradient.addColorStop("0.5", "#40ED94");
gradient.addColorStop("1.0", "#5956CC");
context.setLineWidth(w);
context.setStrokeStyle(gradient);
context.setLineCap('round')
context.beginPath();//开始一个新的路径
// step 从0到2为一周
context.arc(r, r, r - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
context.stroke();//对当前路径进行描边
context.draw()
} }, lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () {
const _this = this;
//获取屏幕宽度
wx.getSystemInfo({
success: function(res) {
_this.setData({
screenWidth: res.windowWidth
});
},
}); //初始化
const el = _this.data.draw; //画板元素
const per = _this.data.per; //圆形进度
const r = Number(_this.data.r); //圆形半径 _this.setData({
step: (2 * Number(_this.data.per)) / 100,
txt: _this.data.per
}); //获取屏幕宽度(并把真正的半径px转成rpx)
let rpx = (_this.data.screenWidth / 750) * r;
//计算出画板大小
this.setData({
size: rpx * 2
});
const w = 4;//圆形的宽度 //组件入口,调用下面即可绘制 背景圆环和彩色圆环。
_this.drawCircleBg(el + 'bg', rpx, w);//绘制 背景圆环
_this.drawCircle(el, rpx, w, _this.data.step);//绘制 彩色圆环 } } })

circle.wxml :

<!-- components/circle/circle.wxml -->
<view class="circle_box" style="width:{{size}}px;height:{{size}}px">
<canvas class="circle_bg" canvas-id="{{draw}}bg" style="width:{{size}}px;height:{{size}}px"></canvas>
<canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas>
<text class='circle_txt'> {{txt}}% </text>
</view>

circle.json :

{
"component": true,
"usingComponents": {}
}

circle.wxss :

.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: absolute;}
.circle_box{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.circle_txt{
position: absolute;
font-size: 28rpx;
}

调用 :

在所需页面的XXX.json 先引入 组件

{
"usingComponents": {
"circle": "/components/circle/circle"
}
}

wxml 使用组件

<circle draw='circwewle1' per = '40' r = '50'/>
<circle draw='circwewle2' per = '10' r = '30'/>
<circle draw='circwewle3' per = '20' r = '100'/>
<circle draw='circwewle' per = '50' r = '60'/>
<circle draw='circwewle' per = '90' r = '120'/>
draw : 确定 canvas的id
per : 进度百分比 (1-100)
r: 圆的半径 (按px,最终转化成rpx)

结果:

转 :

https://segmentfault.com/a/1190000013219501

https://segmentfault.com/a/1190000013242747?utm_source=tag-newest

参考微信自定义组件讲解 : https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

微信小程序之圆形进度条(自定义组件)的更多相关文章

  1. 微信小程序小结(2) ------ 自定义组件

    在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自 ...

  2. 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享

    官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...

  3. 微信小程序把玩(十三)progress组件

    原文:微信小程序把玩(十三)progress组件 进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent=" ...

  4. 微信小程序把玩(十七)input组件

    原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...

  5. 微信小程序把玩(十一)icon组件

    原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...

  6. 微信小程序把玩(九)scroll-view组件

    原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用 ...

  7. 微信小程序把玩(十)swiper组件

    原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...

  8. 微信小程序把玩(八)view组件

    原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-di ...

  9. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

随机推荐

  1. 采集代理ip 地址【西刺,快代理】

    # 嗯,...因为经常需要使用代理去抓一点东西,就有了下面一段代码,第一版不是很好,后面用到了再来优化 import re,pymysql,time,redis from urllib.request ...

  2. DTcmsV4.0分析学习——(1)数据库结构分析

    数据库名:DTcmsdb4 DTcmsV4.0共35张表(33张表+2张插件表) dt_article 内容管理 dt_article_albums 图片相册 dt_article_attach 附件 ...

  3. tomcat启动之后,Chrome浏览器可以访问,IE不行(IE无法访问8080 端口)

    方法简单粗暴,在windows中关闭IE服务,然后再重新安装服务. 请注意,在输入框输入:  http://localhost:8080/myproject 不要直接输入localhost:8080/ ...

  4. Gitlab,Mac下生成SSH Key222

         git是分布式的代码管理工具,远程的代码管理是基于ssh的,所以要使用远程的git则需要ssh的配置.简单的说,Git - 版本控制工具:Github是一个网站,提供给用户空间创建git仓储 ...

  5. framebufferfetch in mali multiple render targets mrt

    gl_LastFragColorARM https://www.khronos.org/registry/OpenGL/extensions/ARM/ARM_shader_framebuffer_fe ...

  6. 关于LinkedList for OpenJDK

    概述      LinkedList采用底层采用双向链表结构,与ArrayList的数组结构不一样.LinkedList因数据结构不一样,不需要申请连续内存,可以利用碎片内存.元素保存数据内容外还需要 ...

  7. Codeforces Round #413 (Div1 + Div. 2) C. Fountains(树状数组维护最大值)

    题目链接:https://codeforces.com/problemset/problem/799/C 题意:有 c 块硬币和 d 块钻石,每种喷泉消耗硬币或钻石中的一种,每个喷泉有一个美丽值,问建 ...

  8. 遍历器Iterator--指针对象

    一. 什么是遍历器 1. 遍历器对象(Iterator) 遍历器对象本质上是一个指针对象,该对象有一个next方法,调用next方法返回一个 含有value和done属性的对象{value: val/ ...

  9. 发布新的模型类包(用于上传到 NuGet 服务器上)

    生成包文件: 1.修改了模型类之后,在项目上点击右键,在列表菜单中选择 “编辑 …….csproj”,然后将里面的三个版本号都换成新的版本号. 2.右键项目,点击“打包” 3.复制输出信息中生成的包的 ...

  10. 携程移动端案列(flex布局、背景图缩放,文字阴影)

    效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...