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

Autor: 1Pupik1989