Radial Progress
Radial progress pro tutorial
JavaScript
var RadialProgressBar = (function(){
var PIOVER180 = Math.PI / 180;
var PIOVER2 = Math.PI / 2;
var timer = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000/60);
};
// vykreslí více řádkový text
function paintMulitilineText(ctx, textContent, x, y, fontsize) {
var lines = textContent.split("\\n");
var size = lines.length;
for (var i = 0; i < size; i++) {
ctx.fillText(lines[i], x, y);
y += fontsize * 1.1;
}
};
// zjistí nejdelší řádek v textu a vrítí jeho delku v px.
function theLongestLineInText(ctx, textContent) {
var lines = textContent.split("\\n");
var size = lines.length;
var longest = 0;
for (var i = 0; i < size; i++) {
var w = ctx.measureText(lines[i]).width;
if (w > longest) {
longest = w;
}
};
return longest;
};
function _constructor(canvas) {
var tmp;
// připravení proměnných
this.context = canvas.getContext("2d");
if(tmp = canvas.getAttribute("data-barva")) { this.barva = tmp; }
if(tmp = canvas.getAttribute("data-barva-pozadi")) { this.barvaPozadi = tmp; }
if((canvas.getAttribute("data-animovane")) !== null) { this.animovane = true; }
if(tmp = canvas.getAttribute("data-popisek")) { this.placeholder = tmp; }
if(tmp = canvas.getAttribute("data-pismo")) { this.font = tmp; }
if(tmp = canvas.getAttribute("data-startovni-uhel")) { this.startovniUhel = parseInt(tmp,10); }
if(tmp = canvas.getAttribute("data-procent")) { this.procent = parseInt(tmp,10) }
this.placeholder = this.placeholder.replace('%%%', this.procent);
this.width = canvas.width;
this.height = canvas.height;
this.mensiStrana = Math.min(canvas.width,canvas.height);
this.painted = 0;
this.canvas = canvas;
};
var _proto = {};
_proto.barva = "#0000AA";
_proto.barvaPozadi = "#CCCCCC";
_proto.animovane = false;
_proto.placeholder = '%%%%';
_proto.font = 'Calibri';
_proto.startovniUhel = 0;
_proto.procent = 0;
_proto.clearContext = function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
_proto.drawBackground = function() { // vykreslení podkladu
var ctx = this.context;
var polovinaMensiStrany = this.mensiStrana * 0.5;
ctx.fillStyle = this.barvaPozadi;
ctx.beginPath();
ctx.arc(polovinaMensiStrany, polovinaMensiStrany, polovinaMensiStrany, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
};
_proto.drawText = function() { //vykreslení textu
var ctx = this.context;
var textContent = this.placeholder;
//var textContent = this.placeholder.replace('%%%', this.canvas.getAttribute("data-procent"));
var width, height;
var mensiStrana = this.mensiStrana;
var polovinaMensiStrany = mensiStrana * 0.5;
var font = this.font;
// zjištění, jakou největší velikost můžeme použít aby text nepřetékal
for (var size = polovinaMensiStrany; size > 0; size--) {
ctx.font = size + "px " + font;
width = theLongestLineInText(ctx, textContent);
height = size * 1.5 * textContent.split("\\n").length;
if (width < mensiStrana * 0.7 && height < mensiStrana * 0.6) {
break;
}
}
ctx.fillStyle = "#000000";
ctx.textBaseline = "top";
paintMulitilineText(
ctx, textContent,
Math.round(polovinaMensiStrany - width * 0.5),
Math.round(polovinaMensiStrany - height * 0.5),
size
);
};
_proto.drawProgress = function() { // vykreslení progressu
var ctx = this.context;
var polovinaMensiStrany = this.mensiStrana * 0.5;
var posunStartu = PIOVER180 * this.startovniUhel; // vypočtení posunu startu z data-startovni-uhel
var konec = PIOVER180 *
(this.painted * 3.6) // převod % na °
- PIOVER2 + posunStartu ;
var start = -PIOVER2 + posunStartu;
ctx.strokeStyle = this.barva;
ctx.beginPath();
ctx.lineWidth = 0.2 * polovinaMensiStrany;
ctx.arc(polovinaMensiStrany, polovinaMensiStrany, polovinaMensiStrany - (0.2 * polovinaMensiStrany) * 0.5, start, konec);
ctx.stroke();
};
_proto.update = function() {
var that = this;
var value = this.procent;
var painted = this.painted;
if (this.animovane) {
if (value < painted) { painted--; }
else if (value > painted) { painted++; }
else if (value == painted) { return; }
this.painted = painted;
timer(function(){
that.update();
});
}else{
painted = this.procent;
}
if (painted < 0) {
painted = 0;
}
this.painted = painted;
this.clearContext();
this.drawBackground();
this.drawProgress();
this.drawText();
};
_constructor.prototype = _proto;
return _constructor;
})();
var progress;
var elements = document.querySelectorAll("canvas[data-procent]");
for (var i = 0; i < elements.length; i++) {
progress = new RadialProgressBar(elements[i]);
progress.update();
}
Neformátovaný
Přidáno: 11.3.2014
Expirace: Neuvedeno