Index / Desarrollo Web / Mapas con HTML5 – Funciones de pintado – Parte 5

Mapas con HTML5 – Funciones de pintado – Parte 5

Autor jc mouse sábado, noviembre 24, 2012

En esta penúltima parte, declaramos las funciones que nos permitirán pintar los shapes en el canvas, vamos al grano que la vida es corta 😉

Cada función de pintado tiene una correspondencia con los objetos declarados en la parte 4 de este tutorial, se antepone la palabra draw (dibujar) al nombre de la función de la forma «candidato» -> «drawCandidato».

function drawNoData( x , y , nulos, blancos )
{
   ctx.beginPath();
      ctx.rect(x,  y , 450, 160);
      ctx.closePath();
      ctx.fillStyle = 'yellow';
      ctx.fill();
      ctx.lineWidth = 4;
      ctx.strokeStyle = 'black';
      ctx.stroke();  
      ctx.lineWidth = 1;
      ctx.fillStyle = 'black';
   ctx.font = 'Bold 22pt Calibri'; 
   ctx.fillText( "NULOS" , x + 20,  y + 50);
   ctx.fillText( "BLANCOS" ,  x + 20 , y +  130);   
   //___NULOS
   ctx.beginPath();
      ctx.rect( x + 150 ,  y+20 , nulos*2 , 40);
      ctx.closePath();
      ctx.fillStyle = '#0005E3' ;
      ctx.fill();
      ctx.lineWidth = 0;
       ctx.fillStyle = 'black';
   ctx.font = 'Bold 24pt Calibri'; 
   ctx.fillText( (nulos==0) ?'' : nulos + "%"  , x + 180, y+50 );
 //blancos
   ctx.beginPath();
      ctx.rect( x + 150 ,  y+100 , blancos*2 , 40);
      ctx.closePath();
      ctx.fillStyle = 'white' ;
      ctx.fill();
      ctx.lineWidth = 0;
       ctx.fillStyle = 'black';
   ctx.font = 'Bold 24pt Calibri'; 
   ctx.fillText( (blancos==0) ?'' : blancos + "%" , x + 180, y+130 );
}

Función para pintar los shapes que corresponden a los candidatos.

function drawCandidato( x,  y , name , sigla , image , votos , color_votos  )
{
   ctx.beginPath();
      ctx.rect(x,  y , 450, 160);
      ctx.closePath();
      ctx.fillStyle = '#FCFF00';
      ctx.fill();
      ctx.lineWidth = 4;
      ctx.strokeStyle = 'black';
      ctx.stroke();  
      ctx.lineWidth = 1;
      ctx.drawImage( image , x +20, y + 50 ,100,100);
      ctx.fillStyle = 'black';
   ctx.font = 'Normal 12pt Calibri'; 
   ctx.fillText( name , x + 20,  y + 20);
   ctx.fillText( sigla ,  x + 20 , y +  40);   
   //pinta los resultados de la eleccion
  drawData( x + 150, y+50 , votos, color_votos ) ;
}

Y las funciones de pintado del resto de los shapes, no me detendré a explicar en detalle como es que se dibujan los shapes en el canvas, eso corresponde a tutoriales básicos sobre HTML5.

/**
* Pinta el rectangulo de votacion
*/
function drawData( x , y , value , color_votos )
{
   ctx.beginPath();
      ctx.rect( x ,  y , value*2 , 100);   
      ctx.closePath();
      ctx.fillStyle = color_votos ;
      ctx.fill();
      ctx.lineWidth = 0;
       ctx.fillStyle = 'black';
   ctx.font = 'Bold 42pt Calibri';    
   ctx.fillText( (value==0) ?'' : value + "%" , x + 40, y+70 );
}

/**
* pues que digo :/
*/
function drawTitle( x, y , name )
{
   ctx.font = 'Bold 42pt Calibri';    
   ctx.fillText( name , x , y );
}

/**
* Muestra una ventana de espera
*/
function drawProcess( x , y , imageLoad )
{
   ctx.beginPath();
      ctx.rect( x,  y , 260, 100);
      ctx.closePath();
      ctx.fillStyle = 'white';
      ctx.fill();
      ctx.lineWidth = 4;
      ctx.strokeStyle = 'black';
      ctx.stroke();  
      ctx.lineWidth = 1;  
      ctx.drawImage(imageLoad,  x + 17 , y+20 ,64,64);
        ctx.fillStyle = 'black';
   ctx.font = 'Normal 12pt Calibri'; 
   ctx.fillText( "Procesando...." , x+100, y+40);
   ctx.fillText( "Por favor espere." , x + 100, y+80);   
}

Si bien declaramos un objeto para cada función de pintado [ver parte 4], también podemos pintar un shape sin tener que declarar un objeto, como es el caso de esta función «drawTooltip()», esta función nos servirá para mostrar una pequeño recuadro de texto similar a un Tooltip en java o a una etiqueta ALT de HTML.

function drawTooltip( x, y , textosup, textoinf )
{
   ctx.beginPath();
    ctx.rect(x,  y , 220, 60);
    ctx.closePath();
    ctx.fillStyle = '#EFED43';
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();  
    ctx.lineWidth = 1;
     ctx.fillStyle = 'black';
    ctx.font = 'Normal 22pt Calibri'; 
    ctx.fillText( textosup  , x + 20,  y +24); 
    ctx.font = 'Normal 16pt Calibri'; 
    ctx.fillText( textoinf  , x+ 20,  y+50 );   
}