Programación 2

Unidad 03 – Entorno Visual

Unidad 3 – Entorno VisualLogroAl 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.

Unidad 3 – Entorno VisualEntorno 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.

Unidad 3 – Entorno VisualEntorno Visual En Visual Studio, para crear una aplicación visual

podemos hacer lo siguiente:

Unidad 3 – Entorno VisualEntorno Visual

Como resultado de lo anterior, obtenemos un proyecto Windows Forms Application, donde, por defecto, aparece una ventana llamada Form1.

Unidad 3 – Entorno VisualEntorno 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.

Unidad 3 – Entorno VisualGráficos en Entorno Visual

Timer - Explicación

Es un componente no visual que permite ejecutar un evento cada cierto intervalo de tiempo de forma automática.

1009998…321

Evento Tick

TIMER

Los eventos normales se invocan dependiendo de la

interacción del usuario.

Por ejemplo: clic, mover, presionar tecla, etc.

clic

tecla

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.

Canvas o Lienzo

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.

Canvas o Lienzo

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

Evento Paint

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.

Un botón configurado

Por ejemplo, podemos pintar una cara feliz al lado izquierdo del texto.

Se pinta el fondo

Se pintan las esquinas

Se pintan los bordes

Se pinta el texto

Evento Paint

System::Void button1_Paint(System::Object^ sender, Forms::PaintEventArgs^ e)

{

e->Graphics->…

}

Para ello debemos utilizar la variable Graphics que se encuentra dentro del objeto PaintEventArgs

recibido como parámetro en el evento Paint.

Para ello debemos utilizar la variable Graphics que se encuentra dentro del objeto PaintEventArgs

recibido como parámetro en el evento Paint.

Animaciones

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.

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.

Animaciones – Evento Tick del TimerSystem::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;

}

Clase Graphics

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

Graphics - VisibleClipBounds

Contiene las dimensiones de la parte visible del canvas.

(0,0)

VisibleClipBounds.Height

VisibleClipBounds.Width

(VisibleClipBounds.Right, VisibleClipBounds.Bottom)

Métodos de DibujoPara 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 namespaceSystem::Drawing

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)

RectángulosDrawRectangle y FillRectangle

DrawRectangle Fil lRectangle

Parámetros: Tipo de lapiz X Y Ancho Alto

Ejemplo:g->DrawRectangle(Pens::Red,

5, 15, 25, 10);

Parámetros: Tipo de fondo X Y Ancho Alto

Ejemplo:g->FillRectangle(Brushes::Red,

5, 15, 25, 10);

(5, 15)

(30, 25)

(5, 15)

(29, 24)

ElipsesDrawEllipse y FillEllipse

DrawEll ipse Fil lEl l ipse

Parámetros: Tipo de lapiz X Y Ancho Alto

Ejemplo:g->DrawEllipse(Pens::Red, 5,

15, 25, 10);

Parámetros: Tipo de fondo X Y Ancho Alto

Ejemplo:g->FillEllipse(Brushes::Red, 5,

15, 25, 10);

(5, 15)

(30, 25)

(5, 15)

(29, 24)

LíneasDrawLine

DrawLine

Parámetros: Tipo de lapiz X1 Y1 X2 Y2

Ejemplo:g->DrawLine(Pens::Red, 5, 15, 30, 25);

(5, 15)

(30, 25)

Imágenes DrawImageUnscaled, DrawImage

DrawImageUnscaled DrawImage

Parámetros: Imagen (Obtenida de un pictureBox) X Y

Ejemplo:g->DrawImageUnscaled(

pictureBox1->Image, 5, 15);

Parámetros: Imagen (Obtenida de un pictureBox) X Y Ancho Alto

Ejemplo:g->DrawImage(pictureBox1->Image,

5, 15, 25, 10);

(5, 15) (5, 15)

(25, 10)

TextoDrawString

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

Medir textoMeasureString

MeasureStringPermite 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;

Colores, tipos de pincel y fuentes

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.

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

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.

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.

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::ColorDrawing::Color col2 = ColorTranslator::FromWin32(colInt);