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

最新推荐文章于 2024-07-24 10:23:56 发布

赵不懂

最新推荐文章于 2024-07-24 10:23:56 发布

阅读量562

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_33351410/article/details/90694185

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

圆形进度的绘制：

xml 使用画布

<canvas class='canvas-container' canvas-id='canvasId' ></canvas>

js 调用绘制方法

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

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

效果图

需要注意的地方：

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

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

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

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