uniapp圆环进度条组件

1.progress-circle 组件代码

<template><canvas :canvas-id="'progress'+id" :style="{width: sizeNum + 'px', height: sizeNum + 'px'}">canvas><slot>slot>
template><script>
export default {props: {id:{type: String,  },progressColor: { //进度颜色type: String,default: '#409EFF'},bgColor: {   //轨道颜色type: String,default: '#F9FAFB'},size: {   //整体大小type: Number,default: 100},strokeWidth: { //轨道宽度type: Number,default: 20},percent: {  //进度百分比type: Number,default: 0}},data(){return{sizeNum:this.size,  //最终的整体尺寸strokeWidthNum:this.strokeWidth,  //最终的轨道宽度数值}  },mounted() {this.drawProgress()},methods: {drawProgress() {		//尺寸与轨道宽度自适应处理	const screenWidth = uni.getSystemInfoSync().screenWidth;this.sizeNum=(this.size/750)*screenWidth	this.strokeWidthNum=(this.strokeWidth/750)*screenWidthconst ctx = uni.createCanvasContext(`progress${this.id}`, this)const centerX = this.sizeNum / 2const centerY = this.sizeNum / 2const radius = (this.sizeNum - this.strokeWidthNum) / 2const startAngle = -Math.PI / 2const endAngle = startAngle + (this.percent / 100) * 2 * Math.PI// 绘制背景圆ctx.beginPath()ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)ctx.setFillStyle('#FFFFFF')ctx.fill()// 绘制轨道圆环ctx.beginPath()ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)ctx.setLineWidth(this.strokeWidthNum)ctx.setStrokeStyle(this.bgColor)ctx.setLineCap('round')ctx.stroke()// 绘制进度圆环ctx.beginPath()ctx.arc(centerX, centerY, radius, startAngle, endAngle)ctx.setLineWidth(this.strokeWidthNum)ctx.setStrokeStyle(this.progressColor)ctx.setLineCap('round')ctx.stroke()ctx.draw(true)}},watch: {percent() {this.drawProgress()}}
}
script>

2.组件的使用

	<view class="progressBox"><progress-circle :percent="80" :size="168" progressColor="#4ADA88" id='a'><view class="centerTxt"><view class="num">80%view><view class="txt">正确率view>view>progress-circle>view>

	.progressBox {position: relative;width: 168rpx;height: 168rpx;margin: 0 auto;margin-top: 33rpx;}.centerTxt {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);.num {font-size: 30rpx;font-family: Arial;font-weight: bold;color: #38393A;}.txt {font-size: 22rpx;font-family: PingFang SC;font-weight: 400;color: #8A8B8B;margin-top: 10rpx;}}

3.效果图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！