wardrobe/tm-vuetify/components/tm-propressRound/tm-propressRound.vue

<template>
	<view class="tm-propressRound d-inline-block">
		<view class="tm-propressRound-text" :style="{
				width:size+'px',
				height:size+'px'
			}">
			<slot name="default" :value="value">
				<text class="text-black" :class="[black?'text-white':'']">{{value}}%</text>
			</slot>
		</view>
		<view class="tm-propressRound-rk">
			<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
			<canvas :canvas-id="cid" :id="cid"
			:style="{
				width:size+'px',
				height:size+'px'
			}"
			type="2d"
			></canvas>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN || MP-ALIPAY  -->
			<canvas :canvas-id="cid" :id="cid"
			:style="{
				width:size+'px',
				height:size+'px'
			}"
			></canvas>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	/**
	 * 环形进度条
	 * @property {Number} value = [] 默认0，推荐使用v-model赋值。value.sync等同。
	 * @property {Number} size = [] 默认100，圆环大小。
	 * @property {Number} line-width = [] 默认6，圆环线条宽。
	 * @property {Array} color = [] 默认['#FF9800','#E91E63','#FF5722']，激活颜色
	 * @property {String} bgcolor = [] 默认'#EEEEEE'，背景颜色
	 * @property {Boolea} semicircle = [] 默认 false，是否半圆
	 * @property {Function} input 变化时的值。
	 * @property {Function} change 变化时的值。
	 * @example <tm-propressRound v-model="checked"></tm-propressRound>
	 */
	export default {
		name:"tm-propressRound",
		model:{
			prop:"value",
			event:"input"
		},
		props:{
			black:{
				type:Boolean,
				default:false
			},
			size:{
				type:Number,
				default:100
			},
			lineWidth:{
				type:Number,
				default:10
			},
			value:{
				type:Number,
				default:0
			},
			color:{
				type:Array,
				default:()=>{
					return ['rgb(255,152,0)','rgb(233,30,99)','rgb(255,87,34)']
				}
			},
			bgcolor:{
				type:String,
				default:'rgb(238,238,238)'
			},
			semicircle:{
				type:Boolean|String,
				default:false
			}
		},
		data() {
			return {
				ctx:null,
				timid:null,
				jishu:0,
				cid:'fdd_psd',
				is2d:false
			};
		},
		computed:{
			
		},
		created() {
			// #ifdef H5 || APP-VUE || APP-PLUS
			this.cid = uni.$tm.guid();
			// #endif
			// #ifdef MP-WEIXIN || MP-ALIPAY
			this.is2d=true;
			// #endif
		},
		mounted() {
			
			this.$nextTick(function(){
				this.inits();
			})
		},
		destroyed() {
			clearInterval(this.timid)
		},
		watch:{
			
			value:function(newval,oldval){
				if(newval < 0){
					this.$emit("input",0)
					this.$emit("update:value",0)
					this.$emit("change",0)
					return;
				}else if(newval >100){
					this.$emit("input",100)
					this.$emit("update:value",100)
					this.$emit("change",100)
					return;
				}
				this.$emit("input",newval)
				this.$emit("update:value",newval)
				this.$emit("change",newval)
				let blv = newval - oldval;
				if(newval>=100){
					blv = 100 - oldval;
				}
				
				if(blv >= 0 ){
					this.startHuiZhi(blv,oldval,true)
				}else{
					if(newval<=0){
						blv = oldval;
					}
					
					this.startHuiZhi(Math.abs(blv),oldval,false)
				}
			}
		},
		methods: {
			inits(){
				let t = this;
				if(this.is2d){
					const query = wx.createSelectorQuery().in(this)
					query.select('#'+this.cid)
					  .node((res) => {
							const canvas = res.node
							const ctx = canvas.getContext('2d')
							const dpr = uni.getSystemInfoSync().pixelRatio
							canvas.width = res.node._width * dpr
							canvas.height = res.node._height * dpr
							ctx.scale(dpr, dpr)
							t.ctx = ctx;
							t.creatShape();
							this.startHuiZhi(this.value,0,true)
					  })
					  .exec()
				}else{
					this.ctx = uni.createCanvasContext(this.cid,this)
					this.creatShape();
					this.startHuiZhi(this.value,0,true)
				}
			},
			startHuiZhi(val,oldv,type){
				clearInterval(this.timid);
				let i = 0;
				let t = this;

				// #ifdef H5
					this.timid = setInterval(()=>{
						i += 1;
						if(i>=val){
							clearInterval(t.timid);
							return;
						}
						if(type){
							t.huizhired(oldv+i,type);
						}else{
							t.huizhired(oldv-i,type);
						}
					},5)
				// #endif
				// #ifndef H5
					if(type){
						t.huizhired(val+oldv,type);
					}else{
						t.huizhired(oldv-val,type);
					}
				// #endif
			},
			// 重新绘制。
			creatShape() {
				
				if(!this.ctx) return;
				let ctx= this.ctx;
				let x,y,r ;
				x = y = this.size / 2;
				r = (this.size - this.lineWidth*2) / 2
				if(this.is2d){
					ctx.beginPath()
					ctx.lineCap='round';
					ctx.lineWidth=this.lineWidth-1;
					ctx.strokeStyle=this.bgcolor;
					if(this.semicircle){
						ctx.arc(x, y, r, Math.PI, 0)
					}else{
						ctx.arc(x, y, r, -90, 2 * Math.PI)
					}
					ctx.stroke()
				}else{
					ctx.beginPath()
					ctx.setLineCap('round')
					ctx.setLineWidth(this.lineWidth-1)
					ctx.setStrokeStyle(this.bgcolor)
					if(this.semicircle){
						ctx.arc(x, y, r, Math.PI, 0)
					}else{
						ctx.arc(x, y, r, -90, 2 * Math.PI)
					}
					ctx.stroke()
					ctx.draw(true)
				}
				
				
			},
			huizhired(end=0,type){
				if(!this.ctx) return;
				let ctx = this.ctx;
				
				if(end>=100) end = 100;
				if(end<=0) end = 0;
				let bl = end * 3.6;
				
				bl = bl-90
				let x,y,r ;
				x = y = this.size / 2;
				r = (this.size - this.lineWidth*2) / 2
				if(this.is2d){
					
					ctx.beginPath()
					ctx.lineCap='round';
					ctx.lineWidth=type?this.lineWidth-1:this.lineWidth+1;
					ctx.strokeStyle=this.bgcolor
					if(this.semicircle){
						ctx.arc(x, y, r, Math.PI, 0)
					}else{
						ctx.arc(x, y, r, -90, 2 * Math.PI)
					}
					ctx.stroke()
					
					ctx.beginPath()
					ctx.lineCap='round';
					ctx.lineWidth=this.lineWidth
					var grd=ctx.createLinearGradient(x,0,0,2*x);
					let colorl = this.color.length;
					
					if(colorl==1){
						grd.addColorStop(1,this.color[0]);
					}else if(colorl>1){
						for(let i=0;i<colorl;i++){
							grd.addColorStop(i/(colorl-1),this.color[i]);
						}
					}
					ctx.strokeStyle=grd
					
					if(this.semicircle){
						let val = this.value;
						val = val <=0?0:val;
						val = val>=100?100:val;
						bl =  -(Math.PI-this.value/100 * Math.PI)
						ctx.arc(x, y, r, Math.PI, bl)
					}else{
						ctx.arc(x, y, r, -90 * (Math.PI / 180), bl * (Math.PI / 180))
					}
					ctx.stroke()
				}else{
					
					ctx.beginPath()
					ctx.setLineCap('round')
					ctx.setLineWidth(type?this.lineWidth-1:this.lineWidth+1)
					ctx.setStrokeStyle(this.bgcolor)
					if(this.semicircle){
						ctx.arc(x, y, r, Math.PI, 0)
					}else{
						ctx.arc(x, y, r, -90, 2 * Math.PI)
					}
					
					ctx.stroke()
					ctx.draw(true)
					
					ctx.beginPath()
					ctx.setLineCap('round')
					ctx.setLineWidth(this.lineWidth)
					var grd=ctx.createLinearGradient(x,0,0,2*x);
					let colorl = this.color.length;
					
					if(colorl==1){
						grd.addColorStop(1,this.color[0]);
					}else if(colorl>1){
						for(let i=0;i<colorl;i++){
							grd.addColorStop(i/(colorl-1),this.color[i]);
						}
					}
					ctx.setStrokeStyle(grd)
					if(this.semicircle){
						let val = this.value;
						val = val <=0?Math.PI:val;
						val = val>=100?100:val;
						bl =  -(Math.PI-this.value/100 * Math.PI)
						bl = Math.abs(bl)>=Math.PI?Math.PI:bl;
						ctx.arc(x, y, r, Math.PI, bl)
					}else{
						ctx.arc(x, y, r, -90 * (Math.PI / 180), bl * (Math.PI / 180))
					}
					ctx.stroke()
					ctx.draw(true)
				}
				
				
				
			},

		},
	}
</script>

<style lang="scss" scoped>
.tm-propressRound{
	position: relative;
	.tm-propressRound-text{
		position: absolute;

		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
}
</style>