// component/progress/progress.js
|
Component({
|
/**
|
* 组件的属性列表
|
*/
|
properties: {
|
progress: 100
|
},
|
|
/**
|
* 组件的初始数据
|
*/
|
data: {
|
progress_txt: '信用较差',
|
progress_txt_color1: '#f1fefc',
|
progress_txt_color2: '#b4f7ec',
|
count: 0, // 设置 计数器 初始为0
|
countTimer: null, // 设置 定时器 初始为null
|
x: 100,
|
y: 100,
|
r: 90,
|
},
|
|
ready: function () {
|
this.drawProgressbg();
|
},
|
|
observers: {
|
'progress': function (progress) {
|
if (progress) {
|
if (progress >= 90) {
|
this.setData({
|
progress_txt_color1: '#f2fff7',
|
progress_txt_color2: '#96f3bd',
|
progress_txt: '信用优秀'
|
})
|
} else if (progress >= 60) {
|
this.setData({
|
progress_txt_color1: '#f6f2e3',
|
progress_txt_color2: '#f6e59f',
|
progress_txt: '信用一般'
|
})
|
} else {
|
this.setData({
|
progress_txt_color1: '#fff6f6',
|
progress_txt_color2: '#f29696',
|
progress_txt: '信用较差'
|
})
|
}
|
} else {
|
this.setData({
|
progress_txt_color1: '#f1fefc',
|
progress_txt_color2: '#b4f7ec',
|
})
|
}
|
this.drawProgressCircle(progress / 100)
|
}
|
},
|
|
/**
|
* 组件的方法列表
|
*/
|
methods: {
|
//倒计时方法
|
countInterval: function () {
|
// 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
|
this.countTimer = setInterval(() => {
|
if (this.data.count <= 60) {
|
/* 绘制彩色圆环进度条
|
注意此处 传参 step 取值范围是0到2，
|
所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
|
*/
|
this.drawProgressCircle(this.data.count / (60 / 2));
|
this.setData({
|
progress_txt: (this.data.count++) + '%'
|
});
|
} else {
|
this.setData({
|
progress_txt: "加载完成"
|
});
|
clearInterval(this.countTimer);
|
}
|
}, 100)
|
},
|
/**
|
* 绘制灰色背景
|
*/
|
drawProgressbg: function () {
|
// 使用 wx.createContext 获取绘图上下文 context
|
var ctx = null;
|
var x = this.data.x
|
var y = this.data.y
|
var r = this.data.r
|
wx.createSelectorQuery().in(this)
|
.select("#canvasProgressbg")
|
.context(function (res) {
|
// console.log("节点实例：", res);
|
// 节点对应的 Canvas 实例。
|
ctx = res.context;
|
ctx.setLineWidth(8); // 设置圆环的宽度
|
ctx.setStrokeStyle('#EEEEEE'); // 设置圆环的颜色
|
ctx.setLineCap('round') // 设置圆环端点的形状
|
ctx.beginPath(); //开始一个新的路径
|
ctx.arc(x, y, r, Math.PI / 2, 1.5 * Math.PI, false);
|
ctx.stroke(); //对当前路径进行描边
|
ctx.beginPath(); //开始一个新的路径
|
ctx.setLineWidth(1); // 设置圆环的宽度
|
ctx.arc(x, y, r - 10, Math.PI / 2, 1.5 * Math.PI, false);
|
ctx.stroke()
|
|
ctx.setStrokeStyle('#76ECD3');
|
ctx.setFillStyle('#76ECD3')
|
for (let i = 0; i < 5; i++) {
|
var radian = Math.PI / 4 * i
|
var x1 = x - Math.sin(radian) * (r - 10)
|
var y1 = y + Math.cos(radian) * (r - 10)
|
var x2 = x - Math.sin(radian) * (r - 10 - 4)
|
var y2 = y + Math.cos(radian) * (r - 10 - 4)
|
var x3 = x - Math.sin(radian) * (r - 10 - 12)
|
var y3 = y + Math.cos(radian) * (r - 10 - 12)
|
ctx.beginPath(); //开始一个新的路径
|
ctx.setLineWidth(1); // 设置宽度
|
ctx.moveTo(x1, y1)
|
ctx.lineTo(x2, y2)
|
ctx.stroke()
|
if (i % 2 == 0) {
|
ctx.beginPath(); //开始一个新的路径
|
ctx.setFontSize(10)
|
var text = i / 4 * 100 + ''
|
var metrics = ctx.measureText(text)
|
var w = metrics.width
|
ctx.fillText(text, x3 - w / 2, y3 + 4)
|
|
}
|
}
|
ctx.draw();
|
})
|
.exec();
|
|
|
},
|
/**
|
* 绘制小程序进度
|
* @param {*} step
|
*/
|
drawProgressCircle: function (step) {
|
let ctx = null;
|
var x = this.data.x
|
var y = this.data.y
|
var r = this.data.r
|
wx.createSelectorQuery().in(this)
|
.select("#canvasProgress")
|
.context(function (res) {
|
// console.log("节点实例：", res); // 节点对应的 Canvas 实例。
|
ctx = res.context;
|
// 设置渐变
|
var gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
gradient.addColorStop("0", "#96f3bd");
|
gradient.addColorStop("0.1", "#f6e59f");
|
gradient.addColorStop("0.4", "#f6e59f");
|
gradient.addColorStop("1.0", "#f29696");
|
|
ctx.setLineWidth(10);
|
ctx.setStrokeStyle(gradient);
|
ctx.setLineCap('round')
|
ctx.beginPath();
|
// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
|
var start = Math.PI / 2
|
ctx.arc(x, y, r, start, step * Math.PI + start, false);
|
ctx.stroke();
|
ctx.draw()
|
})
|
.exec();
|
|
},
|
}
|
})
|
