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);
}
}
})
评论0