发布时间:2023-03-17 16:00
一个圆环的进度展示,这个圆环上开始位置 是齐口的,终点圆口,并且有一个圆;
列举了两种实现方式:
- 第一种 纯的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); } } 第二步: 调整下参数; 再调下颜色
{{percent}}% {{percent*3.6}} 然后加上蓝色底色,圆环换上白色;真理下就能得到这么的 圆环了;
至于 白色圆点 直接绝对定位于半圆, 随着半圆移动即可;每个半圆都有一个
使用的是 canvas 中的 arc (画弧线来实现的)
uni.createCanvasContexthttps://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(); }
真理下就能得到下面的例子了
完整代码:
{{percent}}% {{percent*3.6}}