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

Tabla con imagen de fondo

Tabla con imagen de fondo

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

Introducción al Diseño Web Adaptable (Responsivo)

Introducción al Diseño Web Adaptable (Responsivo)

El diseño web adaptable (Responsive Web Design) va evolucionando como una filosofía de diseño y desarrollo de paginas we...

Mapas HTML5 – Elementos del canvas- Parte 4

Mapas HTML5 – Elementos del canvas- Parte 4

Continuando con nuestro tutorial de «Mapas interactivos con HTML5» , esta es la sección que corresponde a los elementos...

Uso de BorderPane

Uso de BorderPane

BorderPane es un layout que distribuye los nodos hijos en 5 posiciones TOP, LEFT, BOTTOM, RIGHT y CENTER Los nodos hijos...

Obtener Metadatos de una base de datos

Obtener Metadatos de una base de datos

La clase de java DatabaseMetaData nos permite obtener información exhaustiva sobre una base de datos, para ser más exact...

Convierte tus dibujos web en Código HTML

Convierte tus dibujos web en Código HTML

Sketch2Code es un proyecto de Microsoft el cual usa IA (Inteligencia Artificial) para transformar el diseño de una inter...

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

WhatsApp anuncio a través de su blog que ya se encuentra disponible la función de envío de fotos y videos TEMPORALES, es...

Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...

TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...

Una clase JTree permite mostrar datos de una forma jerárquica y en realidad este objeto no contiene sus datos; es decir,...

Herramientas

Generador de Enlaces a Whatsapp