思路

使用2个canvas 一个是背景圆环，一个是彩色圆环。

使用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',

observer:function(newVal,oldVal,change){

console.log(newVal, oldVal, change);this.onreset(); //数值变化是所有重绘

}

},

per:{//百分比 通过此值转换成step

type: String,

value:'0',

observer:function(newVal,oldVal,change){

console.log(newVal, oldVal, change);this.onreset();//数值变化是所有重绘

}

},

r:{//半径

type: String,

value:'50',

observer:function(newVal,oldVal,change){

console.log(newVal, oldVal, change);this.onreset();//数值变化是所有重绘

}

}

},

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.clearRect(0, 0, 2*r, 2*r);

ctx.draw();//清空缓存内容

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);

context.clearRect(0, 0, 2*r, 2*r);

context.draw();//清空缓存内容//设置渐变

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();//对当前路径进行描边

step?context.draw():''; //当step为空的时候不画0%

},/*** 功能：重绘画板*/onreset: 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);//绘制 彩色圆环

}

},

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 :

{{txt}}%

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 使用组件

draw : 确定 canvas的id

per : 进度百分比 (1-100)

r: 圆的半径 (按px,最终转化成rpx)

结果:

注意，1楼网友反馈，数据更新时组件没更新，(我临时把声明周期的函数，复制了一份移动到methods中，在属性值变化是调用了一下，可以数据更新了)

转 :

https://segmentfault.com/a/1190000013219501

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

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