微信小程序本身提供了html5中原生的直线进度条,但是没有提供圆形进度条,这里我使用canvas简单实现了一个圆形进度条组件.
进度条的实现还是基于canvas的操作,但是相比于html5中canvas的api,微信小程序的api略有缩减,功能并不是那么的多,比如说measureText、window.requestAnimationFrame等等.
丢张效果图:
Animation.gif
网上提供的版本基本都是两个canvas叠加实现的,但是没有必要,瞅了瞅 html5 canvas实现圆形进度条的文章里面有个好点的例子,就直接那过来用了……..你发现,肯定是没法用的😏,因为api都变的了,所以要对代码做一下调整,把对应的参数换成微信小程序的参数.
但是微信小程序没有 requestAnimationFrame 这样的动画执行参数所以只能用setInterval 来实现了,最后还要注意的是要想执行动画,还要使用draw 方法才行的.
以下为相应的代码:
js代码
// 组件progress.js
function drawMain(drawing_elem, percent, forecolor, bgcolor, line, ctx) {
var context = wx.createCanvasContext(drawing_elem);//创建并返回绘图上下文context对象。
var center_x = ctx.w / 2;
var center_y = ctx.h / 2;
var rad = Math.PI * 2 / 100;
var speed = 0;
// 绘制背景圆圈
function backgroundCircle() {
context.save();
context.beginPath();
context.setLineWidth(line); //设置线宽
var radius = center_x - line;
context.setLineCap("round");
context.setStrokeStyle(bgcolor);
context.arc(center_x, center_y, radius, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//绘制运动圆环
function foregroundCircle(n) {
context.save();
context.setStrokeStyle(forecolor);
context.setLineWidth(line);
context.setLineCap("round");
var radius = center_x - line;
context.beginPath();
context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke();
context.closePath();
context.restore();
}
//绘制文字
function text(obj) {
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.setFillStyle(forecolor);
var font_size = obj.size;
context.setFontSize(font_size)
var text_width = 0;
context.setTextAlign('center');
context.fillText(obj.value, center_x - text_width / 2 + obj.offsetX, center_y + font_size / 2 + obj.offsetY);
context.restore();
}
var animation_interval = 20, n = percent, varName;
var step = 0;
function animation() {
context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
backgroundCircle();
text({
size: 48,
offsetX: -5,
offsetY: -15,
value: step.toFixed(0)
});
text({
size: 20,
offsetX: 35,
offsetY: -5,
value: "分"
});
text({
size: 12,
offsetX: 0,
offsetY: 30,
value: "综合评分"
});
foregroundCircle(step);
if (step >= percent) clearInterval(varName);
step += 1;
context.draw();
}
varName = setInterval(animation, animation_interval);
}
module.exports = drawMain;
wxml
<canvas class="cir" canvas-id="canvasArc" style='width:{{ctx.w}}px;height:{{ctx.h}}px;'>
</canvas>
js调用
// 导入
var drawMain = require('../../utils/progress.js');
Page({
data: {
// 设置 进度条的高宽,值
ctx: {
w: 160,
h: 160,
value: 70
}
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 开始画图 canvas-id value 前景色 背景色 进度条宽度 高宽数据
new drawMain("canvasArc", this.data.ctx.value, "#32A0F0", "#e7e7e7", 10, this.data.ctx);
}
})
