圆环进度条 两种实现方式

发布时间:2023-03-17 16:00

先看图效果图:

\"圆环进度条

这边UI的 设计图 长这样

 \"圆环进度条

 一个圆环的进度展示,这个圆环上开始位置 是齐口的,终点圆口,并且有一个圆;

列举了两种实现方式:

  • 第一种 纯的CSS实现;原理是 叠加旋转 而成。缺点在某些机型上面应为遮罩没有对齐(uniapp 半个像素不显示的问题,其他平台没有这问题),会出现白边(没有遮挡好的情况)
  •  第二种 createCanvasContext 直接画弧线;动态计算原点位置 叠加 显示

第一种实现方式 

理论上:纯css  两个半圆在相应的取值范围内 旋转,旋转的时候被父对象 遮罩剩余的部分

第一步: 两个半圆在旋转,旋转时候被父对象 clip 掉 剩余部分,两个红色底就是两个半圆的父元素,红色第里面的两个深色块就是 将要旋转的 元素;

\"圆环进度条\"圆环进度条


  
  


  
  



.box0-parent {
  position: absolute;
  top: 580rpx;
  width: 284rpx;
  height: 284rpx;
  background-color: #dd2124;
  clip: rect(0px, 142rpx, 284rpx, 0px);

  // border-radius: 50%;
  .box0 {
    position: absolute;
    top: 0;
    width: 284rpx;
    height: 284rpx;
    background-color: #2C405A;
    clip: rect(0px, 142rpx, 284rpx, 0px);
    border-radius: 50%;
  }
}

.box1-parent {
  position: absolute;
  top: 580rpx;
  width: 284rpx;
  height: 284rpx;
  background-color: #c34c24;
  clip: rect(0px, 284rpx, 284rpx, 142rpx);
  // border-radius: 50%;

  .box1 {
    position: absolute;
    top: 0;
    width: 284rpx;
    height: 284rpx;
    background-color: #5a4600;
    clip: rect(0px, 284rpx, 284rpx, 142rpx);
    border-radius: 50%;
    // transform: rotate(60deg);
  }
}
   

 第二步: 调整下参数; 再调下颜色

\"圆环进度条\"圆环进度条






然后加上蓝色底色,圆环换上白色;真理下就能得到这么的 圆环了;

至于 白色圆点  直接绝对定位于半圆, 随着半圆移动即可;每个半圆都有一个

\"圆环进度条\"圆环进度条

第二种实现方式

使用的是 canvas 中的 arc  (画弧线来实现的)

uni.createCanvasContext\"\"https://uniapp.dcloud.io/api/canvas/CanvasContext.html





methods: {
  onChange(value) {
    // console.log(value.detail.value)
    this.percent = value.detail.value
    this.drawCircleByProgress()
  },
  drawCircleByProgress(){
    // 表示进度的两端为圆形  目前没有找到只设置一段的方式
    this.canvasContent.setLineCap(\'round\'); //圆形     
    this.canvasContent.setLineCap(\'square\'); //方形
    // 设置线条的宽度和颜色
    this.canvasContent.setLineWidth(uni.upx2px(30));
    this.canvasContent.setStrokeStyle(\'#ff0000\');
          
    let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
    
    this.canvasContent.beginPath();
    // 半径为整个canvas宽度的一半
    let radius = uni.upx2px(284) / 2;
    this.canvasContent.arc(radius, radius, radius - uni.upx2px(30), this.startAngle, endAngle, false);
    this.canvasContent.stroke();
    
    this.canvasContent.draw();
  }
}

.canvas-content{
  width: 284rpx;
  height: 284rpx;
  background-color: #059cdd;
}

\"圆环进度条

这种方式对于圆环中的 画一个白色球需要通过 弧度计算圆上一点的位置

\"圆环进度条

drawCircleByProgress() {
  // 表示进度的两端为圆形  目前没有找到只设置一段的方式
  this.canvasContent.setLineCap(\'round\'); //圆形     
  this.canvasContent.setLineCap(\'square\'); //方形

  let width = uni.upx2px(30)

  // 设置线条的宽度和颜色
  this.canvasContent.setLineWidth(width);
  this.canvasContent.setStrokeStyle(\'#ff0000\');


  // 画圆环
  let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
  this.canvasContent.beginPath();
  // 半径为整个canvas宽度的一半
  let radius = uni.upx2px(284) / 2;
  this.canvasContent.arc(radius, radius, radius - width, this.startAngle, endAngle, false);
  this.canvasContent.stroke();



  //原点要在 圆弧前面一点点的位置 所有这个加了 0.1;
  let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
  let p0y = radius + Math.sin(endAngle + .1) * (radius - width)
  // 画圆球
  this.canvasContent.beginPath()
  this.canvasContent.arc(p0x, p0y, width / 2, 0, 2 * Math.PI)
  this.canvasContent.setFillStyle(\'#F0AD4E\');
  this.canvasContent.fill()
  // 画白色圆球
  this.canvasContent.beginPath()
  this.canvasContent.arc(p0x, p0y, width * 0.4, 0, 2 * Math.PI)
  this.canvasContent.setFillStyle(\'#FFFFFF\');
  this.canvasContent.fill()

  this.canvasContent.draw();
}

真理下就能得到下面的例子了

\"圆环进度条

完整代码:






ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号