Entorno visual p1
-
Upload
sergio-lora -
Category
Documents
-
view
263 -
download
1
Transcript of Entorno visual p1
![Page 1: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/1.jpg)
Programación 2
Unidad 03 – Entorno Visual
![Page 2: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/2.jpg)
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.
![Page 3: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/3.jpg)
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.
![Page 4: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/4.jpg)
Unidad 3 – Entorno VisualEntorno Visual En Visual Studio, para crear una aplicación visual
podemos hacer lo siguiente:
![Page 5: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/5.jpg)
Unidad 3 – Entorno VisualEntorno Visual
Como resultado de lo anterior, obtenemos un proyecto Windows Forms Application, donde, por defecto, aparece una ventana llamada Form1.
![Page 6: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/6.jpg)
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.
![Page 7: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/7.jpg)
Unidad 3 – Entorno VisualGráficos en Entorno Visual
![Page 8: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/8.jpg)
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
![Page 9: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/9.jpg)
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.
![Page 10: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/10.jpg)
Canvas o Lienzo
![Page 11: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/11.jpg)
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.
![Page 12: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/12.jpg)
Canvas o Lienzo
![Page 13: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/13.jpg)
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
![Page 14: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/14.jpg)
Evento Paint
![Page 15: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/15.jpg)
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.
![Page 16: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/16.jpg)
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.
![Page 17: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/17.jpg)
Animaciones
![Page 18: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/18.jpg)
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.
![Page 19: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/19.jpg)
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.
![Page 20: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/20.jpg)
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;
}
![Page 21: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/21.jpg)
Clase Graphics
![Page 22: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/22.jpg)
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
![Page 23: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/23.jpg)
Graphics - VisibleClipBounds
Contiene las dimensiones de la parte visible del canvas.
(0,0)
VisibleClipBounds.Height
VisibleClipBounds.Width
(VisibleClipBounds.Right, VisibleClipBounds.Bottom)
![Page 24: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/24.jpg)
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
![Page 25: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/25.jpg)
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)
![Page 26: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/26.jpg)
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)
![Page 27: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/27.jpg)
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)
![Page 28: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/28.jpg)
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)
![Page 29: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/29.jpg)
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)
![Page 30: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/30.jpg)
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
![Page 31: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/31.jpg)
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;
![Page 32: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/32.jpg)
Colores, tipos de pincel y fuentes
![Page 33: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/33.jpg)
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.
![Page 34: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/34.jpg)
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
![Page 35: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/35.jpg)
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.
![Page 36: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/36.jpg)
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.
![Page 37: Entorno visual p1](https://reader034.fdocuments.co/reader034/viewer/2022042615/55abe6c81a28abc4678b4590/html5/thumbnails/37.jpg)
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);