基于canvas 2D实现微信小程序自定义组件-环形进度条

var windWidth = wx.getSystemInfoSync().windowWidth; //var ctx; Component({ /** * 组件的属性列表 */ properties: { //渲染名称 name: { type: String, value: "-default-", observer: function (newVal, oldVal, change) { //console.log(newVal+":"+oldVal+":"+change) //console.log('执行初始化...') this.drawCanvasRing(); } }, //画布的宽度 默认占屏幕宽度的0.4倍 canvasWidth: { type: Number, value: windWidth * 0.4 }, //线条宽度 默认10 lineWidth: { type: Number, value: 10 }, //线条颜色 lineColor: { type: String, value: "#3696FA" }, //标题 默认“完成率” title: { type: String, value: "完成率" }, //当前的值 默认45 value: { type: Number, value: 0, observer: function (newVal, oldVal, change) { //console.log(newVal, oldVal, change); //this.onreset();//数值变化是所有重绘 if (this.data.ctx2d) { this._setPercent(newVal, oldVal); } else { setTimeout(() => { this._setPercent(newVal, oldVal); }, 500); } } }, //值的颜色 默认"" valueColor: { type: String, value: "#333" }, //值的字体的大小颜色 默认28rpx f_size: { type: Number, value: 14 }, f_weight: { type: String, value: "500" }, //最大值 默认100 maxValue: { type: Number, value: 100 }, //最小值 默认0 minValue: { type: Number, value: 0 }, //当前值的后缀名 suffix: { type: null, value: "%" }, //从什么角度开始 0~360之间 （12点方向为0,18点方向为180,0点方向为360） startDegree: { type: Number, value: 0 }, isColours: { type: Boolean, value: false } }, /** * 组件的初始数据 */ data: { canvasWidth: ' windWidth * 0.4', show_tip: true, ctx2d: null }, /** * 组件的方法列表 */ methods: { drawCanvasRing() { //没标题的时候去掉margin-top的值 // if (this.data.title.replace(/(^\s*)|(\s*$)/g, "").length == 0) { // this.setData({ // show_tip: false // }) // } //canvas 2d const query = wx.createSelectorQuery().in(this); query.select('#myCanvas_circle_progress_1024') .fields({ node: true, size: true }) .exec(this.init.bind(this)); //console.log(2222222222222); }, init(res) { const canvas = res[0].node; canvas.requestAnimationFrame(() => { console.log('ready') //callback && callback(); }) const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr var ctx = canvas.getContext('2d'); this.data.ctx2d = ctx; ctx.scale(dpr, dpr); //绘制画布 var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径 ctx.translate(circle_r, circle_r); this._drawCircle(); }, _drawCircle: function () { console.log("开始绘图"); // 大小值的计算 var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径 var maxValue = this.data.maxValue; //最大值 var minValue = this.data.minValue; //最小值 var value = this.data.value; //当前的值 var lineWidth = this.data.lineWidth; //线条宽度 //灰色圆弧 var ctx = this.data.ctx2d; ctx.beginPath(); ctx.strokeStyle = "#ebebeb"; ctx.lineWidth = lineWidth; ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true); ctx.stroke(); ctx.closePath(); }, _setPercent: function (per, old) { var ctx = this.data.ctx2d; if (!ctx) { return; } //ctx.createLinearGradient(x0, y0, x1, y1); //console.log("开始进度"); // 大小值的计算 var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径 var startDegree = this.data.startDegree; //从什么角度开始 var maxValue = this.data.maxValue; //最大值 var minValue = this.data.minValue; //最小值 //var value = this.data.value; //当前的值 var lineColor = this.data.lineColor; //线条颜色 var lineWidth = this.data.lineWidth; //线条宽度 var percent = 360 * ((this.data.value - minValue) / (maxValue - minValue)); //计算结果 var direction = false; //默认顺时针 //根据差值计算 if (per > old) { //绘制彩色 if (this.data.isColours) { //设置渐变色 var my_gradient = ctx.createLinearGradient(0, 0, 200, 0); my_gradient.addColorStop(0, this.data.lineColor); my_gradient.addColorStop(0.5, "red"); my_gradient.addColorStop(1, "#FA6400"); lineColor = my_gradient; } startDegree = 360 * ((old - minValue) / (maxValue - minValue)); percent = 360 * (((per - old) - minValue) / (maxValue - minValue)) } else { //绘制灰色,反向绘制 lineColor = "#ebebeb"; direction = true; startDegree = 360 * ((old - minValue) / (maxValue - minValue)); percent = 360 * (((old - per) - minValue) / (maxValue - minValue)) } //console.log(startDegree+":"+percent); //绘制有色彩的圆弧 var currtnt_st = 0; //绘制进度 var step = 10; var span = 200 * step / (percent); //200ms完成绘制 //console.log(percent + ":" + span); var drawInterval = setInterval(() => { currtnt_st = currtnt_st + step; if (currtnt_st > percent) { currtnt_st = percent; } //console.log(st); ctx.beginPath(); ctx.strokeStyle = lineColor; //ctx.strokeStyle = lineColor; ctx.lineWidth = lineWidth; if (!direction) { ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, (startDegree + currtnt_st) * Math.PI / 180 - 0.5 * Math.PI, direction); } else { ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, ((startDegree - currtnt_st) * Math.PI / 180) - 0.5 * Math.PI, direction); } ctx.stroke(); ctx.closePath(); if (currtnt_st >= percent) { clearInterval(drawInterval); } }, span); } } })