CAPÍTULO III: FORMAS BÁSICAS GDI+

(GDI+ CON VISUAL BASIC .NET)

 

Fecha: 03/Sep/2005 (28/08/2005
Autor: Arbis Percy Reyes Paredes 
Email: [email protected]
http://percyreyes.blogspot.com 

Joven desarrollador de aplicaciones Web y Servicios Web XML en Visual Basic .NET y Visual C# .NET con bases de datos SQL Server 2000 - 2005.

¡ Los peruanos Sí podemos !

En el capítulo anterior habíamos estudiado las clases y estructuras que no permiten crear objetos (Graphics, Pen, Color...) que usaremos para dibujar todo tipo de gráficos y salidas textuales, pues ahora pasaremos a usar estos objetos dibujando un poco de lo que la imaginación lo permita.

En este artículo estudiaremos:

FORMAS BÁSICAS  GDI+

 

FORMAS BÁSICAS GDI+

Revisemos la manera de usar GDI++ para dibujar formas básicas como por ejemplo, puntos, líneas, rectángulos, círculos, elipses, y también algunas formas irregulares, todo esto será tratado en este CAPÍTULO III.

Nota: Todo las representaciones se hará sobre un objeto TextBox.

PUNTO

El punto es la forma más sencilla de crear, necesitando para ello dos valores tipo entero que representarán las coordenadas X y Y . El punto es el componente primitivo para dibujar cualquier otra forma, como por ejemplo: líneas, rectángulos, elipses... ahora vamos a crear un objeto punto.

      Dim myPoint As Point = New Point(130, 70)

La representación de un punto la haremos definiendo un círculo muy pequeño. Así:


Dim myPoint As Point = New Point(130, 170)
Dim myLapicero As New Pen(Color.Red, 1)
Me.TextBox1.CreateGraphics.DrawEllipse(myLapicero, New Rectangle(myPoint, New Size(1, 1)))

LÍNEA

Para representar una línea nesecitamos de un objeto Pen y dos puntos, las cuales serán unidas usando el método DrawLine. Ejemplo:

Dim myStartPoint As Point = New Point(130, 170)
Dim myEndPoint As Point = New Point(230, 270)
Dim myLapicero As New Pen(Color.Peru, 2)
Me.TextBox1.CreateGraphics.DrawLine(myLapicero, myStartPoint, myEndPoint)

Así como el método DrawLine nos ayuda a represeenta una línea, existe el método DrawLines que nos permite representar  línea quebradas, recibiendo como parámetros un objeto Pen y un array de puntos.  Ejemplo.

'creando el Pen
Dim myLapicero As New Pen(Color.Peru, 2)

'creando los puntos
Dim myStartPoint As Point = New Point(130, 170)
Dim myPoint2 As Point = New Point(130, 70)
Dim myPoint3 As Point = New Point(230, 170)
Dim myEndPoint As Point = New Point(230, 70)

'creo el array de puntos
Dim myArrayPoints() As Point = New Point() {myStartPoint, myPoint2, myPoint3, myEndPoint}

'representado la línea quebrada, quedando una letra N
Me.TextBox1.CreateGraphics.DrawLines(myLapicero, myArrayPoints)
LA ESTRUCTURA RECTANGLE

Un rectángulo puede ser representado definiendo algunos parámetros como el vértice superior izquierdo, el ancho y altura. No olvide que también necesitará de un objeto Pen. Ejemplo

Dim myLapicero2 As New Pen(Color.Blue, 5) 'de grosor 5
Me.TextBox1.CreateGraphics.DrawRectangle(myLapicero2, New Rectangle(New Point(50, 60), New Size(200, 200)))
'Esto también es válido
Me.TextBox1.CreateGraphics.DrawRectangle(myLapicero2, New Rectangle(50, 60, 200, 200))
 
PROPIEDADES

Bottom Obtiene la coordenada y del borde inferior de esta estructura Rectangle.
Height Obtiene o establece el alto de esta estructura Rectangle.
IsEmpty Comprueba si todas las propiedades numéricas de este objeto Rectangle tienen valores de cero.
Left Obtiene la coordenada x del borde izquierdo de esta estructura Rectangle.
Location Obtiene o establece las coordenadas de la esquina superior izquierda de esta estructura Rectangle.
Right Obtiene la coordenada x del borde derecho de esta estructura Rectangle.
Size Obtiene o establece el tamaño de este Rectangle.
Top Obtiene la coordenada y del borde superior de esta estructura Rectangle.
Width Obtiene o establece el ancho de esta estructura Rectangle.
X Obtiene o establece la coordenada x de la esquina superior izquierda de esta estructura Rectangle.
Y Obtiene o establece la coordenada y de la esquina superior izquierda de esta estructura Rectangle.

MÉTODOS PRINCIPALES DE RECTANGLE

Ceiling Convierte la estructura RectangleF especificada en una estructura Rectangle redondeando los valores de RectangleF a los valores enteros superiores siguientes.
Contains Determina si el punto especificado está dentro de la región rectangular que define Rectangle.
Equals

 

Reemplazado. Comprueba si obj es una estructura Rectangle con la misma ubicación y el mismo tamaño que esta estructura Rectangle.
Inflate Crea y devuelve una copia aumentada de la estructura Rectangle especificada. La copia se aumenta en la cantidad especificada.
Intersect  

Reemplaza esta estructura Rectangle con la intersección de ella misma y la estructura Rectangle especificada.
IntersectsWith  

Determina si este rectángulo tiene una intersección con otro rectángulo.
Round Convierte la estructura RectangleFen Rectangle redondeando los valores de RectangleF a los valores enteros más cercanos.
ToString  

Convierte los atributos de este Rectangle en una cadena inteligible para el usuario.
Truncate  

Convierte el objeto RectangleF especificado en Rectangle mediante el truncamiento de los valores RectangleF.
Union  

Obtiene una estructura Rectangle que contiene la intersección de dos estructuras ectangle R.

Además, se dispone del método DrawRectangles, que espera un array de rectángulos y los dibuja todos a la vez.

Dim myLapicero2 As New Pen(Color.Blue, 5) 'de grosor 5
Dim myRectangle1 As New Rectangle(New Point(50, 60), New Size(300, 200))
Dim myRectangle2 As New Rectangle(New Point(60, 70), New Size(250, 150))
Dim myRectangle3 As New Rectangle(New Point(70, 80), New Size(200, 100))
Dim myRectangle4 As New Rectangle(New Point(80, 90), New Size(150, 50))
Dim myRectangle5 As New Rectangle(New Point(90, 100), New Size(100, 30))
Dim myRectangle6 As New Rectangle(New Point(100, 110), New Size(50, 10))

Dim myArrayRectangles() As Rectangle = New Rectangle() _
{myRectangle1, myRectangle2, myRectangle3, myRectangle4, myRectangle5, myRectangle6}

Me.TextBox1.CreateGraphics.DrawRectangles(myLapicero2, myArrayRectangles)

USO DEL MÉTODO Union 

Dim myLapicero2 As New Pen(Color.Blue, 1)
'creamos dos objetos rectangles
Dim myRectangle1 As New Rectangle(New Point(70, 80), New Size(200, 100))
Dim myRectangle2 As New Rectangle(New Point(80, 60), New Size(150, 50))

Dim myArrayRectangles() As Rectangle = New Rectangle() {myRectangle1, myRectangle2}
Me.TextBox1.CreateGraphics.DrawRectangles(myLapicero2, myArrayRectangles)

'construimos un rectángulo a partir de la unión de los rectángulos myRectangle1 y myRectangle2
Dim myRectangleUnion As Rectangle = myRectangleUnion.Union(myRectangle1, myRectangle2)
Me.TextBox1.CreateGraphics.DrawRectangles(New Pen(Color.Red, 2), New Rectangle() {myRectangleUnion})
 


USO DEL MÉTODO  Intersect
Dim myLapicero2 As New Pen(Color.Blue, 1)
'creamos dos objetos rectangles
Dim myRectangle1 As New Rectangle(New Point(70, 80), New Size(200, 100))
Dim myRectangle2 As New Rectangle(New Point(80, 60), New Size(150, 50))

Dim myArrayRectangles() As Rectangle = New Rectangle() {myRectangle1, myRectangle2}
Me.TextBox1.CreateGraphics.DrawRectangles(myLapicero2, myArrayRectangles)


'construimos un rectángulo a partir de la intersección de los rectángulos myRectangle1 y myRectangle2
Dim myRectangleInterseccion As Rectangle = myRectangleInterseccion.Intersect(myRectangle1, myRectangle2)
Me.TextBox1.CreateGraphics.DrawRectangles(New Pen(Color.Red, 2), New Rectangle() {myRectangleInterseccion})

USO DEL MÉTODO Inflate

Dim myLapicero As New Pen(Color.Blue, 1)
Dim myRectangle As New Rectangle(New Point(150, 200), New Size(5, 5))
Dim i As Integer
For i = 0 To 20 Step 2
    'inflamos el tamaño del rectángulo myRectangle de 2 en 2
    myRectangle.Inflate(i, i)
    Me.TextBox1.CreateGraphics.DrawRectangles(Pens.Green, New Rectangle() {myRectangle})
Next

Sírvase a revisar a detalle los demás métodos y propiedades en la MSDN Library Online de Microsoft.

ELIPSE

Para representar una elipse hacemos uso del método DrawElipse que funciona de manera similar al método DrawRectangle tomando los mismo parámetros. Este método circunscribe una elipse dentro del rectangle especificado como parámetro. Aquí un ejemplillo.

'dibujamos una elipse

Dim myLapicero As New Pen(Color.Blue, 1)
Me.TextBox1.CreateGraphics.DrawEllipse(New Pen(Color.Peru, 1), _
New Rectangle(New Point(30, 20), New Size(150, 150)))

Este es otro ejemplo, dibujamos muchas elipse dándole la forma de un tubo doblado.

Dim i As Integer
Dim myLapicero As New Pen(Color.Blue, 1)

For i = 0 To 40
    Me.TextBox1.CreateGraphics.DrawEllipse(New Pen(Color.Peru, 2), _
    New Rectangle(New Point(30 + i * 5, 20 + i * 5), New Size(150, 150)))
Next

ARCO

Para dibujar un arco necesitamos definir un objeto Pen, un objeto Rectangle, un punto inicial para el arco y el  ángulo que debemos girar en el sentido de las agujas del reloj. Esta vez usaremos el método DrawArc. Esto es sumamente sencillo, pasemos con un ejemplo: Dibujemos un arco cuyo punto inicial es 45º  y con un ángulo de giro de 180º.

El código en Visual Basic .NET

Me.TextBox1.CreateGraphics.DrawArc(New Pen(Color.Red, 4), _
New Rectangle(250, 250, 250, 250), 45, 180)

 

LA CURVA BÉZIER

ara representar una curva bézier usaremos el método DrawBezier la cual se define por cuatro estructuras Point. Una curva Bézier está compuesta por sus puntos inicial y final y dos puntos de control. La función de los puntos de control no es que la curva pase por ellos, sino influenciar su dirección. Lo veremos con un ejemplo. La línea de color azul es la curva Bézier. Cada punto de control está unido por una línea imaginaria con su punto: el primero, con el inicial de la curva, y el segundo con el final. Pues bien, la curva inicia su recorrido en la dirección de la primera línea imaginaria, pero, a medida que avanza, rectifica su dirección para adecuarse a la que le marca la segunda línea imaginaria. Para entender mejor la función de los puntos de control pues tómelo como si estos puntos jalarán en su dirección, tanto el punto inicial como el punto final,  generándo curvas forzadas dándole cierta inflexión a la recta. ¿entendió...?, espero que sí. Ejemplo:

Me.TextBox1.CreateGraphics.DrawBezier(New Pen(Color.Orange, 2), _
New Point(20, 50), New Point(80, 10), New Point(120, 175), New Point(200, 200))

 

POLÍGONO

Dibujar un polígono requiere de un objeto Pen y un conjunto de puntos. El método DrawPolygon une estos puntos con rectas formando un polígono. veamos un ejemplo, dibujemos el siguiente polígono:

 

Para esto, necesitamos del siguiente código:

Dim myArrayPoints() As Point = New Point() {New Point(60, 100), New Point(20, 140), _
New Point(20, 180), New Point(60, 220), New Point(100, 220), _
New Point(140, 180), New Point(140, 140), New Point(100, 100)}
'dibujamos el polígono.
Me.TextBox1.CreateGraphics.DrawPolygon(New Pen(Color.Brown, 2), myArrayPoints)

Seguramente debe estar pensando que es posible hacer lo mismo usando el método DrawLines, ...vamos a ver que pasa.

Dim myArrayPoints() As Point = New Point() {New Point(60, 100), New Point(20, 140), _
New Point(20, 180), New Point(60, 220), New Point(100, 220), _
New Point(140, 180), New Point(140, 140), New Point(100, 100)}
 'dibujamos.
Me.TextBox1.CreateGraphics.DrawLines(New Pen(Color.Brown, 2), myArrayPoints)

Como verá los resultados son diferentes. El método DrawPolygon une el punto incial y final, mientras que método DrawLines tan sólo se limita a unir secuencialmente los puntos definidos en el array sin unir el punto inicial y el punto final. Esto será lo que representa esté método.

 

Si usted desea representar el polígono anterior usando el método DrawLines debe agregar al array de puntos el punto (60, 100), así:

Dim myArrayPoints() As Point = New Point() {New Point(60, 100), New Point(20, 140), _
New Point(20, 180), New Point(60, 220), New Point(100, 220), _
New Point(140, 180), New Point(140, 140), New Point(100, 100),    New Point(60, 100)  }
'dibujamos el polígono.
Me.TextBox1.CreateGraphics.DrawLines(New Pen(Color.Brown, 2), myArrayPoints)

 

CURVAS CARDINALES

El método que dibuja líneas cardinales se llama DrawCurve. Este tipo de curvas están definidas por un valor numérico nombrado TENSIÓN que determinará el grado de flexibilidad de la línea. El ejemplo muestra la utilidad de este valor tensión, cuando la tensión es cero entonces el dibujo tiene forma de |_|, cuando el valor de la tensión aumenta entonces también la flexibilidad de los lados de esta forma se expresa con mayor fuerza. Observe la figura.

Revise el código

Dim myArraySingle() As Single = New Single() {0, 0.5, 1, 1.5, 2, 3}
Dim mySingle As Single

'Dibujamos las curvas con distintos valores de tensión.
For Each mySingle In myArraySingle

    Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.DarkMagenta, 2), myArrayPoints, mySingle)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 0)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 0.5)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 1)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 1.5)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 2)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 2.5)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 3)
    'Me.TextBox1.CreateGraphics.DrawCurve(New Pen(Color.Brown, 2), myArrayPoints, 3.5)
Next

LOADING ICONS

También podemos trabajar con íconos usando el método DrawIcon. Este método dibuja la imagen representada por el objeto icon en las coordenadas especificadas. Por ejemplo, podemos dibujar algunos íconos sobre un control TextBox.

 

Código fuente:

Dim myFileOpenDialog As New OpenFileDialog

If myFileOpenDialog.ShowDialog = DialogResult.OK Then
    Dim ICONO As Icon = New Icon(myFileOpenDialog.FileName)

    If X + 2 * ICONO.Width + 10 > Me.TextBox1.Width Then
        Y += ICONO.Height + 10
        X = 10
    End If

    Me.TextBox1.CreateGraphics.DrawIcon(New Icon(myFileOpenDialog.FileName), X, Y)
    X += 10 + ICONO.Width
End If

DRAWPIE

Este método dibuja una forma circular definida por una elipse y determinada por un par de coordenadas, unos valores de ancho y alto y dos líneas radiales. Un ejemplo aclarará mejor este concepto. Representemos una región definida por las coordenadas (30,40), ancho=400, alto=250, y los ángulos incial=0º y de giro=270º.

Me.TextBox1.CreateGraphics.DrawPie(New Pen(Color.Purple, 2), _
New RectangleF(New PointF(30, 40), New SizeF(400, 250)), 0, 270)

DRAWSTRING

Como su nombre lo indica, este método nos ayuda a representar o dibujar salidas de texto, dándole un  formato adecuado  y estableciendo un relleno conveniente. Para esto, necesitamos definir algunos parámetros como la fuente, un par de coordenadas a partir de la cual se iniciará el pintado, y finalmente, un relleno atractivo para el texto (esta parte de relleno u objetos Brush, se explicarán en el siguiente capítulo). Veamos un ejemplillo...

Esto es sumamente sencillo....

Dim myText As String = "www.elguille.info"
Dim myfont As Font = New Font("Arial", 70, FontStyle.Italic)
Dim myBrush As System.Drawing.Brush = _
New System.Drawing.Drawing2D.HatchBrush(System.Drawing.Drawing2D.HatchStyle.Cross, Color.Green, Color.Orange)
Dim X As Integer = 10 : Dim Y As Integer = 10
' dibujamos...
Me.TextBox1.CreateGraphics.DrawString(myText, myfont, myBrush, X, Y)

MeasureString

Mide la cadena especificada al dibujarla con el objeto Font especificado. Con un ejemplo espero que comprenda mejor....

' RECUPERAREMOS EL TAMAÑO DE LA CADENA CUANDO ESTA ES DIBUJADA, LUEGO RELLENAREMOS LA BASE DE ESTA CADENA

Dim myText As String = "www.elguille.info"

' creamos una fuente
Dim myfont As Font = New Font("Arial", 70, FontStyle.Italic)

' creamos la brocha
Dim myBrush As System.Drawing.Brush = _
New System.Drawing.Drawing2D.HatchBrush(System.Drawing.Drawing2D.HatchStyle.Cross, _
Color.Green, Color.Orange)

' definiendo coordenadas
Dim X As Integer = 10 : Dim Y As Integer = 10

' Obtenemos el tamaño de la cadena myText usando el método MeasureString en su formato por defecto  
Dim mySize As SizeF =Me.TextBox1.CreateGraphics.MeasureString(myText, _
myfont, New SizeF(800, 200), StringFormat.GenericDefault, myText.Length, 1)     

' Ahora establecemos un tamaño myNewSize en base al tamaño recuperado anteriormente.
Dim myNewSize As SizeF = New SizeF(mySize.Width, mySize.Height)

' rellemos el fondo de esta cadena de texto.
Me.TextBox1.CreateGraphics.FillRectangle(Brushes.Orange, X, Y, myNewSize.Width, myNewSize.Height)

' dibujamos la línea de texto.
Me.TextBox1.CreateGraphics.DrawString(myText, myfont, myBrush, X, Y)

DrawPath

Dibuja un objeto GraphicsPath. Un objeto GraphicsPath representa una serie de líneas y curvas conectadas. Un trazado puede estar formado por un número indeterminado de figuras (subtrazados). Cada figura está formada por una secuencia de líneas y curvas conectadas o por una forma geométrica primitiva. El punto inicial de una figura es el primer punto de la secuencia de líneas y curvas conectadas. El punto final es el último punto de la secuencia. Los puntos inicial y final de una forma geométrica primitiva se definen mediante la especificación primitiva. Ejemplo.

Dim myGraphicsPath As New System.Drawing.Drawing2D.GraphicsPath
' agregamos una elipse al trazado
myGraphicsPath.AddEllipse(New Rectangle(New Point(100, 100), New Size(600, 300)))
'agregamos un rectángulo al trazado
myGraphicsPath.AddRectangle(New Rectangle(New Point(100, 100), New Size(600, 300)))
' definimos el estilo de fuente
Dim myFont As Font = New Font("Bodoni MT", 15, FontStyle.Strikeout, GraphicsUnit.Pixel, 1)
Dim myFontFamily As FontFamily = myfont.FontFamily '  FontFamily.GenericMonospace
' agregamos una cadena al trazado
myGraphicsPath.AddString("GDI+", myFontFamily, FontStyle.Underline, 200, New PointF(150, 100), StringFormat.GenericTypographic)
' dibujamos el trazado.
Me.TextBox1.CreateGraphics.DrawPath(New Pen(Color.YellowGreen, 2), myGraphicsPath)

Deseo que hasta este momento todo haya sido de claridad, si no es así, respire profundo y... anímese, aún falta muchísimo, aún falta muchos capítulos. Siento que va creciendo dentro de mí  la ilusión de terminar sano y salvo escribiendo todos los capítulos, espero ser más fuerte que mis sueños profundos, je, je, je...

Bueno, es hora de descansar, nos vemos en el siguiente CAPITULO.

Por favor, califica este artículo en PanoramaBox, pues así me animarás a continuar colaborando contigo.

Web Developer Percy Reyes                ®Todos los Derechos Reservados

Saludos desde Trujillo - Perú.


ir al índice