...
|
...
|
@@ -5,6 +5,7 @@ |
|
|
:width="canvasWidth"
|
|
|
:height="canvasHeight"
|
|
|
:time="time"
|
|
|
:totalTime="totalTime"
|
|
|
:lineWidth="lineWidth"
|
|
|
></canvas>
|
|
|
<p>{{desc}}</p>
|
...
|
...
|
@@ -16,7 +17,8 @@ |
|
|
|
|
|
/**
|
|
|
* 使用方法, 在对应页面引入CountCircle
|
|
|
* <CountCircle :line-width="6" :time="40000" @on-end="onTimeEnd" style="width: 70px; height: 70px; display: block;"></CountCircle>
|
|
|
* <CountCircle :line-width="6" :time="time" :total-time="totalTime" @on-end="onTimeEnd" style="width: 70px; height: 70px; display: block;"></CountCircle>
|
|
|
* 在自己的页面做定时器,修改time,
|
|
|
*/
|
|
|
export default { // 环形倒计时
|
|
|
name: 'count-circle',
|
...
|
...
|
@@ -25,6 +27,10 @@ export default { // 环形倒计时 |
|
|
type: Number,
|
|
|
default: 60000
|
|
|
},
|
|
|
totalTime: {
|
|
|
type: Number,
|
|
|
default: 60000
|
|
|
},
|
|
|
lineWidth: {
|
|
|
type: Number,
|
|
|
default: 8
|
...
|
...
|
@@ -38,8 +44,6 @@ export default { // 环形倒计时 |
|
|
return {
|
|
|
canvas: null,
|
|
|
context: null,
|
|
|
totalTime: 60000,
|
|
|
lastTime: 60000,
|
|
|
interval: 100,
|
|
|
circle: {
|
|
|
x: 0,
|
...
|
...
|
@@ -62,8 +66,6 @@ export default { // 环形倒计时 |
|
|
},
|
|
|
methods: {
|
|
|
resetCanvas() {
|
|
|
this.totalTime = this.time;
|
|
|
this.lastTime = this.time;
|
|
|
this.canvas = this.$refs.countCanvas;
|
|
|
if (window.devicePixelRatio) {
|
|
|
this.pixelRatio = window.devicePixelRatio;
|
...
|
...
|
@@ -78,7 +80,7 @@ export default { // 环形倒计时 |
|
|
y: this.canvasHeight / 2,
|
|
|
radius: this.canvasWidth / 2
|
|
|
};
|
|
|
console.log(this.canvas, this.circle);
|
|
|
console.log(this.canvas, this.circle, this.time, this.totalTime);
|
|
|
},
|
|
|
drawCircle() {
|
|
|
if (this.canvas && this.context) {
|
...
|
...
|
@@ -102,32 +104,33 @@ export default { // 环形倒计时 |
|
|
|
|
|
let ctx = this.context;
|
|
|
|
|
|
ctx.save();
|
|
|
ctx.strokeStyle = '#f0f0f0';
|
|
|
ctx.lineCap = 'square';
|
|
|
ctx.lineWidth = this.canvasLineWidth;
|
|
|
if (percent > 0) {
|
|
|
ctx.save();
|
|
|
ctx.strokeStyle = '#f0f0f0';
|
|
|
ctx.lineCap = 'square';
|
|
|
ctx.lineWidth = this.canvasLineWidth;
|
|
|
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(this.circle.x, this.circle.y, (this.circle.radius - this.canvasLineWidth / 2), -Math.PI / 2, Math.PI * ( 2 * percent - 0.5), false);
|
|
|
ctx.stroke();
|
|
|
ctx.closePath();
|
|
|
ctx.restore();
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(this.circle.x, this.circle.y, (this.circle.radius - this.canvasLineWidth / 2), -Math.PI / 2, Math.PI * ( 2 * percent - 0.5), false);
|
|
|
ctx.stroke();
|
|
|
ctx.closePath();
|
|
|
ctx.restore();
|
|
|
}
|
|
|
|
|
|
ctx.save();
|
|
|
ctx.font = 'bold ' + 20 * this.pixelRatio + 'px "ufofont"';
|
|
|
ctx.fillStyle = '#022A47';
|
|
|
ctx.textAlign = 'center';
|
|
|
ctx.textBaseline = 'middle';
|
|
|
ctx.fillText(Math.round(this.lastTime / 1000) + 's', this.circle.x, this.circle.y);
|
|
|
ctx.fillText(Math.round(this.time / 1000) + 's', this.circle.x, this.circle.y);
|
|
|
ctx.restore();
|
|
|
|
|
|
setTimeout(this.draw.bind(this), this.interval);
|
|
|
}
|
|
|
},
|
|
|
draw() {
|
|
|
if (this.lastTime > 0) {
|
|
|
this.lastTime -= this.interval;
|
|
|
let percent = 1 - this.lastTime / this.totalTime;
|
|
|
if (this.time > 0) {
|
|
|
let percent = 1 - this.time / this.totalTime;
|
|
|
|
|
|
this.strokeCircle(percent);
|
|
|
} else {
|
...
|
...
|
|