微信小程序本身提供了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);
    
  }
})

转载：http://www.sprialmint.com/2017/12/11/[简单实现]微信小程序圆形进度条/