Creando elementos de interfaz gráfica - Parte 1

En mas de una ocasión me ha sido necesario el utilizar los métodos de dibujo que trae por defaul Visual Basic, ya sea para realizar una gráfica, un reporte o simplemente para enriquecer la interfaz de nuestra aplicación, por lo que creo que este tutorial de 3 partes les será de gran utilidad para adentrarse en este tema, cabe mencionar que el tutorial original en Ingles lo pueden consultar en Exforsys.

Creando elementos gráficos utilizando System.Drawing

En este tutorial vamos a aprender acerca de los objetos gráficos (Graphics Object), sistema de coordenadas de los formularios de Windows, dibujar textos en un formulario, dibujar figuras y trabajar con imágenes.

Entendiendo los objetos gráficos (Graphics Object)

La dirección de gráficos en Visual Studio .NET esta basado en GDI+ (Graphics Device Interface). La interfaz de dispositivo de gráficos nos permite exhibir gráficos en una pantalla o una impresora sin tener que manejar los detalles de un dispositivo de exhibición específico. Todo lo que se necesita hacer es hacer llamadas a los métodos de las clases de GDI+ y a estos métodos se encargan de hacer la correspondiente llama a los drivers de los dispositivos según lo necesitado, ya sea manejar la pantalla o la impresora.

Crear un objeto grafico (Graphics Object)

Esto se puede hacer de diferentes maneras:

I. Recibiendo una referencia del objeto grafico parte de System.Windows.Forms.PaintEventArgs en el evento System.Windows.Forms.Control.Paint de un formulario o control. Esta es la manera usual de obtener una referencia a un objeto grafico cuando se crea codigo de pintado en un control.

II. Llamando al metodo System.Windows.Forms.Control.CreateGraphics de un formulario o control para obtener una referenciia al objeto System.Drawing.Graphics que representa la interfaz de dibujo de un control o formulario que ya existe.

III. Creando un objeto System.Drawing.Graphics de cualquier objeto que herede de System.Drawing.Image. Este acercamiento es útil cuando usted quiere alterar una imagen ya existente.

Veamos un ejemplo rápido:

Private Sub Form1_Paint(ByVal sender As Object, ByVal pe As PaintEventArgs) Handles _ MyBase.Paint

        ' Declara el objeto gráfico

        ' Proveido en PaintEventArgs.

        Dim g As Graphics = pe.Graphics

        ' Insertar el código de dibujo aquí

    End Sub

Se puede administrar el Objeto Graphic fácilmente como se ve en el siguiente fragmento de código:

Public Class Form1

    Private Sub PaintObj(ByVal e As PaintEventArgs)

        Dim graphics As Graphics = e.Graphics

        Dim pen As New Pen(Color.Blue) ' Opaque blue

        graphics.DrawRectangle(pen, 10, 10, 200, 100)

    End Sub

    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint

        PaintObj(e)

    End Sub

End Class

Este código genera la salida que se muestra a continuación:

Entendiendo el sistema de coordenadas de Windows Forms

GDI+ utiliza 3 tipos de coordenadas: World, page y device. Las coordenadas World son las coordenadas que se utilizan para modelar un gráfico particular y son las coordenadas que se pasan a los métodos de. NET Framework. Las coordenadas Page se refieren al sistema de coordenadas utilizado por una superficie de dibujo, como un formulario o control. Las coordenadas Device son las coordenadas utilizadas por un dispositivo físico que se dibuja en una pantalla o una hoja de papel.

Cuando se llama al método myGraphics.DrawLine(myPen, 0, 0, 160, 80), los puntos que se pasan al System.Drawing.Graphics.DrawLine metodo —(0, 0) y (160, 80)— están en coordenadas World. Antes de que GDI+ pueda trazar la línea en la pantalla, las coordenadas pasan a través de una secuencia de transformaciones. Una transformación, llamada transformación World, convierte las coordenadas de World a coordenadas Page y otra transformación, llamada transformación Page, la  convierte a coordenadas de dispositivo.

Transformaciones y sistemas de coordenadas

Suponga que desea trabajar con un sistema de coordenadas que tiene su origen en el cuerpo del área de cliente en lugar de la esquina superior izquierda. Digamos, por ejemplo, que desea que el origen hasta los 100 píxeles desde el borde izquierdo del área de cliente y 50 píxeles desde la parte superior del área de cliente. En la ilustración siguiente se muestra el sistema de coordenadas.

Al realizar la llamada de myGraphics.DrawLine(myPen, 0, 0, 160, 80), se obtiene la línea que se muestra en la ilustración siguiente.

Las coordenadas de los extremos de la línea en los tres espacios de coordenadas son las siguientes:

World

(0, 0) to (160, 80)

Page

(100, 50) to (260, 130)

Device

(100, 50) to (260, 130)

El fragmento de código para dibujar la línea que se muestra en la imagen de arriba es la siguiente:

myGraphics.TranslateTransform(100, 50)

myGraphics.DrawLine(myPen, 0, 0, 160, 80)