Capítulo 27: Figuras en Small Basic

Diario de un programador día 71

Líneas

Recuerdo que en la clase pasada tuve que utilizar bucles para dibujar líneas. Pues bien, me acabo de dar  cuenta que existe una operación que me permite dibujar líneas simplemente escribiendo sus coordenadas de inicio y fin. Esta es la operación GraphicsWindow.DrawLine(x1,y1,x2,y2) Donde x1,y1 marcan la coordenada de inicio de la línea y x2,y2 marcan el final de la línea. Por ejemplo:

GraphicsWindow.DrawLine(10,10,100,10)

Esto dibuja una línea horizontal que parte en la posición 10,10 y termina en la posición 100,10

Para dibujar una línea vertical, simplemente hay que cambiar las coordenadas

GraphicsWindow.DrawLine(10,10,10,100)

OK, ahora con estos conocimientos, voy a intentar dibujar un cuadrado, no creo que sea tan difícil.

GraphicsWindow.DrawLine(10,10,10,100)'vertical izquierda

GraphicsWindow.DrawLine(100,10,100,100)'vertical derecha'

GraphicsWindow.DrawLine(10,10,100,10)'horizontal superior

GraphicsWindow.DrawLine(10,100,100,100)'horizontal inferior

Ahora que ya manejo un poco esto de las líneas, voy a darle un poco de color y a mezclarla con un ciclo for, dentro del cual iré modificando el grosor de la línea.

El código me quedó así:

GraphicsWindow.BackgroundColor = "black"

GraphicsWindow.PenColor = "red"

For i = 1 To 10

  GraphicsWindow.PenWidth = i

  GraphicsWindow.DrawLine(10,10 * i,100, i * 10)

EndFor

Y este fue el resultado:

Dibujando figuras.

Para facilitar aún más las cosas, existen operaciones que permiten dibujar figuras básicas como círculos, triángulos o rectángulos.

Cuando se tienen que dibujar formas, normalmente hay dos tipos de operaciones para cada una. Son las operaciones Draw de dibujo y las operaciones Fill de relleno. Las operaciones Draw dibujan el contorno de la forma usando un lápiz, y las operaciones Fill rellenan la forma usando una brocha.

Para dibujar un rectángulo (o cuadrado en este caso) se utiliza:

GraphicsWindow.DrawRectangle(x,y,ancho,alto) Donde (x, y) son las coordenadas donde se empieza a dibujar la figura, lo siguiente es el ancho y el alto de la figura (en pixeles)

GraphicsWindow.DrawRectangle(50,50,100,100)

Mucho más sencillo que el cuadrado que se hizo en la página anterior.

Para dibujar un cuadrado relleno de color se utiliza la siguiente instrucción:

GraphicsWindow.FillRectangle(x,y,ancho,alto)

Para cambiar el color, hay que cambiar el color de la brocha.

Ejemplo:

GraphicsWindow.BrushColor = "red"

GraphicsWindow.FillRectangle(10,10,100,100)

Para dibujar círculos, se utiliza la instrucción GraphicsWindow.DrawEllipse(x,y,ancho,alto)

Donde (x, y) son las coordenadas de ubicación, lo siguiente es el ancho y el alto de la figura (en pixeles)

Para dibujar la misma figura rellena se utiliza la instrucción FillEllipse.

Ejemplos:

GraphicsWindow.PenColor = "Red"

GraphicsWindow.DrawEllipse(10, 10, 100, 100)

GraphicsWindow.BrushColor = "blue"

GraphicsWindow.FillEllipse(60, 100, 150, 150)

Para crear un triángulo se utiliza la siguiente instrucción:

GraphicsWindow.DrawTriangle(x1,y1,x2,y2,x3,y3)

Ejemplo:

GraphicsWindow.DrawTriangle(0,100,100,100,50,10)

'(0,100) = vertice izquierdo

'(100,100) = vertice derecho

'(50,10) = vertice superior

 

Al igual que el anterior, para dibujar un triángulo relleno solo hay que cambiar Draw por Fill y no olvidar colocar un color con la brocha

GraphicsWindow.BrushColor = "Cyan"

GraphicsWindow.FillTriangle(0,100,100,100,50,10)

Una última figura para finalizar el capítulo de hoy (Que por cierto está en el manual)

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.PenColor = "LightBlue"

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

For i = 1 To 100 Step 5

  GraphicsWindow.DrawRectangle(100 - i, 100 - i, i * 2, i * 2)

EndFor

Eso es todo, por ahora. Será hasta la próxima clase.

Gustavo J. Cerda Nilo

Diciembre 2015, última actualización Mayo 2016