大佬教程收集整理的这篇文章主要介绍了圆环进度条 两种实现方式,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一个圆环的进度展示c;这个圆环上开始位置 是齐口的c;终点圆口c;并且有一个圆;
列举了两种实现方式:
理论上:纯css 两个半圆在相应的取值范围内 旋转c;旋转的时候被父对象 遮罩剩余的部分
第一步: 两个半圆在旋转c;旋转时候被父对象 clip 掉 剩余部分c;两个红色底就是两个半圆的父元素c;红色第里面的两个深色块就是 将要旋转的 元素;
<view class="box0-parent"> <view class="box0" :style="box0Style"> </view> </view> <view class="box1-parent"> <view class="box1" :style="box1Style"> </view> </view> .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); } }
第二步: 调整下参数; 再调下颜色
<template> <view class="process"> <view class="box0-parent"> <view class="box0" :style="box0Style"> </view> </view> <view class="box1-parent"> <view class="box1" :style="box1Style"> </view> </view> <view class="input-range"> <text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text> <slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33" BACkgroundColor="#000000" block-color="#8A6DE9"></slider> </view> </view> </template> <script> export default { data() { return { percent: 30, } }, computed: { box0Style() { if (this.percent >= 50) { return `transform: rotate(${180 + this.percent*3.6}deg)` } else { return `` } }, box1Style() { if (this.percent <= 50) { return `transform: rotate(${this.percent*3.6}deg)` } else { return `display: none;` } } }, methods: { onChange(value) { // console.log(value.detail.value) this.percent = value.detail.value } } } </script> <style lang="scss" scoped> .process { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; .input-range { position: absolute; top: 980rpx; width: 300rpx; } .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; BACkground-color: #2168F9; clip: rect(0px, 142rpx, 284rpx, 0pX); border-radius: 50%; } } .box1-parent { position: absolute; top: 580rpx; width: 284rpx; height: 284rpx; //BACkground-color: #c34c24; BACkground-color: #dd2124; // BACkground-color: #2168F9; clip: rect(0px, 284rpx, 284rpx, 142rpX); // border-radius: 50%; .box1 { position: absolute; top: 0; width: 284rpx; height: 284rpx; // BACkground-color: #5a4600; BACkground-color: #2168F9; clip: rect(0px, 284rpx, 284rpx, 142rpX); border-radius: 50%; // transform: rotate(60deg); } } } </style>
然后加上蓝色底色c;圆环换上白色;真理下就能得到这么的 圆环了;
至于 白色圆点 直接绝对定位于半圆c; 随着半圆移动即可;每个半圆都有一个
使用的是 canvas 中的 arc (画弧线来实现的)
uni.createCanvasContexthttps://uniapp.dcloud.io/api/canvas/CanvasContext.html
<canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId"> </canvas> 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(); }
真理下就能得到下面的例子了
完整代码:
<template>
<view class="process">
<canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId">
</canvas>
<view class="box0-parent">
<view class="box0" :style="box0Style">
</view>
</view>
<view class="box1-parent">
<view class="box1" :style="box1Style">
</view>
</view>
<view class="input-range">
<text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text>
<slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
BACkgroundColor="#000000" block-color="#8A6DE9"></slider>
</view>
</view>
</template>
<script>
export default {
data() {
return {
percent: 30,
canvasId: 'canvasId',
canvasContent: null,
startAngle: -Math.PI / 2, //canvas画圆的起始角度c;默认为3点钟方向即90度 方向c;定位位到12位置 0度
}
},
computed: {
box0Style() {
if (this.percent >= 50) {
return `transform: rotate(${180 + this.percent*3.6}deg)`
} else {
return ``
}
},
box1Style() {
if (this.percent <= 50) {
return `transform: rotate(${this.percent*3.6}deg)`
} else {
return `display: none;`
}
}
},
onShow() {
this.canvasContent = uni.createCanvasContext(this.canvasId, this)
this.drawCircleByProgress()
},
methods: {
onChange(value) {
// console.log(value.detail.value)
this.percent = value.detail.value
this.drawCircleByProgress()
},
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();
}
}
}
</script>
<style lang="scss" scoped>
.process {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.canvas-content {
width: 284rpx;
height: 284rpx;
BACkground-color: #059cdd;
}
.input-range {
position: absolute;
top: 750rpx;
width: 300rpx;
}
.box0-parent {
position: absolute;
top: 380rpx;
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;
BACkground-color: #2168F9;
clip: rect(0px, 142rpx, 284rpx, 0pX);
border-radius: 50%;
}
}
.box1-parent {
position: absolute;
top: 380rpx;
width: 284rpx;
height: 284rpx;
//BACkground-color: #c34c24;
BACkground-color: #dd2124;
// BACkground-color: #2168F9;
clip: rect(0px, 284rpx, 284rpx, 142rpX);
// border-radius: 50%;
.box1 {
position: absolute;
top: 0;
width: 284rpx;
height: 284rpx;
// BACkground-color: #5a4600;
BACkground-color: #2168F9;
clip: rect(0px, 284rpx, 284rpx, 142rpX);
border-radius: 50%;
// transform: rotate(60deg);
}
}
}
</style>
以上是大佬教程为你收集整理的圆环进度条 两种实现方式全部内容,希望文章能够帮你解决圆环进度条 两种实现方式所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。