| Artículos | 01 OCT 2003

Programación en VB.NET (y IV)

Tags: Histórico
Ignacio Céspedes.
Haga sus propios gráficos estadísticos utilizando la tecnología GDI+, consiguiendo de esta forma una mayor vistosidad en sus futuras aplicaciones.

Hemos de reconocer que los gráficos en versiones anteriores a Visual Basic.NET dejaban mucho que desear, ya que este lenguaje en principio no había sido pensado para la creación y manipulación de este tipo de elementos. Como último recurso se podía optar por utilizar la biblioteca DirectX de Microsoft con la dificultad que esto conllevaba.
En la nueva plataforma nos encontramos con una nueva biblioteca de gráficos denominada GDI+ que nos permitirá abordar toda clase de gráficos desde el más simple al más complejo, y cómo no, de una forma más rápida y eficaz.

Planteamiento del proyecto
Nos adentraremos en la utilización de la nueva biblioteca gráfica GDI+ invitándole a que desarrolle una pequeña aplicación gráfica con nosotros. El gráfico que le proponemos es conocido con el nombre de “gráfico de tarta”. Lo hemos elegido porque entendemos que es uno de los más utilizados a la hora de representar datos estadísticos, independientemente de la naturaleza de los mismos.

Comenzando el desarrollo
Para empezar nuestra labor abriremos un nuevo proyecto de aplicación Windows desde el menú Archivo » Nuevo » Proyecto » Proyecto de Visual Basic » Aplicación para Windows; como le indicábamos en el capítulo anterior.
Añadiremos al formulario creado un menú con las opciones que se aprecian en la Figura 1. Como recordará, existen dos formas de crear un menú en un formulario; escogeremos hacerlo desde el diseñador, ya que la creación de menús se vio con detalle en el pasado capítulo y nos resultará más rápido utilizar el diseñador.
Una vez que hemos construido el menú con todas sus opciones añadiremos un segundo formulario al proyecto. Haremos esto desde el menú Proyecto » Agregar Windows Forms. A este nuevo formulario le llamaremos Gráficos y será en él donde terminaremos montando el gráfico sectorial o de tarta.
Antes de empezar con el gráfico deberá asociar este nuevo formulario al evento clic de la opción Ver estadísticas del menú principal. Para esto procederemos de la siguiente forma:

Private Sub MenuItem2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem2.Click
‘Creamos un objeto del
tipo del formulario.
Dim ObjGrafico As New
Graficos()
‘Y lo mostramos.
ObjGrafico.Show()
End Sub
Ya no es posible mostrar un formulario como lo hacía antes en versiones anteriores de Visual Basic, ahora previamente tendrá que crearse un objeto del tipo formulario y luego hacer la llamada para mostrarlo. Si lo desea, puede hacer una prueba para comprobar el error que se genera.

Desarrollo del gráfico paso a paso
Para poder trabajar con gráficos, la plataforma .NET cuenta con un espacio de nombres denominado System Drawing que nos ayudará a realizar las tareas básicas, como por ejemplo el trazado de líneas y puntos. Para realizar desarrollos algo más complejos tendrá que hacer uso de System Drawing.Drawing2D, con el que podrá aumentar la dificultad en los gráficos.
Es muy importante que el código GDI que usted desarrolle esté incluido dentro de un evento Paint. Este evento se ejecuta tantas veces como deba ser repintado el formulario, y no sólo la primera vez. De esta forma se asegurará de que el gráfico representado no desaparezca con acciones como minimizar la ventana o con la superposición de una ventana nueva.
Una vez elegido el evento debemos tener en cuenta que a la hora de trabajar con gráficos necesitaremos crear una referencia al área donde vamos a dibujar. Por este motivo siempre que trabajemos en entorno gráfico haremos uso de una estructura similar a la que se muestra a continuación. A ella se irán añadiendo el resto de instrucciones, según sea el caso.

Private Sub Principal_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
Dim Superficie As Graphics
Superficie = e.Graphics
‘Aquí añadiriamos el resto
‘de las líneas‘Según el caso
End Sub

Ya contamos con una definición de superficie gráfica. A continuación tendremos que determinar el color y el grosor con el que vamos a empezar a pintar. Para indicar y almacenar este tipo de información contamos con la clase Pen, en nuestro ejemplo la llamaremos Lapiz.
Generalmente los gráficos un poco más complejos como el que nos ocupa se apoyan en estructuras más simples; en este caso para dibujar nuestro diagrama sectorial haremos uso de una elipse y varios rectángulos. Estos nos proporcionan una región rectangular de área de contexto gráfico. Especificaremos en ellos las coordenadas X e Y así como el ancho y el alto (ver Figura 2).
Llegados a este punto, necesitamos dibujar los distintos sectores que conformarán la totalidad del diagrama propuesto. Estos sectores no son otra cosa que ángulos, y en ellos especificaremos el ángulo de comienzo y su barrido o tamaño. Para dibujar y rellenar los ángulos contamos con el método FillPie del objeto de contexto gráfico, con el que iremos dibujando y rellenando los distintos ángulos hasta completar la totalidad del círculo. Como ejemplo le mostramos cómo sería para los dos primeros colores, ya que el resto sería similar.

‘Rellena las secciones con diferentes colores
Relleno.Color = Color.Blue
Superficie.FillPie(Relleno, RectanguloSuperior, 0, 45)
Relleno.Color = Color.Goldenrod
Superficie.FillPie(Relleno, RectanguloSuperior, 45, 30)

El resultado de esta porción de código está plasmado en la Figura 3 , donde se puede observar la evolución del gráfico por sectores hasta momentos antes de completarlo.
Una vez que complete el círculo de nuestro programa estadístico deberíamos indicar, como es natural, cuáles son los datos que hemos querido representar en cada uno de los sectores anteriormente creados. Para esto haremos uso de DrawString, que nos permite dibujar una cadena de texto especificada con los objetos Brush y Font que le indiquemos previamente. A continuación le mostramos cómo sería la primera opción, ya que el resto se haría de una forma similar.

‘Digujando las etiquetas del gráfico
Relleno.Color = Color.White
Superficie.DrawString(“1ª Opción”, Fuente, Relleno, 150, 110)
Superficie.Dispose()

Puede ver el resultado del gráfico completo con sus respectivas opciones de texto en la Figura 4.
Para terminar le mostramos el listado completo y comentado del proyecto, confiamos en que con él y con nuestras explicaciones a lo largo del capítulo no tenga mayores dificultades en realizarlo usted mismo. Puede observar el resultado final en la Figura 5.


Listado completo del ejemplo
------------------------------------------
Private Sub Principal_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
Dim Superficie As Graphics
Dim Lapiz As Pen
Dim RectanguloSuperior As Rectangle
Dim RectanguloInferior As Rectangle
Dim RectanguloRelleno As Rectangle
Dim Relleno As SolidBrush
Dim Fuente As Font
‘Obtenemos el objeto del contexto gráfico
Superficie = e.Gr

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información