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: bigpercynet@hotmail.com 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+

• PUNTO
• LÍNEA
• LA ESTRUCTURA RECTANGLE
• ELIPSE
• ARCO
• POLÍGONO
• CURVAS CARDINALES
• LOADING ICONS
• DRAWPIE
• DRAWSTRING
• MEASURESTRING
• DRAWPATH

 

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))