Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

Imágenes en tiempo de ejecución (Visual C#)

Autor: Carlos Carmona

Crear imágenes dinámicamente en .NET a partir de unos valores dados nos permite crear un sistema de estadísticas visuales con barras, por ejemplo. Lo lógico sería traer los valores a representar de una consulta de Base de Datos, pero para este ejemplo usaremos 3 DropDownList con valores del 1 al 10.

Vamos a usar 2 páginas aspx o WebForm, una que enviará los datos a evaluar y posteriormente cargará la imagen, y la otra que será la que cree la imagen en sí.

Vamos con la primera; creamos un nuevo WebForm al que añadiremos 3 DropDownList con valores del 1 al 10, un botón que no tendrá código alguno, simplemente lo necesitamos para provocar el post, y un label. Algo así:

Bien, en el evento Page_Load de la página solo tenemos que recoger los valores de las listas y pasarselos a la otra página:

private void Page_Load(object sender, System.EventArgs e)

{
   Single v1, v2, v3;
 
   //Recogemos los valores de las listas.

   try   
   { 
	  v1 = Convert.ToSingle(val1.SelectedValue); 
   }	
   catch 
   { 
	  v1 = 0; 
   }

 
   try   
   { 
	  v2 = Convert.ToSingle(val2.SelectedValue); 
   }	
   catch 
   { 
	  v2 = 0; 
   }

 
   try   
   { 
	  v3 = Convert.ToSingle(val3.SelectedValue); 
   }	
   catch 
   { 
	  v3 = 0; 
   }

 
   //Creamos la etiqueta img que contendrá la imagen.

   //la ruta de la imagen 'src' será la página que

   //creará la imagen, a la que le pasamos las variables

   //vía get

   Label1.Text = "<img src=\"crea_imagen.aspx?v1=" + v1 + "&v2=" + v2 +
"&v3=" + v3 + "\" width=\"200\" height=\"200\">";

} 

Bien, ahora vamos con la otra página, '/articulos/tutoriales/net/crea_imagen.html'. Ésta página no tendrá más que código en el evento Page_Load:

private void Page_Load(object sender, System.EventArgs e)

{
   //Dreclaramos el objeto BitMap y Graphic

   Bitmap objBitmap = new Bitmap(200,200);
 
   Graphics objGraphic = Graphics.FromImage(objBitmap);
 
   //Declaramos las barras asignándoles un color

   SolidBrush TurquoiseBrush = new SolidBrush(Color.Turquoise);
   SolidBrush VioletBrush  = new SolidBrush(Color.Violet);
   SolidBrush SalmonBrush = new SolidBrush(Color.Salmon);
 
   //Definimos el fondo de color blanco

   SolidBrush whiteBrush = new SolidBrush(Color.White);
 
   //Con esto dibujaremos 2 líneas, a la izquierda una

   //y otra inferior para representar un eje de coordenadas.

   //Las líneas serán de color rojo (Tomato) y de grosor 5

   Pen TomatoPen = new Pen(Color.Tomato, 5);
 
   //Aquí es donde creamos el fondo, de color

   //blanco tal y como especificamos anteriormente

   objGraphic.FillRectangle(whiteBrush, 0, 0, 200, 200);
 
   //En estas 2 líneas es donde dibujamos el eje

   //de coordenadas antes mencionado

   objGraphic.DrawLine(TomatoPen, new Point(0,200), new Point(200,200));
   objGraphic.DrawLine(TomatoPen, new Point(0,0),   new Point(0,200));
 
   //Variables para calcular el tamaño de cada columna

   Single sngMayorValor, sngMayor1, sngMayor2, sngMayor3;
   Single valor1, valor2, valor3; 
 
   //Recogemos los valores de las listas desplegables

   //que hemos recibido por get

   valor1 = Convert.ToSingle(Request.QueryString["v1"]);
   valor2 = Convert.ToSingle(Request.QueryString["v2"]);
   valor3 = Convert.ToSingle(Request.QueryString["v3"]);
 
   //Comprobamos cual es la más grande, que tendrá un tamaño

   //del 100%, y las otras 2 serán más pequeñas en proporción

   //a la diferencia de tamaño con respecto a la mayor.

   if (valor1 > valor2)

         sngMayorValor = valor1;
   else

         sngMayorValor = valor2;
 
   if (valor3 > sngMayorValor)

         sngMayorValor = valor3;
 
   if (sngMayorValor == 0)

         sngMayorValor = 1;
 
   sngMayor1 = (valor1 / sngMayorValor) * 190;
   sngMayor2 = (valor2 / sngMayorValor) * 190;
   sngMayor3 = (valor3 / sngMayorValor) * 190;
 
   //Con todos los cálculos realizado, creamos ahora sí

   //las columnas de la imagen 

   objGraphic.FillRectangle(TurquoiseBrush, 10, 194 - sngMayor1, 55, sngMayor1);
   objGraphic.FillRectangle(VioletBrush, 70, 194 - sngMayor2, 55, sngMayor2);
   objGraphic.FillRectangle(SalmonBrush, 130, 194 - sngMayor3, 55, sngMayor3);
 
   //Definimos el tipo de fichero

   Response.ContentType = "image/gif";
 
   //Y finalmente lo guardamos

   objBitmap.Save (Response.OutputStream, ImageFormat.Gif);

} 

Y con esto ya está operativo nuestro sistema gráfico de estadísticas, veamos algunos ejemplos:

Como se ve, la columna de mayor valor siempre ocupará el 100% de la longitud, y las otras 2 serán proporcionales con respecto a esta.

Espacio de nombre requerido:

using System.Drawing;

using System.Drawing.Imaging; 

Para más información consulte la referencia del MSDN.