1. Programación 2
Unidad 03 – Entorno Visual

2. Logro 3 – Entorno Visual
Unidad
Al finalizar la unidad, el alumno utiliza controles
predefinidos por el lenguaje, componentes gráficos,
buffers, imágenes y Sprites, de manera precisa y
eficaz, en el diseño y construcción de Programas
Orientados a Objetos de entorno visual con interfaz
profesional y agradable para el usuario.

3. Entorno3 – Entorno Visual
Unidad Visual
 Aplicaciones que se crean teniendo como base un
formulario (ventana) y un conjunto de componentes
visuales que facilitan la interacción con el usuario.
 Un sistema de ventanas permite al usuario de trabajar en
varios programas al mismo tiempo. Cada programa se
ejecuta en su propia ventana, generalmente un área de la
pantalla rectangular.

4. Entorno3 – Entorno Visual
Unidad Visual
 En Visual Studio, para crear una aplicación visual
podemos hacer lo siguiente:

5. Entorno3 – Entorno Visual
Unidad Visual
 Como resultado de lo anterior, obtenemos un proyecto
Windows Forms Application, donde, por defecto, aparece
una ventana llamada Form1.

6. Entorno3 – Entorno Visual
Unidad Visual
 En este formulario podemos colocar cualquier componente que
aparece en el ToolBox (Ctrl + Alt+X)
 Para colocar cualquier componente, basta con arrastrarlo sobre el
formulario.

7. Unidad 3 – Entorno Visual
Gráficos en Entorno
Visual

8. Timer - Explicación
 Es un componente no visual que permite
ejecutar un evento cada cierto intervalo de
tiempo de forma automática.
TIMER
100
99
clic
98
…
tecla 3
Los eventos normales se 2
invocan dependiendo de la 1
interacción del usuario.
Evento Tick
Por ejemplo: clic, mover,
presionar tecla, etc.

9. Timer – Propiedades y
Eventos
 El timer tiene 2 propiedades importantes:
 El único evento del timer es el Tick, que se ejecutará
cada <Interval> milisegundos siempre y cuando el timer
tenga la propiedad <Enabled> en true.

10. Canvas o Lienzo

11. Canvas o Lienzo
 El Canvas o Lienzo, también conocido como
Graphics en .NET, representa una capa de dibujo en
pantalla.
 Todos los controles de windows tienen asociado a
ellos un Canvas que utilizan para poder dibujar.
 Todo lo que vemos en windows ES DIBUJADO
sobre un Canvas, y a medida que se van poniendo
uno sobre el otro, obtenemos el efecto de
profundidad.

12. Canvas o Lienzo

13. Canvas o Lienzo – Un botón
 Por ejemplo, un botón tiene su propio canvas
de dibujo y sobre este se pinta todo el botón
para dar el efecto correcto.
Se pinta el fondo
Se pintan las esquinas
Se pintan los bordes
Se pinta el texto

14. Evento Paint

15. Evento Paint
 Todos los controles tienen un evento llamado Paint
que es invocado cada vez que el control necesita
volverse a pintar.
 Primera vez que se muestra.
 Apareció nuevamente en pantalla.
 Fue tapado por otro control.
 Nosotros podemos interceptar este evento para
dibujar cosas adicionales en los controles y así
personalizarlos como mejor nos parezca.

16. Un botón configurado
 Por ejemplo, podemos pintar una cara feliz al lado izquierdo del
texto.
Se pinta el fondo
Para ello debemos utilizar
Para ello debemos utilizar
Se pintan las esquinas la variable Graphics que
la variable Graphics que
se encuentra dentro del
se encuentra dentro del
Se pintan los bordes objeto PaintEventArgs
objeto PaintEventArgs
recibido como parámetro
recibido como parámetro
Se pinta el texto en el evento Paint.
en el evento Paint.
Evento Paint
System::Void button1_Paint(System::Object^ sender, Forms::PaintEventArgs^ e)
{
e->Graphics->…
}

17. Animaciones

18. Canvas - Animaciones
 Para crear animaciones, necesitamos pintar todos
los cuadros de la animación (uno por uno) para así
dar el efecto deseado.
1 2 3
• En este caso, no podemos esperar a que se ejecute el
evento Paint o tendríamos una animación que solo se
mueve cuando el usuario tapa la ventana, pasa el
mouse por arriba, etc.

19. Canvas – Animaciones con
Timer
 Para realizar el proceso de dibujo constantemente,
debemos utilizar un Timer.
 En el evento Tick del timer debemos crear un nuevo
Canvas (o Graphics en .NET) que corresponda al área
dónde queremos pintar.
 Por lo general, el área será la del formulario pero puede
ser de cualquier otro control.
 Dibujar lo que queramos sobre el canvas y liberar el
objeto.

20. Animaciones – Evento Tick
del Timer
System::Void timer1_Tick(System::Object^ sender,
System::EventArgs^ e)
{
// Crear el canvas con el area del formulario (this)
Graphics ^canvas = this->CreateGraphics();
// Dibujar sobre el canvas
// ...
// Liberar el canvas
delete canvas;
}

21. Clase Graphics

22. Graphics - Descripción
 La clase Graphics de .NET es una clase que permite
realizar operaciones con un canvas. Esta clase se
encuentra dentro del namespace System::Drawing.
 El sistema de coordenadas comienza en 0,0
(esquina superior izquierda) y continua hacia la
derecha el eje x positivo y hacia abajo el eje y
positivo.
(0,0) x positivo
y positivo

23. Graphics - VisibleClipBounds
 Contiene las dimensiones de la parte visible del canvas.
(0,0)
VisibleClipBounds.Height
(VisibleClipBounds.Right,
VisibleClipBounds.Width VisibleClipBounds.Bottom)

24. Métodos de Dibujo
Para toda esta sección se asumirá que se tiene un
puntero a una clase Graphics llamado g.
System::Drawing::Graphics ^g;
Además se asumirá que se ha incluido el namespace
System::Drawing

25. Clear
 Pinta toda la pantalla con un color predeterminado. Este efecto
se puede simular pintando un cuadrado sólido de un color
predeterminado.
 Los colores se obtienen de System::Drawing::Colors.
g->Clear(Colors::Red) g->Clear(Colors::Blue)

26. Rectángulos
DrawRectangle y FillRectangle
DrawRectangle FillRectangle
Parámetros: Parámetros:
 Tipo de lapiz  Tipo de fondo
 X  X
 Y  Y
 Ancho  Ancho
 Alto  Alto
Ejemplo: Ejemplo:
g->DrawRectangle(Pens::Red, g->FillRectangle(Brushes::Red,
5, 15, 25, 10); 5, 15, 25, 10);
(5, 15) (5, 15)
(30, 25) (29, 24)

27. Elipses
DrawEllipse y FillEllipse
DrawEllipse FillEllipse
Parámetros: Parámetros:
 Tipo de lapiz  Tipo de fondo
 X  X
 Y  Y
 Ancho  Ancho
 Alto  Alto
Ejemplo: Ejemplo:
g->DrawEllipse(Pens::Red, 5, g->FillEllipse(Brushes::Red, 5,
15, 25, 10); 15, 25, 10);
(5, 15) (5, 15)
(30, 25) (29, 24)

28. Líneas
DrawLine
DrawLine
Parámetros:
 Tipo de lapiz
 X1
 Y1
 X2
 Y2
Ejemplo:
g->DrawLine(Pens::Red, 5, 15, 30, 25);
(5, 15)
(30, 25)

29. Imágenes
DrawImageUnscaled, DrawImage
DrawImageUnscaled DrawImage
Parámetros: Parámetros:
 Imagen (Obtenida de un pictureBox)  Imagen (Obtenida de un pictureBox)
 X  X
 Y  Y
 Ancho
 Alto
Ejemplo:
g->DrawImageUnscaled( Ejemplo:
pictureBox1->Image, 5, 15); g->DrawImage(pictureBox1->Image,
5, 15, 25, 10);
(5, 15) (5, 15)
(25, 10)

30. Texto
DrawString
DrawString
Parámetros:
 Texto a pintar
 Tipo de fuente
 Tipo de fondo (Color del texto)
 X
 Y
Ejemplo:
g->DrawString("Hola que tal", this->Font, Brushes::Red, 5, 15);
(5, 15)
Hola que tal

31. Medir texto
MeasureString
MeasureString
Permite obtener las dimensiones de ancho y alto (en pixeles) de una
cadena de texto.
Parámetros:
 Texto a pintar
 Tipo de fuente
 Tipo de fondo (Color del texto)
 X
 Y
Ejemplo:
SizeF dimensiones = g->MeasureString("Hola que tal", this->Font);
int ancho = dimensiones.Width;
int alto = dimensiones.Height;

32. Colores, tipos de pincel y
fuentes

33. Colores, tipos de pincel y
fuentes
 En los ejemplos anteriores hemos visto que los
métodos de dibujo reciben como parámetro los
colores y tipos de fuente.
 Hasta el momento hemos utilizado los colores y
fuentes por defecto, es decir, los que ya vienen con
el software.
 Sin embargo, podemos generar nuestros propios
colores y configurarlos como mejor nos parezca.

34. Ejemplos - Pens
 En lugar de usar Pens::Red que nos da una línea
roja de ancho 1. Podemos utilizar:
Pen ^miLapiz = gcnew Pen(Color::FromArgb(255, 50, 0), 10);
miLapiz->LineJoin = Drawing2D::LineJoin::Round;
miLapiz->DashStyle = Drawing2D::DashStyle::Dash;
g->DrawRectangle(miLapiz, 5, 15, 200, 200);
 Esto crea un rectángulo de:
 Color de borde (255 de rojo, 50 de verde y 0 de azul)
 Ancho 10
 Con bordes redondeados
 Con bordes semicortados

35. Ejemplos - Brushes
 En lugar de usar Brushes::Red que nos da un fondo
rojo sólido. Podemos utilizar:
TextureBrush ^miBrocha = gcnew TextureBrush(pictureBox1->Image);
g->FillRectangle(miBrocha, 5, 15, 200, 200);
 Esto crea un rectángulo relleno con la imagen del
pictureBox1.
SolidBrush ^miBrocha = gcnew SolidBrush(Color::FromArgb(255, 50, 0));
g->FillRectangle(miBrocha, 5, 15, 200, 200);
 Esto crea un rectángulo relleno con un color que
tiene 255 de rojo, 50 de verde y 0 de azul.

36. Ejemplos - Fuente
 En lugar de usar this->Font que nos imprime
un texto con el tipo y tamaño de letra del
formulario.
Drawing::Font ^miFuente = gcnew Drawing::Font("Arial Black", 24);
g->DrawString("Hola mundo", miFuente, Brushes::Red, 5, 15);
 Esto imprime el texto Hola mundo utilizando
la fuente Arial Black con tamaño 24.

37. Guardando colores como int
 En el entorno visual tenemos que poder convertir
los colores a enteros para poder almacenarlos
en nuestras clases.
 Para crear un color aleatorio:
System::Random ^r = gcnew System::Random();
Drawing::Color col = Drawing::Color::FromArgb(r->Next(255), r->Next(255),
r->Next(255));
 Para convertir el Drawing::Color (col) a entero:
Int colInt = ColorTranslator::ToWin32(col);
 Para convertir el color entero (colInt) a un
Drawing::Color
Drawing::Color col2 = ColorTranslator::FromWin32(colInt);