Manipular el entorno de desarrollo de lenguaje de programación visual
Entorno visual p1
-
Upload
sergio-lora -
Category
Documents
-
view
263 -
download
1
Transcript of Entorno visual p1
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);