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

Conversor decimal a binario

Conversor decimal a binario

Desde que Google anuncio de que dejara de dar soporte al plugin de Eclipse y se concentrara en Android Studio, quienes t...

Creación de mapas con shapes – Parte 3

Creación de mapas con shapes – Parte 3

En nuestro mapa interactivo, se hará uso de un mapa departamental dividido en provincias, todo a través  de shapes, si b...

Arrastrar y abrir archivo Excel

Arrastrar y abrir archivo Excel

En este post, crearemos una aplicación java que nos permita arrastrar un archivo excel hacia la aplicación, abrirlo y ca...

Crea App multilenguaje con Android Studio

Crea App multilenguaje con Android Studio

En este post aprenderemos los pasos básicos para construir una aplicación android con soporte multilenguaje, utilizaremo...

Crear componente Switch de Android para Java Swing

Crear componente Switch de Android para Java Swing

En este post crearemos un componente que solo hay en android y que no esta disponible en la paleta de controles de Netbe...

Tomar fotos con la camara y guardar en la sdcard

Tomar fotos con la camara y guardar en la sdcard

En este post realizaremos una aplicación android que hará uso de la cámara del celular para tomar una foto y guardarla e...

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

En este post construiremos paso a paso un SharedPreferences más conocido en español como “Preferencias de Usuario...

La Inteligencia Artificial (AI – Artificial Intelligence) estará presente en casi cada aspecto de nuestra vida en...

Una Interface Funcional es una interface que contiene uno y solo un método abstracto aunque puede contener métodos por d...

Un JSpinner es un componente swing de java con una caja de texto y un par de botones que nos permiten incrementar  y dec...

Android Bolivia

Bandera en Alto