Autor del articulo
Víctor Hurtado Díaz
¿Prefieres buscar los artículos por temas? Encuéntralos aquí
.Net Framework 2.0 (5)
ASP.net 2.0 (4)
Otras herramientas (1)
Windows Mobile (1)
Califica este artículo:
|
Estás en la categoría: ASP.net 2.0
Puedes visitar artículos similares en: ASP.net 2.0
Hacer gráficos en asp.net usando System.Drawing
Breve descripción: Crear imágenes de manera dinámica para web es mucho más facil de lo que parece cuando utilizamos ASP.net con C#. Aquí se muestra el uso de algunos de los métodos que el .net Framework nos ofrece para la generación dinámica de imágenes para web.
Autor: Víctor Hurtado Díaz
Fecha publicación: 26/04/2009
Cantidad Visitas al artículo: 1148
Calificación del artículo: Buena
Ver Calificaciones dadas a este artículo
Probablemente alguna vez han tenido la necesidad de generar algún gráfico de manera dinámica en su aplicación web, podría ser un simple gráfico de barras con las ventas del mes, una imagen anti-spam o simplemente la representación de alguna función senoidal para mostrar el comportamiento de una onda.
En las versiones anteriores de ASP esto no era posible, pero desde la introducción de ASP.net podemos utilizar el soporte del mismo lenguaje de programación para crear nuestras imágenes personalizadas.
Para el ejemplo utilizaremos 2 páginas web escritas en C# 2.0 y a continuación se describirán brevemente.
La página default.aspx es la que finalmente mostrará la imagen generada, ahí podremos observar un único elemento html, una imagen cuyo origen es la página Dibujar.aspx.
La página Dibujar.aspx es la página encargada de generar la imagen dinámicamente.
Veamos el html de la página Default.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ejemplo dibujando en asp.net</title> </head> <body> <form id="frmDibujando" runat="server"> <img src="dibujar.aspx" /> </form> </body> </html>
El caso de la página Dibujar.aspx es el inverso ya que en el HTML no debe haber ninguna etiqueta ya que se enviará una imagen en vez de html. A continuación les muestro Dibujar.aspx.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dibujar.aspx.cs" Inherits="Dibujar" %>
Ahora si vayamos al código...
Ahora les presento el código para la generación de la imagen en formato PNG.
Lo primero que hay que hacer es importar los namespaces necesarios para el trabajo con imágenes: System.Drawing y System.Drawing.Drawing2D. Con estos 2 namespaces ahora tenemos el acceso a las clases que nos permiten dibujar gráficos en 2D.
Luego también debemos importar el namespace System.IO debido a que se usará un MemoryStream para enviar el resultado hacia la página Default.aspx.
Ahora le comento un poco las clases utilizadas:
- Graphics: Define el contenedor de todo el gráfico, sobre este objeto se dibujarán los diversos objetos.
- Bitmap: Define el tipo de imagen a utilizar por Graphics.
- SolidBrush: Sirve para definir el color que se utilizará para dibujar algo, un rectángulo, como color de base para un trazo, etc.
- Pen: Define el tipo de línea que se utilizará para un trazo, dentro de este tipo de línea se puede definir el grosor, el color, el tipo de trazo, etc.
Los métodos utilizados creo que se explican por si mismos no?
Les comento que he hecho pruebas con otros formatos diferentes al PNG y el resultado no es del todo bueno (con jpg o gif) porque la imagen sale ligeramente borrosa.
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;
public partial class Dibujar : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Bitmap mapaBits = new Bitmap(300, 300);
Graphics figura = Graphics.FromImage(mapaBits);
figura.FillRectangle(new SolidBrush(Color.Coral), 0, 0, 200, 200);
figura.DrawRectangle(new Pen(new SolidBrush(Color.Blue)), 10, 20, 50, 70);
figura.DrawRectangle(new Pen(new SolidBrush(Color.Blue)), 120, 120, 50, 70);
figura.DrawEllipse(new Pen(new SolidBrush(Color.Black)), 70, 80, 50, 50);
figura.DrawLine(new Pen(Color.DarkGreen, 5), new Point(0,200), new Point(200,0));
using (MemoryStream stmMemory = new MemoryStream())
{
Response.Clear();
Response.ContentType = "image/png";
mapaBits.Save(stmMemory, System.Drawing.Imaging.ImageFormat.Png);
mapaBits = null;
stmMemory.WriteTo(Response.OutputStream);
Response.End();
}
}
}
Recuerde que si tiene algún comentario o necesita el desarrollo de alguna solución referente al artículo actual puede contactarme en el momento que lo necesite.
Palabras clave del artículo: System.Drawing, System.Drawing.Drawing2D, Imágenes ASP.net, Imágenes C#
|
|