【小程序】圆形进度的实现与注意点

圆形进度的绘制：

1. xml 使用画布

2. js 调用绘制方法

PROGRESS.createCanvas(item.canvasId, 5, 23, '#f9b159', '已抢', parseInt(this.formatProgress(1 - item.leftNum / item.issueNum) * 100));

3. until.progress 绘制步骤

var createCanvas = function (id, borderWidth, radius, color, title, perNum) {
  const res = wepy.getSystemInfoSync();
  let progressRate = res.windowWidth / 375;
  radius = progressRate * radius;

  let ctx = wx.createCanvasContext(id);
  ctx.setLineWidth(borderWidth);
  ctx.setStrokeStyle(color);
  ctx.setLineCap('round');
  ctx.beginPath();
  ctx.arc(1.1 * radius, 1.1 * radius, radius, 0, 2 * Math.PI, false);
  ctx.stroke();
  if (perNum !== 0)    {
    ctx.setLineWidth(borderWidth);
    ctx.setStrokeStyle('#ffffff');
    ctx.setLineCap('round');
    ctx.beginPath();
    ctx.arc(1.1 * radius, 1.1 * radius, radius, -Math.PI / 2, ((perNum / 100) * 4 - 1) * Math.PI / 2, false);
  }
  ctx.fillStyle = '#ffffff';
  ctx.textAlign = 'center';
  ctx.font = 'bold 15rpx PingFangSC-Regular';
  let per = (perNum * 1) + '%';
  ctx.fillText(per, 1.1 * radius, 1.3 * radius, 40);
  ctx.stroke(); // 对当前路径进行描边
  ctx.draw();
};

效果图

需要注意的地方：

1. canvas-id唯一性
   如果进度是绘制在列表的item里面，需要注意canvas-id的不能一样，一样id的canvas，第一个后面的所有的canvas的display都是none，不显示的，
2. 半径，宽度的兼容：
   canvas绘制方法里面使用的半径值是不带单位的，所以不能自动用小程序自带的rpx单位进行各个机型的兼容 需要自己做兼容

  const res = wepy.getSystemInfoSync();
  let progressRate = res.windowWidth / 375;
  radius = progressRate * radius;

3. 层级结构
   canvas是原生组件，所以在页面的最上层，如果需要覆盖canvas，则需要用cover-view和cover-iamge进行包裹（cover-view和cover-image里面只能使用cover-view和cover-image，并且cover-view是不展示backgroud-image的，cover-image只能使用网络图片）
4. 延迟加载
   canvas会在再次刷新的时候刷新不出来，需要用到$nextTick和setTimeout来配合加载

如果还有什么不明白的地方，可以一起共同探讨