You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
2.0 KiB
125 lines
2.0 KiB
|
|
/** |
|
* Expose `Progress`. |
|
*/ |
|
|
|
module.exports = Progress; |
|
|
|
/** |
|
* Initialize a new `Progress` indicator. |
|
*/ |
|
|
|
function Progress() { |
|
this.percent = 0; |
|
this.size(0); |
|
this.fontSize(11); |
|
this.font('helvetica, arial, sans-serif'); |
|
} |
|
|
|
/** |
|
* Set progress size to `n`. |
|
* |
|
* @param {Number} n |
|
* @return {Progress} for chaining |
|
* @api public |
|
*/ |
|
|
|
Progress.prototype.size = function(n){ |
|
this._size = n; |
|
return this; |
|
}; |
|
|
|
/** |
|
* Set text to `str`. |
|
* |
|
* @param {String} str |
|
* @return {Progress} for chaining |
|
* @api public |
|
*/ |
|
|
|
Progress.prototype.text = function(str){ |
|
this._text = str; |
|
return this; |
|
}; |
|
|
|
/** |
|
* Set font size to `n`. |
|
* |
|
* @param {Number} n |
|
* @return {Progress} for chaining |
|
* @api public |
|
*/ |
|
|
|
Progress.prototype.fontSize = function(n){ |
|
this._fontSize = n; |
|
return this; |
|
}; |
|
|
|
/** |
|
* Set font `family`. |
|
* |
|
* @param {String} family |
|
* @return {Progress} for chaining |
|
*/ |
|
|
|
Progress.prototype.font = function(family){ |
|
this._font = family; |
|
return this; |
|
}; |
|
|
|
/** |
|
* Update percentage to `n`. |
|
* |
|
* @param {Number} n |
|
* @return {Progress} for chaining |
|
*/ |
|
|
|
Progress.prototype.update = function(n){ |
|
this.percent = n; |
|
return this; |
|
}; |
|
|
|
/** |
|
* Draw on `ctx`. |
|
* |
|
* @param {CanvasRenderingContext2d} ctx |
|
* @return {Progress} for chaining |
|
*/ |
|
|
|
Progress.prototype.draw = function(ctx){ |
|
var percent = Math.min(this.percent, 100) |
|
, size = this._size |
|
, half = size / 2 |
|
, x = half |
|
, y = half |
|
, rad = half - 1 |
|
, fontSize = this._fontSize; |
|
|
|
ctx.font = fontSize + 'px ' + this._font; |
|
|
|
var angle = Math.PI * 2 * (percent / 100); |
|
ctx.clearRect(0, 0, size, size); |
|
|
|
// outer circle |
|
ctx.strokeStyle = '#9f9f9f'; |
|
ctx.beginPath(); |
|
ctx.arc(x, y, rad, 0, angle, false); |
|
ctx.stroke(); |
|
|
|
// inner circle |
|
ctx.strokeStyle = '#eee'; |
|
ctx.beginPath(); |
|
ctx.arc(x, y, rad - 1, 0, angle, true); |
|
ctx.stroke(); |
|
|
|
// text |
|
var text = this._text || (percent | 0) + '%' |
|
, w = ctx.measureText(text).width; |
|
|
|
ctx.fillText( |
|
text |
|
, x - w / 2 + 1 |
|
, y + fontSize / 2 - 1); |
|
|
|
return this; |
|
};
|
|
|