<template>
<view class="zx-progress">
<canvas class="progress_bg" canvas-id="cpbg"></canvas>
<canvas class="progress_bar" canvas-id="cpbar"></canvas>
<view class="progress" >
<view class="progressbox" >
<image src="../../static/progress/progress1.png" mode="widthFix" class="img1"></image>
<image src="../../static/progress/progress2.png" mode="widthFix" class="img2"></image>
<image src="../../static/progress/progress3.png" mode="widthFix" class="img3"></image>
<image src="../../static/progress/progress4.png" mode="widthFix" class="img4"></image>
</view>
</view>
<view class="progress_text">
<p class="title">{{progress_txt}}%</p>
<p class="subtitle">{{progress_txt}}</p>
</view>
</view>
</template>
<script>
var that
export default {
name:"zx-progress",
props:{
//进度百分比
progress_per:{
type: Number,
default:90,
},
//文案
progress_txt:{
type: String,
default:'已使用空间',
},
//圆环颜色
progress_ring_color:{
type: String,
default:'#fff',
},
//进度颜色
progress_color:{
type: String,
default:'#00FFDD',
},
},
data() {
return {
//px和rpx比例
scale:0,
};
},
mounted: function() {
that = this
const system = uni.getSystemInfoSync()
this.scale = system.windowWidth / 750
this.drawProgressbg();
this.drawCircle(this.progress_txt); //参数为1-100
},
methods: {
drawProgressbg: function() {
// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
var ctx = uni.createCanvasContext('cpbg', this);
ctx.setLineWidth(4); // 设置圆环的宽度
ctx.setStrokeStyle(progress_ring_color); // 设置圆环的颜色
ctx.setLineCap('round'); // 设置圆环端点的形状
ctx.beginPath(); //开始一个新的路径
ctx.arc(130*this.scale,130*this.scale, 124*this.scale, 0,2*Math.PI, false);
//设置一个原点(110,110)，半径为100的圆的路径到当前路径
ctx.stroke(); //对当前路径进行描边
ctx.draw();
},
drawCircle: function(step) {
var ctx = uni.createCanvasContext('cpbar', this);
// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
var gradient = ctx.createLinearGradient(28, 55, 192, 55);
ctx.beginPath();
// 参数step 为绘制的百分比
step = (step * 0.01)+0.1;
let i =0.01
let time = setInterval(function(){
i+=0.01
if(i>step){
clearInterval(time)
}
gradient.addColorStop('0', progress_color);
gradient.addColorStop('1.0', progress_color);
ctx.setLineWidth(4);
ctx.setStrokeStyle(gradient);
ctx.setLineCap('round');
ctx.arc(130*that.scale,130*that.scale, 124*that.scale, -2*Math.PI*(0.1), -2*Math.PI*(i), true);
ctx.stroke();
ctx.draw();
},10)
}
}
}
</script>c
<style lang="scss">
.zx-progress{
position: relative;
width: 260rpx;
height: 260rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
// border: 1px solid #000;
border-radius: 50%;
.progress_bg {
position: absolute;
width: 260rpx;
height: 260rpx;
}
.progress_bar {
width: 260rpx;
height: 260rpx;
}
.progress_txt {
position: absolute;
font-size: 28rpx;
color: #999999;
}
.progress_info {
font-size: 36rpx;
padding-left: 16rpx;
letter-spacing: 2rpx;
font-size: 52rpx;
color: #333333;
}
.progress_dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #fb9126;
}
.progress{
position: absolute;
bottom: 60rpx;
left: 0;
.progressbox{
position: relative;
image{
width: 400rpx;
position: absolute;
top: 0;
left: -80px;
animation: myfirst 3s linear infinite alternate;
}
.img1{
animation-delay: 0s;
}
.img2{
animation-delay: 0.8s;
}
.img3{
animation-delay: 1.2s;
}
.img4{
animation-delay: 1.8s;
}
}
}
.progress_text{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
p{
flex:0 0 100%;
color: #fff;
}
.title{
font-size: 68rpx;
}
.subtitle{
font-size: 28rpx;
}
}
@keyframes myfirst
{
from {left: -80px;}
to {left: 0rpx;}
}
}
</style>
