// 本文件由FirstUI授权予四川政采招投标咨询有限公司（会员ID： 163，营业执照号：91 51 01 3 13 320 061 93 K）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
// #ifdef MP-WEIXIN
|
export default {
|
data() {
|
return {
|
start: 0,
|
isReady: false
|
}
|
},
|
created() {
|
this.context = null;
|
this.canvas = null;
|
},
|
watch: {
|
percent(val) {
|
setTimeout(() => {
|
this.isReady && this.initDraw()
|
}, 20)
|
},
|
w(val) {
|
setTimeout(() => {
|
this.isReady && this.initDraw()
|
}, 20)
|
},
|
strokeWidth(val) {
|
setTimeout(() => {
|
this.isReady && this.initDraw()
|
}, 20)
|
}
|
},
|
mounted() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.init();
|
}, 50)
|
})
|
},
|
methods: {
|
//初始化绘制
|
init() {
|
uni.createSelectorQuery().in(this)
|
.select(`#${this.circleId}`)
|
.fields({
|
node: true,
|
size: true,
|
})
|
.exec(this.initDraw.bind(this))
|
},
|
initDraw(res) {
|
this.isReady = true;
|
let start = this.activeMode === 'backwards' ? 0 : this.start;
|
start = start > this.percent ? 0 : start;
|
if (res) {
|
const width = res[0].width
|
const height = res[0].height
|
const canvas = res[0].node
|
const ctx = canvas.getContext('2d')
|
const dpr = uni.getSystemInfoSync().pixelRatio
|
canvas.width = width * dpr
|
canvas.height = height * dpr
|
ctx.scale(dpr, dpr)
|
this.context = ctx;
|
this.canvas = canvas
|
this.drawCircle(start, ctx, canvas);
|
} else {
|
this.drawCircle(start, this.context, this.canvas);
|
}
|
},
|
drawDefaultCircle(ctx, canvas) {
|
//终止弧度
|
let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
|
this.drawArc(ctx, eAngle, this.background);
|
},
|
drawpercent(ctx, percent) {
|
ctx.save();
|
ctx.beginPath();
|
ctx.fillStyle = this.color || this.primaryColor;
|
ctx.font = this.size + "px Arial";
|
ctx.textAlign = "center";
|
ctx.textBaseline = "middle";
|
let radius = this.w / 2;
|
percent = this.counterclockwise ? 100 - percent : percent;
|
percent = percent.toFixed(0) + "%"
|
ctx.fillText(percent, radius, radius);
|
ctx.stroke();
|
ctx.restore();
|
},
|
drawCircle(start, ctx, canvas) {
|
if (!ctx || !canvas) return;
|
let that = this
|
let percent = that.percent;
|
let requestId = null
|
let renderLoop = () => {
|
drawFrame((res) => {
|
if (res) {
|
requestId = canvas.requestAnimationFrame(renderLoop)
|
} else {
|
canvas.cancelAnimationFrame(requestId)
|
requestId = null;
|
renderLoop = null;
|
}
|
})
|
}
|
requestId = canvas.requestAnimationFrame(renderLoop)
|
|
function drawFrame(callback) {
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
if (that.defaultShow) {
|
that.drawDefaultCircle(ctx, canvas)
|
}
|
if (that.show) {
|
that.drawpercent(ctx, start);
|
}
|
let isEnd = (percent == 0 || (that.counterclockwise && start == 100));
|
if (!isEnd) {
|
let eAngle = ((2 * Math.PI) / 100) * start + Number(that.sAngle) * Math.PI;
|
let gradient = that.foreground || that.primaryColor;
|
if (that.gradient) {
|
gradient = ctx.createLinearGradient(0, 0, Number(that.w), 0);
|
gradient.addColorStop(0, that.gradient);
|
gradient.addColorStop(1, (that.foreground || that.primaryColor));
|
}
|
that.drawArc(ctx, eAngle, gradient);
|
}
|
that.$emit('change', {
|
percent: start
|
});
|
if (start >= percent) {
|
that.start = start
|
that.$emit('end', {
|
canvasId: that.circleId,
|
percent: percent
|
});
|
canvas.cancelAnimationFrame(requestId)
|
callback && callback(false)
|
return;
|
}
|
let num = start + that.speed
|
start = num > percent ? percent : num;
|
callback && callback(true)
|
}
|
|
},
|
drawArc(ctx, eAngle, strokeStyle) {
|
ctx.save();
|
ctx.beginPath();
|
let sw = Number(this.strokeWidth);
|
ctx.lineCap = this.lineCap;
|
ctx.lineWidth = sw;
|
ctx.strokeStyle = strokeStyle;
|
let radius = this.w / 2;
|
ctx.arc(radius, radius, radius - sw, Number(this.sAngle) * Math.PI, eAngle, this
|
.counterclockwise);
|
ctx.stroke();
|
ctx.closePath();
|
ctx.restore();
|
}
|
}
|
}
|
// #endif
|
|
|
// #ifndef MP-WEIXIN
|
export default {}
|
// #endif
|
