• 圆环进度条 两种实现方式

    先看图效果图：

    这边UI的 设计图 长这样

     

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

    列举了两种实现方式：

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

    第一种实现方式 

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

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

    1. <view class="box0-parent">
    2.   <view class="box0" :style="box0Style">
    3.   </view>
    4. </view>
    5. <view class="box1-parent">
    6.   <view class="box1" :style="box1Style">
    7.   </view>
    8. </view>
    9.  
    10.  
    11. .box0-parent {
    12.   position: absolute;
    13.   top: 580rpx;
    14.   width: 284rpx;
    15.   height: 284rpx;
    16.   background-color: #dd2124;
    17.   clip: rect(0px, 142rpx, 284rpx, 0px);
    18.  
    19.   // border-radius: 50%;
    20.   .box0 {
    21.     position: absolute;
    22.     top: 0;
    23.     width: 284rpx;
    24.     height: 284rpx;
    25.     background-color: #2C405A;
    26.     clip: rect(0px, 142rpx, 284rpx, 0px);
    27.     border-radius: 50%;
    28.   }
    29. }
    30.  
    31. .box1-parent {
    32.   position: absolute;
    33.   top: 580rpx;
    34.   width: 284rpx;
    35.   height: 284rpx;
    36.   background-color: #c34c24;
    37.   clip: rect(0px, 284rpx, 284rpx, 142rpx);
    38.   // border-radius: 50%;
    39.  
    40.   .box1 {
    41.     position: absolute;
    42.     top: 0;
    43.     width: 284rpx;
    44.     height: 284rpx;
    45.     background-color: #5a4600;
    46.     clip: rect(0px, 284rpx, 284rpx, 142rpx);
    47.     border-radius: 50%;
    48.     // transform: rotate(60deg);
    49.   }
    50. }

     第二步： 调整下参数； 再调下颜色

    1. <template>
    2.   <view class="process">
    3.  
    4.     <view class="box0-parent">
    5.       <view class="box0" :style="box0Style">
    6.       </view>
    7.     </view>
    8.     <view class="box1-parent">
    9.       <view class="box1" :style="box1Style">
    10.       </view>
    11.     </view>
    12.  
    13.     <view class="input-range">
    14.       <text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text>
    15.       <slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
    16.         backgroundColor="#000000" block-color="#8A6DE9"></slider>
    17.     </view>
    18.  
    19.  
    20.   </view>
    21.  
    22. </template>
    23.  
    24. <script>
    25.  
    26.   export default {
    27.     data() {
    28.       return {
    29.         percent: 30,
    30.       }
    31.     },
    32.     computed: {
    33.       box0Style() {
    34.         if (this.percent >= 50) {
    35.           return `transform: rotate(${180 + this.percent*3.6}deg)`
    36.         } else {
    37.           return ``
    38.         }
    39.       },
    40.       box1Style() {
    41.         if (this.percent <= 50) {
    42.           return `transform: rotate(${this.percent*3.6}deg)`
    43.         } else {
    44.           return `display: none;`
    45.         }
    46.       }
    47.     },
    48.     methods: {
    49.       onChange(value) {
    50.         // console.log(value.detail.value)
    51.         this.percent = value.detail.value
    52.       }
    53.     }
    54.   }
    55. </script>
    56.  
    57. <style lang="scss" scoped>
    58.   .process {
    59.     width: 100%;
    60.  
    61.     display: flex;
    62.     flex-direction: column;
    63.     justify-content: center;
    64.     align-items: center;
    65.  
    66.  
    67.     .input-range {
    68.       position: absolute;
    69.       top: 980rpx;
    70.       width: 300rpx;
    71.     }
    72.  
    73.     .box0-parent {
    74.       position: absolute;
    75.       top: 580rpx;
    76.       width: 284rpx;
    77.       height: 284rpx;
    78.       background-color: #dd2124;
    79.       clip: rect(0px, 142rpx, 284rpx, 0px);
    80.  
    81.       // border-radius: 50%;
    82.       .box0 {
    83.         position: absolute;
    84.         top: 0;
    85.         width: 284rpx;
    86.         height: 284rpx;
    87.         //background-color: #2C405A;
    88.         background-color: #2168F9;
    89.         clip: rect(0px, 142rpx, 284rpx, 0px);
    90.         border-radius: 50%;
    91.       }
    92.     }
    93.  
    94.     .box1-parent {
    95.       position: absolute;
    96.       top: 580rpx;
    97.       width: 284rpx;
    98.       height: 284rpx;
    99.       //background-color: #c34c24;
    100.       background-color: #dd2124;
    101.       // background-color: #2168F9;
    102.       clip: rect(0px, 284rpx, 284rpx, 142rpx);
    103.       // border-radius: 50%;
    104.  
    105.       .box1 {
    106.         position: absolute;
    107.         top: 0;
    108.         width: 284rpx;
    109.         height: 284rpx;
    110.         // background-color: #5a4600;
    111.         background-color: #2168F9;
    112.         clip: rect(0px, 284rpx, 284rpx, 142rpx);
    113.         border-radius: 50%;
    114.         // transform: rotate(60deg);
    115.       }
    116.     }
    117.  
    118.   }
    119. </style>

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

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

    第二种实现方式

    使用的是 canvas 中的 arc  （画弧线来实现的）

    uni.createCanvasContexthttps://uniapp.dcloud.io/api/canvas/CanvasContext.html

    1.  
    2. <canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId">
    3. </canvas>
    4.  
    5. methods: {
    6.   onChange(value) {
    7.     // console.log(value.detail.value)
    8.     this.percent = value.detail.value
    9.     this.drawCircleByProgress()
    10.   },
    11.   drawCircleByProgress(){
    12.     // 表示进度的两端为圆形  目前没有找到只设置一段的方式
    13.     this.canvasContent.setLineCap('round'); //圆形     
    14.     this.canvasContent.setLineCap('square'); //方形
    15.     // 设置线条的宽度和颜色
    16.     this.canvasContent.setLineWidth(uni.upx2px(30));
    17.     this.canvasContent.setStrokeStyle('#ff0000');
    18.           
    19.     let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
    20.     
    21.     this.canvasContent.beginPath();
    22.     // 半径为整个canvas宽度的一半
    23.     let radius = uni.upx2px(284) / 2;
    24.     this.canvasContent.arc(radius, radius, radius - uni.upx2px(30), this.startAngle, endAngle, false);
    25.     this.canvasContent.stroke();
    26.     
    27.     this.canvasContent.draw();
    28.   }
    29. }
    30.  
    31. .canvas-content{
    32.   width: 284rpx;
    33.   height: 284rpx;
    34.   background-color: #059cdd;
    35. }

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

    1. drawCircleByProgress() {
    2.   // 表示进度的两端为圆形  目前没有找到只设置一段的方式
    3.   this.canvasContent.setLineCap('round'); //圆形     
    4.   this.canvasContent.setLineCap('square'); //方形
    5.  
    6.   let width = uni.upx2px(30)
    7.  
    8.   // 设置线条的宽度和颜色
    9.   this.canvasContent.setLineWidth(width);
    10.   this.canvasContent.setStrokeStyle('#ff0000');
    11.  
    12.  
    13.   // 画圆环
    14.   let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
    15.   this.canvasContent.beginPath();
    16.   // 半径为整个canvas宽度的一半
    17.   let radius = uni.upx2px(284) / 2;
    18.   this.canvasContent.arc(radius, radius, radius - width, this.startAngle, endAngle, false);
    19.   this.canvasContent.stroke();
    20.  
    21.  
    22.  
    23.   //原点要在 圆弧前面一点点的位置 所有这个加了 0.1；
    24.   let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
    25.   let p0y = radius + Math.sin(endAngle + .1) * (radius - width)
    26.   // 画圆球
    27.   this.canvasContent.beginPath()
    28.   this.canvasContent.arc(p0x, p0y, width / 2, 0, 2 * Math.PI)
    29.   this.canvasContent.setFillStyle('#F0AD4E');
    30.   this.canvasContent.fill()
    31.   // 画白色圆球
    32.   this.canvasContent.beginPath()
    33.   this.canvasContent.arc(p0x, p0y, width * 0.4, 0, 2 * Math.PI)
    34.   this.canvasContent.setFillStyle('#FFFFFF');
    35.   this.canvasContent.fill()
    36.  
    37.   this.canvasContent.draw();
    38. }

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

    完整代码：

    1. <template>
    2.   <view class="process">
    3.  
    4.     <canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId">
    5.     </canvas>
    6.  
    7.     <view class="box0-parent">
    8.       <view class="box0" :style="box0Style">
    9.       </view>
    10.     </view>
    11.     <view class="box1-parent">
    12.       <view class="box1" :style="box1Style">
    13.       </view>
    14.     </view>
    15.     <view class="input-range">
    16.       <text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text>
    17.       <slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
    18.         backgroundColor="#000000" block-color="#8A6DE9"></slider>
    19.     </view>
    20.  
    21.   </view>
    22. </template>
    23.  
    24. <script>
    25.   export default {
    26.     data() {
    27.       return {
    28.         percent: 30,
    29.         canvasId: 'canvasId',
    30.         canvasContent: null,
    31.         startAngle: -Math.PI / 2, //canvas画圆的起始角度，默认为3点钟方向即90度 方向，定位位到12位置 0度
    32.       }
    33.     },
    34.     computed: {
    35.       box0Style() {
    36.         if (this.percent >= 50) {
    37.           return `transform: rotate(${180 + this.percent*3.6}deg)`
    38.         } else {
    39.           return ``
    40.         }
    41.       },
    42.       box1Style() {
    43.         if (this.percent <= 50) {
    44.           return `transform: rotate(${this.percent*3.6}deg)`
    45.         } else {
    46.           return `display: none;`
    47.         }
    48.       }
    49.     },
    50.     onShow() {
    51.       this.canvasContent = uni.createCanvasContext(this.canvasId, this)
    52.       this.drawCircleByProgress()
    53.     },
    54.     methods: {
    55.       onChange(value) {
    56.         // console.log(value.detail.value)
    57.         this.percent = value.detail.value
    58.         this.drawCircleByProgress()
    59.       },
    60.       drawCircleByProgress() {
    61.         // 表示进度的两端为圆形  目前没有找到只设置一段的方式
    62.         this.canvasContent.setLineCap('round'); //圆形     
    63.         this.canvasContent.setLineCap('square'); //方形
    64.  
    65.         let width = uni.upx2px(30)
    66.  
    67.         // 设置线条的宽度和颜色
    68.         this.canvasContent.setLineWidth(width);
    69.         this.canvasContent.setStrokeStyle('#ff0000');
    70.  
    71.         let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
    72.  
    73.         this.canvasContent.beginPath();
    74.         // 半径为整个canvas宽度的一半
    75.         let radius = uni.upx2px(284) / 2;
    76.         this.canvasContent.arc(radius, radius, radius - width, this.startAngle, endAngle, false);
    77.         this.canvasContent.stroke();
    78.  
    79.         //原点要在 圆弧前面一点点的位置 所有这个加了 0.1；
    80.         let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
    81.         let p0y = radius + Math.sin(endAngle + .1) * (radius - width)
    82.  
    83.  
    84.         this.canvasContent.beginPath()
    85.         this.canvasContent.arc(p0x, p0y, width / 2, 0, 2 * Math.PI)
    86.         this.canvasContent.setFillStyle('#F0AD4E');
    87.         this.canvasContent.fill()
    88.  
    89.         this.canvasContent.beginPath()
    90.         this.canvasContent.arc(p0x, p0y, width * 0.4, 0, 2 * Math.PI)
    91.         this.canvasContent.setFillStyle('#FFFFFF');
    92.         this.canvasContent.fill()
    93.  
    94.         this.canvasContent.draw();
    95.       }
    96.     }
    97.   }
    98. </script>
    99.  
    100. <style lang="scss" scoped>
    101.   .process {
    102.     width: 100%;
    103.  
    104.     display: flex;
    105.     flex-direction: column;
    106.     justify-content: center;
    107.     align-items: center;
    108.  
    109.     .canvas-content {
    110.       width: 284rpx;
    111.       height: 284rpx;
    112.       background-color: #059cdd;
    113.     }
    114.  
    115.     .input-range {
    116.       position: absolute;
    117.       top: 750rpx;
    118.       width: 300rpx;
    119.     }
    120.  
    121.     .box0-parent {
    122.       position: absolute;
    123.       top: 380rpx;
    124.       width: 284rpx;
    125.       height: 284rpx;
    126.       background-color: #dd2124;
    127.       clip: rect(0px, 142rpx, 284rpx, 0px);
    128.  
    129.       // border-radius: 50%;
    130.       .box0 {
    131.         position: absolute;
    132.         top: 0;
    133.         width: 284rpx;
    134.         height: 284rpx;
    135.         //background-color: #2C405A;
    136.         background-color: #2168F9;
    137.         clip: rect(0px, 142rpx, 284rpx, 0px);
    138.         border-radius: 50%;
    139.       }
    140.     }
    141.  
    142.     .box1-parent {
    143.       position: absolute;
    144.       top: 380rpx;
    145.       width: 284rpx;
    146.       height: 284rpx;
    147.       //background-color: #c34c24;
    148.       background-color: #dd2124;
    149.       // background-color: #2168F9;
    150.       clip: rect(0px, 284rpx, 284rpx, 142rpx);
    151.  
    152.       // border-radius: 50%;
    153.       .box1 {
    154.         position: absolute;
    155.         top: 0;
    156.         width: 284rpx;
    157.         height: 284rpx;
    158.         // background-color: #5a4600;
    159.         background-color: #2168F9;
    160.         clip: rect(0px, 284rpx, 284rpx, 142rpx);
    161.         border-radius: 50%;
    162.         // transform: rotate(60deg);
    163.       }
    164.     }
    165.  
    166.   }
    167. </style>

  • 相关阅读:
    web基础和http协议
    mysql的约束和表关系
    升降巡检机器人简介
    redis缓存击穿、穿透、雪崩
    【市场解读】掌握MT4外汇交易的核心技巧
    [C/C++]数据结构 链表OJ题:随机链表的复制
    Lesson 04 模板入门
    理论与实战：一篇看懂Python词云
    性能测试--线程的监控
    解析生成式人工智能 | 它真的有这么强大吗？
  • 原文地址：https://blog.csdn.net/nicepainkiller/article/details/125327485