Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
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 );   
}

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

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Personaliza JTable “MetroUI”

Personaliza JTable “MetroUI”

Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe...

JTable con imágenes

JTable con imágenes

En este post dejo una forma de como utilizar imágenes en un JTable ademas de implementar MouseListener para realizar dif...

Mapas interactivos – El proyecto – Parte 2

Mapas interactivos – El proyecto – Parte 2

Comenzando este tutorial, primero necesitamos definir la “estructura” de nuestro proyecto. Haremos uso del I...

SOAP .:. Servicio Web en c#

SOAP .:. Servicio Web en c#

SOAP (Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden...

Formulario de autenticación circular

Formulario de autenticación circular

En este tutorial crearemos un formulario de logueo de forma circular usando el lenguaje java y el IDE de Netbeans. Neces...

Decompilar archivos APK

Decompilar archivos APK

Las aplicaciones para celulares inteligentes con sistema operativo Android, se distribuyen en archivos *.APK, si como pr...

1 comentario en “Mapas con HTML5 – Funciones de pintado – Parte 5”

  1. Diego dice:

    Hola mouse,

    una consulta bro, donde pego todas esas funciones en elecciones.js?

    Gracias.

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

En este post, crearemos una tabla swing que implemente un control jcombobox en una columna de una tabla, llenaremos con...

En este post personalizaremos una tabla JTable Swing para pintar una imagen de fondo y darle un poco de estilo al encabe...

De las pocas herramientas disponibles entre librerías, frameworks, engines, etc para el desarrollo de videojuegos en len...

¿Quien no ha querido programar un juego? creo que la mayoría si no es que todos los que conocen de programación sin impo...

Android Bolivia

MAUS