// 本文件由FirstUI授权予四川政采招投标咨询有限公司（会员ID： 163，营业执照号：9 1 5101 313 3 2006 193 K）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
// #ifdef MP
|
|
// #ifdef MP-WEIXIN
|
export default {}
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
export default {
|
data() {
|
return {
|
context: null,
|
start: 0
|
}
|
},
|
watch: {
|
percent(val) {
|
setTimeout(() => {
|
this.init();
|
}, 50)
|
},
|
w(val) {
|
setTimeout(() => {
|
this.init();
|
}, 50)
|
},
|
strokeWidth(val) {
|
setTimeout(() => {
|
this.init();
|
}, 50)
|
}
|
},
|
mounted() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.init();
|
}, 50)
|
})
|
},
|
methods: {
|
//初始化绘制
|
init(init) {
|
let start = this.activeMode === 'backwards' ? 0 : this.start;
|
start = start > this.percent ? 0 : start;
|
this.drawCircle(start);
|
},
|
//默认背景
|
drawDefaultCircle(ctx) {
|
let sw = Number(this.strokeWidth);
|
// #ifdef MP-ALIPAY
|
sw = sw * 4
|
// #endif
|
// #ifndef MP-KUAISHOU
|
ctx.setLineWidth(sw);
|
ctx.setStrokeStyle(this.background);
|
// #endif
|
// #ifdef MP-KUAISHOU
|
ctx.lineWidth = sw;
|
ctx.strokeStyle = this.background;
|
// #endif
|
let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
|
this.drawArc(ctx, eAngle, true);
|
},
|
drawCircle(start) {
|
let ctx = this.context;
|
if (!ctx) {
|
ctx = uni.createCanvasContext(this.circleId, this);
|
this.context = ctx;
|
}
|
//绘制默认背景
|
this.defaultShow && this.drawDefaultCircle(ctx)
|
let sw = Number(this.strokeWidth)
|
// #ifdef MP-ALIPAY
|
sw = sw * 4
|
// #endif
|
// #ifdef MP-KUAISHOU
|
ctx.lineWidth = sw;
|
// #endif
|
|
let gradient = this.foreground || this.primaryColor;
|
// #ifndef MP-KUAISHOU
|
ctx.setLineWidth(sw);
|
if (this.gradient) {
|
gradient = ctx.createLinearGradient(0, 0, Number(this.w), 0);
|
gradient.addColorStop(0, this.gradient);
|
gradient.addColorStop(1, this.foreground || this.primaryColor);
|
}
|
ctx.setStrokeStyle(gradient);
|
// #endif
|
|
// #ifdef MP-KUAISHOU
|
ctx.strokeStyle = gradient;
|
// #endif
|
|
let percentage = Number(this.percent)
|
if (percentage > 0) {
|
start += Number(this.speed);
|
start = start > percentage ? percentage : start;
|
}
|
if (this.show) {
|
let si = Number(this.size)
|
// #ifdef MP-ALIPAY
|
si = si * 4
|
// #endif
|
// #ifndef MP-KUAISHOU
|
ctx.setFontSize(si);
|
ctx.setFillStyle(this.color || this.primaryColor);
|
ctx.setTextAlign('center');
|
ctx.setTextBaseline('middle');
|
// #endif
|
// #ifdef MP-KUAISHOU
|
ctx.fillStyle = this.color || this.primaryColor;
|
ctx.font = si + "px Arial";
|
ctx.textBaseline = 'middle';
|
ctx.textAlign = 'center';
|
// #endif
|
let percent = `${this.counterclockwise ? 100 - start : start}%`;
|
let radius = this.w / 2
|
// #ifdef MP-ALIPAY
|
radius = radius * 4
|
// #endif
|
ctx.fillText(percent, radius, radius);
|
}
|
if (percentage == 0 || (this.counterclockwise && start == 100)) {
|
ctx.draw();
|
} else {
|
let eAngle = ((2 * Math.PI) / 100) * start + Number(this.sAngle) * Math.PI;
|
this.drawArc(ctx, eAngle);
|
}
|
let time = 1000 / 60
|
// #ifdef MP-ALIPAY
|
time = time / 2
|
// #endif
|
setTimeout(() => {
|
this.start = start;
|
if (start == percentage) {
|
this.$emit('end', {
|
canvasId: this.circleId,
|
percent: start
|
});
|
} else {
|
this.drawCircle(start);
|
}
|
this.$emit('change', {
|
percent: start
|
});
|
}, time);
|
},
|
//创建弧线
|
drawArc(ctx, eAngle, def) {
|
// #ifndef MP-KUAISHOU
|
ctx.setLineCap(this.lineCap);
|
// #endif
|
|
// #ifdef MP-KUAISHOU
|
ctx.lineCap = this.lineCap;
|
// #endif
|
ctx.beginPath();
|
let radius = this.w / 2;
|
let sw = Number(this.strokeWidth);
|
// #ifdef MP-ALIPAY
|
radius = radius * 4
|
sw = sw * 4
|
// #endif
|
ctx.arc(radius, radius, radius - sw, Number(this.sAngle) * Math.PI, eAngle, this.counterclockwise);
|
ctx.stroke();
|
!def && ctx.draw();
|
}
|
}
|
}
|
// #endif
|
|
// #endif
|
|
// #ifndef MP
|
export default {}
|
// #endif
|
