Mapas con HTML5 – Funciones de pintado – Parte 5

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 );   
}

Aún nos falta una función de pintado, pero eso lo veremos en la última parte de este tutorial 🙂

Mapas con HTML5 – Funciones de pintado – Parte 5

Tags

Últimas entradas

BCB lanza app «Billetes de Bolivia» para detectar billetes de la Serie B inválidos

Verificador de Número de Serie del BCB

Plataforma digital para reclamos en transporte aéreo, terreste y ferroviario

Adios al dd(): Realiza debugging de forma ordenada con LaraDumps

Conoce App Denuncia: La aplicación boliviana para frenar la corrupción policial

Artículos similares

Store Procedure: Result Set

Dibujando con Canvas

Decompilar archivos APK

¿Como paginar con Laravel 11?

Reconocimiento Óptico de Caracteres con Tess4J

Botones circulares de Google Plus en java

JC Mouse | Bolivia