是否有暂停,恢复和重启我的画布弧动画进度条?我已经添加了点击功能,但不知道从哪里开始以实现我所追求的目标。
我在这里添加了一个工作小提琴:http://jsfiddle.net/4txsqeoh/2/
我想制作单独的功能,因此可以在需要时通过点击事件等进行调用。
我在点击事件和空函数中添加了调用,但不知道从哪里开始,我是JS的新手。
JS:
function init() {
var c = document.getElementById('draw');
return c.getContext('2d');
}
function clear(ctx) {
ctx.clearRect(0, 0, 200, 200);
}
function PercentProgress(ctx, percent) {
this.ctx = ctx;
this.speed = 4;
this.x = 100;
this.y = 100;
this.radius = 50;
this.setPercent = function (percent) {
this.degrees = 360 * (percent / 100);
this._animationOffset = this.degrees;
this.percent = percent;
};
// Part of initialization
this.setPercent(percent);
this.startProgress = function () {
var self = this;
clear(this.ctx);
this._interval = setInterval(function () {
self.drawProgress();
}, 10);
};
this.pauseProgress = function () {
};
this.resumeProgress = function () {
};
this.restartProgress = function () {
};
this.drawArc = function () {
var startDegrees = -90;
var endDegrees = startDegrees + this.degrees - this._animationOffset;
// Degrees to radians
var startAngle = startDegrees / 180 * Math.PI;
var endAngle = endDegrees / 180 * Math.PI;
// Draw arc
this.setLineStyles();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
ctx.stroke();
};
this.setLineStyles = function () {
ctx.strokeStyle = '#FF1251';
ctx.lineWidth = 10;
ctx.lineCap = 'round';
};
this.drawProgress = function () {
if (this._animationOffset < 0) {
this._animationOffset = 0;
}
clear(this.ctx);
this.drawArc();
this._animationOffset -= this.speed;
if (this._animationOffset < 0) {
clearInterval(this._interval);
}
};
}
$(document).ready(function () {
// lets start the progress
var ctx = init();
var percentage = 100;
var progress = new PercentProgress(ctx, percentage);
//progress.startProgress();
$(document).on('click', '#pause-progress', function (e) {
// pause progress
progress.pauseProgress();
});
$(document).on('click', '#resume-progress', function (e) {
// resume progress
progress.resumeProgress();
});
$(document).on('click', '#restart-progress', function (e) {
// restart progress
progress.startProgress();
});
});
答案 0 :(得分:1)
只需添加以下两个功能:
this.stop = function(){
clearInterval(this._interval);
}
this.resume = function(){
var self = this;
clearInterval(self._interval);
this._interval = setInterval(function () {
self.drawAnimation();
}, 10);
}
并设置点击此操作
$(document).on('click', '#pause-progress', function (e) {
// pause progress
anim.stop();
});
$(document).on('click', '#resume-progress', function (e) {
// resume progress
anim.resume();
});
$(document).on('click', '#restart-progress', function (e) {
// restart progress
anim.stop();
anim = new PercentAnimation(ctx, percentage);
anim.startAnimation();
});
答案 1 :(得分:0)
添加此功能
this.setLineStylesCircle = function () {
ctx.strokeStyle = '#001251'; //set the collor here
ctx.lineWidth = 10;
ctx.lineCap = 'round';
};
并将drawArc更改为:
this.drawArc = function () {
var startDegrees = -90;
var endDegrees = startDegrees + this.degrees - this._animationOffset;
// Degrees to radians
var startAngle = startDegrees / 180 * Math.PI;
var endAngle = endDegrees / 180 * Math.PI;
//Draw circle
this.setLineStylesCircle();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 7, false);
ctx.stroke();
// Draw arc
this.setLineStyles();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
ctx.stroke();
};