capítulo 7 vs basic - controles que muestran imágenes y gráficos

Computación para Ingeniería I y Laboratorio Cap.7–Visual Basic–Controles que muestran Imágenes y Gráficos

CAPITULO 7 – VISUAL BASIC – CONTROLES QUE MUESTRAN IMÁGENES Y GRAFICOS

Como Windows es una interfaz gráfica de usuario, es importante tener una forma de presentar imágenes gráficas en la interfaz de una aplicación. Visual Basic incluye tres controles que facilitan el trabajo con gráficos: Form (Formulario) PictureBox (Cuadro de dibujo) Image (Imagen)

7.1 El Control Image (Imagen).- Este control se utiliza para presentar imágenes gráficas (mapa de bits, ícono, metarchivo, metarchivo mejorado o archivos JPEG o GIF) en una aplicación. El control Image responde al evento Clic lo que permite usarlo como un sustituto de los botones de comando, como elementos de una barra de herramientas o para crear animaciones sencillas.

7.1.1 Carga de una Imagen en el Control Image.- Se puede cargar una imagen gráfica en este control de dos maneras: durante el diseño de la aplicación o durante la ejecución. Para cargar una imagen en tiempo de diseño, seguir estos pasos:1. En el formulario, hacer clic sobre el control Image con el botón derecho del mouse y en el

menú contextual que aparece, seleccionar Propiedades. 2. En la ventana Propiedades, hacer clic en el botón...de la propiedad Picture. Visual Basic

visualiza el cuadro de diálogo Cargar imagen.

3. En la ventana Cargar imagen, elegir una imagen y hacer clic en Abrir. El control Image

ahora muestra la imagen seleccionada:Cuando se carga una imagen en un control Image, el control cambia su tamaño

automáticamente para ajustarse al de la imagen, independientemente del tamaño del control dentro del formulario.

7.1.2 Carga de una Imagen Usando el Portapapeles.- También se puede cargar una imagen a un control Image en tiempo de diseño si se lo pega desde otra aplicación. Por ejemplo, para cargar una imagen retocada en PhotoShop, sencillamente copiar la imagen al Portapapeles, seleccionar el control Image y seleccionar el comando Pegar del menú Edición

7.1.3 La Propiedad Stretch.- Si la propiedad Stretch está como True, la imagen ajustará su tamaño al cambiar el tamaño del control Image en tiempo de diseño. Es posible que la imagen (especialmente los mapas de bits) se distorsione si el tamaño de ésta es reajustada.

Ing. Hermas Herrera Callejas Página : 1 de 21


Stretch=False Stretch=TruePara eliminar una imagen, poner de nuevo la propiedad Picture a valor “” (Ninguno).

Para ello, hacer clic en el control Image, elegir la propiedad Picture en la ventana Propiedades, hacer doble clic en la palabra visualizada en la caja de valores y pulsar la tecla Delete (Supr).

7.1.4 Carga de una Imagen en Tiempo de Ejecución.- Para cargar un gráfico en el control Image en tiempo de ejecución utilizar la propiedad Picture y la función LoadPicture.Set Image1.Picture = LoadPicture (“C:\Imágenes\Gatito.bmp”)

Para borrar el gráfico de este control, utilizar la función LoadPicture sin especificar un nombre de archivo. El siguiente ejemplo borrará el control Image incluso si se cargó una imagen con la propiedad Picture en tiempo de diseño:Set Imagel.Picture = LoadPicture()

La siguiente aplicación, muestra la imagen Gatito.bmp si el usuario hace clic sobre el control Image; un doble clic sobre el control Image, borra la imagen.Private Sub Form_Load()‘Sitúa el control Imagel en esquina superior izquierda del formulario.Imagel.Move 0,0‘Ajusta el tamaño del formulario al del control Image.Form1.Height = Image1.HeightForm1.Width = Image1.WidthEnd SubPrivate Sub Image1_Click()‘Muestra la imagen Gatito.bmp en el control ImageSet Image1.Picture = LoadPicture(“C:\Gráficos\Gatito.bmp”)End SubPrivate Sub Image1_DblClick()‘Borra la imagen Gatito.bmp del control ImageSet Image1.Picture = LoadPicture()End Sub

Presionar la tecla F5 para ejecutar el programa y hacer clic sobre el control image....

para visualizar la imagen Gatito.bmp Se desarrolla ahora un programa que abre imágenes que se encuentran almacenadas

en distintos archivos de disco, con nombres que terminan en números: Imagen1, Imagen2, Imagen3 e Imagen4.

Seguir estos pasos:



1. Seleccionar el comando Nuevo proyecto del menú Archivo, para crear una nueva aplicación.

2. En el cuadro de herramientas, hacer doble clic sobre el control Image.3. En el formulario, arrastrar el control Image hasta situarlo en la esquina superior izquierda

del formulario.4. Hacer clic en el comando Copiar del menú Edición. Una copia del control Image se

guarda en el Portapapeles.5. Hacer clic en el comando Pegar del menú Edición. Visual Basic muestra un mensaje

preguntando si se desea crear una matriz de controles. Una matriz de controles es un grupo de objetos idénticos que se mostrarán en la interfaz del programa. Cada uno de los objetos del grupo comparte el mismo nombre de objeto, de forma que se puede seleccionar y definir simultáneamente el grupo entero de objetos.

6. Hacer clic en Sí para crear una matriz de controles. Visual Basic crea una matriz de controles Image y pega el segundo control Image en la esquina superior izquierda del formulario.

7. Arrastrar el segundo control Image hasta situarlo a la derecha del primero.8. Volver a hacer clic en el comando Pegar del menú Edición y después arrastrar el tercer

control Image a la parte inferior del primero.9. Volver a hacer clic en el comando Pegar del menú Edición y después arrastrar el cuarto

control Image a la parte inferior del segundo.10.En el cuadro de herramientas, hacer doble clic sobre el control CommandButton y en el

formulario, arrastrar hasta situarlo en la parte inferior del formulario.Establecer ahora, las propiedades de los controles contenidos en el formulario. Para

establecer las propiedades de los controles Image en grupo, situar el puntero del mouse en la parte superior izquierda del formulario y arrastrar el puntero en diagonal hacia abajo, hasta enmarcar los cuatro controles Image como se observa en la siguiente ilustración:

Al soltar el botón del mouse, los cuatro controles Image aparecerán seleccionados. Presionar la tecla F4 y establecer las siguientes propiedades:Matriz de control Image BorderStyle 1- Fixed Single

Stretch TrueLuego de establecer las propiedades de los controles Image, asignar las siguientes

propiedades al botón de comando Command1:CommandButton Name Mostrar

Caption Mostrar imágenesEn el formulario, hacer doble clic sobre el botón de comando Mostrar imágenes y en la

ventana de código digitar el siguiente procedimiento:Private Sub Mostrar_Click()‘Este procedimiento carga 4 archivos de imagen que están almacenados en la carpeta C:\Gráficos.Dim I As Byte For I = 1 To 4



Image1(I - 1).Picture = LoadPicture(”C:\Gráficos\Imagen”& I &“.bmp”) Next IEnd Sub

Guardar el formulario con el nombre Imágenes.frm y la aplicación con el nombre Imágenes.vbp.

Presionar la tecla F5 para ejecutar el programa y hacer clic en el botón Mostrar imágenes. En el formulario aparecerán las imágenes cargadas:

Las imágenes cargadas durante el diseño son guardadas y cargadas con la aplicación. Lo que significa que cuando se crea un archivo .EXE de la aplicación, no se necesitará acompañarlo de los archivos de imágenes utilizados. En cambio, cuando las imágenes se cargan en tiempo de ejecución, utilizando la función LoadPicture y se crea un archivo EXE, se debe acompañar éste con los archivos de imágenes utilizados.

7.1.5 Creación de Botones de Orden Gráficos.- Hasta ahora, en las aplicaciones desarrolladas, se ha empleado el control CommandButton como un medio para crear botones de orden. Visual Basic proporciona el control Image como otra alternativa para crear botones de orden basados en gráficos. Este control responde a los eventos Click, DblClick, MouseDown, MouseMove y MouseUp lo que permite usarlo como un sustituto del control CommandButton.

Botones de orden basados en gráficos Botón de orden basado en texto Desarrollar una aplicación en la que se ejecutarán órdenes utilizando botones de orden

basados en gráficos. Estos botones se hundirán o emergerán cuando se los pulse, como sucede con los botones que se pueden ver en otras aplicaciones desarrolladas para Windows. Seguir estos pasos:1. Seleccionar el comando Nuevo proyecto del menú Archivo, para crear una nueva

aplicación.2. Agregar tres controles Image en el formulario. Ordenarlos tal como se observa en la

ilustración próxima:



3. Guardar el formulario y la aplicación con nombres SensibilidadCursor.frm y SensibilidadCursor.vbp

4. Hacer clic en el control Image situado en el lado izquierdo del formulario.5. En la ventana Propiedades, en la propiedad (Nombre) digitar el nombre Botón para el

control Image.6. Hacer clic en el segundo control Image y en la ventana Propiedades digitar el mismo

nombre asignado al control Image seleccionado anteriormente. Visual Basic mostrará un mensaje preguntando si se desea crear una matriz de controles:

7. Hacer clic en Sí para crear una matriz de controles Image.8. Hacer clic en el tercer control Image y asignarle el mismo nombre asignado a los dos

controles anteriores.9. Agregar un control Label al formulario y modificar las propiedades Caption (Texto de

prueba) y Font (Arial, tamaño 18) de este control.

10.Agregar nueve controles Image al formulario. La interfaz debe ser similar a la ilustración

proxima:

N K S NS KS SS NB KB SB

11.Asignar los nombres que muestra la ilustración a cada uno de los nueve controles Image.12.Establecer a False la propiedad Visible de cada uno de los 9 controles Image

recientemente nombrados.13.Proceder a insertar los siguientes íconos en cada uno de los controles Image.Negrita Cursiva Subrayado NegritaSob CursivaSob SubrayadoSob NegritaBaj CursivaBaj SubrayadoBaj

N K S NS KS SS NB KB SB

En el formulario, seleccionar el control N y en la ventana Propiedades hacer clic en el botón ... de la propiedad Picture. En el cuadro de diálogo Cargar imagen, hacer doble clic en el archivo de imagen Negrita. Esto hará que el icono Negrita quede insertado en el control N.

Proceder de manera similar con los controles Image restantes:Al control K insertar el icono Cursiva.Al control S insertar el icono Subrayado.



Al control NS insertar el icono NegritaSob.Al control KS insertar el icono CursivaSob.Al control SS insertar el icono SubrayadoSob.Al control NB insertar el icono NegritaBaj.Al control KB insertar el icono CursivaBaj.Al control SB insertar el icono SubrayadoBaj.14.Agregar cuatro controles Image al formulario. Modificar el tamaño de estos controles y

ubicarlos en la parte inferior del formulario; además, nombrarlos tal como muestra la siguiente ilustración:

Botón F FS FB

Observar que el nombre Botón del control Image situado en la parte inferior izquierda del formulario es igual a los nombres de los controles Image situados en la parte superior izquierda del formulario. Estos cuatro controles forman una matriz de controles y la propiedad index de cada uno de estos controles son 0, 1, 2 y 3 respectivamente.15.Establecer la propiedad Visible de los controles F, FS y FB a False16. Insertar en los controles F, FS y FB las imágenes de salir mostradas a continuación: Salir SalirSob SalirBaj

F FS FB

En el formulario, seleccionar el control F y en la ventana Propiedades hacer clic en el botón ... de la propiedad Picture. En el cuadro de diálogo Cargar imagen hacer doble clic en el archivo de imagen Salir. Esto hará que la imagen Salir quede insertada en el control F. Proceder de manera similar con los dos controles Image restantes.

Finalmente la interfaz de usuario debe tener el siguiente aspecto:

Asociar un procedimiento al formulario. Cuando el usuario inicie el programa, este procedimiento se activará, centrará el formulario en la pantalla y asignará a la propiedad Picture de los controles Botón(0), Botón(1), Botón(2) y Botón(3) las imágenes insertadas en los controles N, K, S y F.



Private Sub Form_Load()‘Sitúa el formulario en el centro de la pantallaMove (Screen.Width - Wídth) \ 2, (Screen.Height - Height) \ 2 Botón(0).Picture = N.PictureBotón(1).Picture = K.Picture Botón(2).Picture = S.Picture Botón(3).Picture = F.Picture End Sub

Asociar un procedimiento al formulario accionado por el suceso MouseMove. Cuando el usuario desplace el puntero del mouse sobre el formulario, los controles Botón(0), Botón(1), Botón(2), Botón(3) deben mostrar las imágenes que contienen los controles N, K, S y F, respectivamente.Private Sub Form_MouseMove(Button As lnteger, Shift As lnteger, X As Single, Y As Single)If Botón(0).Picture = NS.Picture Then Botón(0).Picture = N.PictureIf Botón(1).Picture = KS.Picture Then Botón(1).Picture = K.PictureIf Botón(2).Picture = SS.Picture Then Botón(2).Picture = S.PictureIf Botón(3).Picture = FS.Picture Then Botón(3).picture = F.PictureEnd Sub

Asociar un procedimiento a la matriz de controles Botón accionado por el suceso MouseMove. Hacer doble clic sobre uno de estos controles y en la ventana de código desplegar la lista Procedimientos. Seleccionar el suceso MouseMove y la ventana de código mostrará el procedimiento Botón_MouseMove. Digitar el siguiente código:Private Sub Botón_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)Select Case Index Case 0If Botón(0).Picture = N.Picture Then Botón(0).Picture = NS.PictureIf Botón(1).Picture = KS.Picture Then Botón(1).Picture = K.PictureIf Botón(2).Picture = SS.Picture Then Botón(2).Picture = S.PictureCase 1If Botón(0).Picture = NS.Picture Then Botón(0).Picture = N.PictureIf Botón(1).Picture = K.Picture Then Botón(1).Picture = KS.PictureIf Botón(2).Picture = SS.Picture Then Botón(2).Picture = S.Picture Case 2If Botón(0).Picture = NS.Picture Then Botón(0).Picture = N.PictureIf Botón(1).Picture = KS.Picture Then Botón(1).Picture = K.PictureIf Botón(2).Picture = S.Picture Then Botón(2).Picture = SS.Picture Case 3Botón(3).Picture = FS.Picture End SelectEnd Sub

Asociar un procedimiento a la matriz de controles Botón accionado por el suceso MouseDown. Cuando el usuario pulse sobre uno de estos controles, la imagen del control debe quedar en NB, KB, SB o FB y la propiedad Caption del control Label (Texto de prueba) debe ponerse en Negrita, Cursiva o Subrayado, respectivamente. Si el usuario vuelve a hacer clic sobre uno de estos controles, la imagen del control debe quedar en N, K o S y Texto de prueba debe retornar a sus propiedades normales.Private Sub Botón_MouseDown(Index As Integer, Button As Integer, Shift As lnteger, X As Single, Y As Single)Select Case IndexCase 0

If Botón(0).Picture = NS.Picture Then Botón(0).Picture = NB.Picture Label1.FontBold = True



ElseIf Botón(0).Picture = NB.Picture Then Botón(0).Picture = N.Picture Label1.FontBold = False

End IfCase 1

If Botón(1).Picture = KS.Picture Then Botón(1).Picture = KB.Picture Label1.FontItalic = True

ElseIf Botón(1).Picture = KB.Picture Then Botón(1).Picture = K.Picture Label1.FontItalic = False

End IfCase 2

If Botón(2).Picture = SS.Picture Then Botón(2).Picture = SB.Picture Label1.FontUnderline = True

Else If Botón(2).Picture = SB.Picture Then Botón(2).Picture = S.Picture Label1.FontUnderline = False

End IfCase 3

Botón(3).Picture = FB.PictureEnd SelectEnd Sub

Asociar un procedimiento a la matriz de controles Botón accionado por el suceso MouseUp. Cuando el usuario sitúe el puntero, presione y suelte el botón izquierdo del mouse sobre el control Botón(3) (propiedad Index = 3) la ejecución del programa debe finalizar.Private Sub Botón_MouseUp(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)‘Finaliza la ejecución del programaIf Index = 3 Then EndEnd Sub

Hacer clic en el comando Iniciar del menú Ejecutar para ejecutar el programa. Desplazar el puntero del mouse sobre uno de los botones y éste emergerá tal como lo muestra la siguiente ilustración para S:

Pulsar sobre el botón y este se hundirá al igual que sucede con los botones de otras

aplicaciones desarrolladas para Windows. 7.2 El Control PictureBox (Cuadro de Dibujo).- El control PictureBox es similar al control Image en que los dos se pueden usar para presentar imágenes gráficas en una aplicación. Sin embargo, el control PictureBox se utiliza también para actuar como contenedor de otros controles y dispone de propiedades y métodos mediante los cuales es posible dibujar puntos, líneas, rectángulos, círculos, establecer rellenos, tipos de línea, etc.



7.2.1 Propiedades del Control PictureBoxPropiedad Comentario (Nombre) Nombre del control usado en el código.Align Permite que el control PictureBox se sitúe automáticamente en la parte superior,

inferior, izquierda o derecha del formulario.Valor Descripción 0-None El control aparecerá donde se lo coloque1-Align Top El control aparecerá en la parte superior del formulario.2-Align Bottom El control aparecerá en la parte inferior del formulario.3-Align Left El control aparecerá en la parte izquierda del formulario.4-Align Right El control aparecerá en la parte derecha del formulario.

AutoRedraw Establecer esta propiedad a True para que el resultado de los métodos gráficos como Circle, Line y Point que se dibuja en el control, se vuelva a dibujar automáticamente cuando el control PictureBox cambie de tamaño o se vuelva a presentar después de estar oculto detrás de algún otro objeto.

AutoSize Establecer esta propiedad a True para hacer que el control se ajuste al tamaño de la imagen.

DrawStyle Determina el estilo de la línea para el resultado de métodos gráficos. Presenta las siguientes opciones:Valor Descripción 0-Solid Sólido.1-Dash De rayas.2-Dot De puntos.3-Dash-Dot Raya-punto4-Dash-Dot-Dot Raya-punto-punto.5-Transparent Transparente.6-Inside Solid Sólido interno.

DrawWidth Devuelve o establece el ancho de la línea para el resultado de métodos gráficos.FillColor Devuelve o establece el color usado para rellenar figuras, círculos y cuadros.FillStyle Devuelve o establece el estilo de relleno de una figura. Presenta las siguientes

opciones:Valor Descripción 0-Solid Sólido.1-Transparent Transparente.2-Horizontal Line Línea horizontal3-Vertical Line Línea vertical4-Upward Diagonal Diagonal hacia arriba.5-Downward Diagonal Diagonal hacia abajo.6-Cross Cruz.

Font Facilita la manipulación de los atributos de texto.ForeColor Devuelve o establece el color de primer plano utilizado para mostrar textos y gráficos

en un objeto.Height Devuelve o establece el alto del control.Picture Devuelve o establece el gráfico que se mostrará en el control.ScaleHeight Devuelve o establece el número de unidades verticales del interior de un objeto.ScaleLeft Devuelve o establece la coordenada horizontal para el borde izquierdo de un objeto.ScaleMode Devuelve o establece un valor que indica las unidades de medida de las

coordenadas de un objeto al usar métodos gráficos o colocar controles.ScaleTop Devuelve o establece la coordenada vertical del borde superior de un objeto.ScaleWidth Devuelve o establece el número de unidades horizontales de medida del interior de

un objeto.Width Devuelve o establece el ancho del control.



7.2.2 Sistema de Coordenadas.- El origen de coordenadas para un formulario o un cuadro de dibujo es la esquina superior izquierda de los mismos, la coordenada X aumenta hacia la derecha, y la coordenada Y aumenta hacia abajo. Cualquier punto del formulario se puede identificar por medio de sus coordenadas X y Y. Un sistema de coordenadas se puede ajustar a la escala que se desee.

La siguiente tabla muestra el sistema de coordenadas de Visual Basic:Escala Descripción 0 Sistema de coordenadas definido por el usuario. 1 Twips (escala por defecto). 1,440 twips por pulgada.2 Puntos. 72 puntos por pulgada3 Píxeles. Un píxel es la unidad más pequeña de resolución de un monitor.4 Caracteres. Un carácter es un área de 120 Twips de ancho y 240 twips de alto.5 Pulgadas. 1 pulgada es igual a 25,4 milímetros.6 Milímetros7 Centímetros. 567 twips por centímetro.

Para ajustar el sistema de coordenadas a una de estas escalas, se utiliza la propiedad ScaleMode.

7.3 Los Métodos Gráficos.- Visual Basic tiene los siguientes métodos gráficos: Print, PSet, Line y Circle. Estos métodos permiten mostrar texto y dibujar líneas, círculos y puntos en un formulario o en un control PictureBox.

7.3.1 El Método Print.- Permite mostrar texto. Por ejemplo, la siguiente instrucción mostrará la cadena de caracteres ‘Texto de prueba’ en la parte superior izquierda de un control PictureBox:Picture1.Print “Texto de prueba”

Visual Basic proporciona los métodos TextWidth (Ancho de texto) y TextHeight (Alto de texto) que permiten alinear una cadena de caracteres en un formulario o en un control PictureBox. Por ejemplo, las siguientes líneas colocarán el texto ‘Texto de prueba’ en el centro del control PictureBox.Private Sub Picture1 _Click()Picture1.CurrentX = (Picture1.ScaleWidth - TextWidth(“Texto de prueba”))/2Picture1.CurrentY = (Picture1.ScaleHeight – TextHeight(”Texto de prueba”))/2Picture1.Print “Texto de prueba”End Sub

Para presentar una cadena de caracteres en un determinado punto de la pantalla, asignar a las propiedades CurrentX y CurrentY el valor en coordenadas de dicho punto y después emplear el método Print para presentar la cadena de caracteres.

7.3.2 El Método Pset.- Permite dibujar un punto en el control PictureBox y se utiliza para dibujar curvas que hay que trazar punto a punto. Tiene la siguiente sintaxis:[objeto.]PSet(X,Y)[,color]

Donde X e Y son las coordenadas del punto. El argumento color es opcional y si no se especifica se supone el color del primer plano (ForeColor). Las propiedades CurrentX y CurrentY son puestas, respectivamente, a los valores X e Y.



Desarrollar un programa que dibuje en un control PictureBox la curva correspondiente a la función SIN(X).1 Seleccionar el comando Nuevo proyecto del menú Archivo para crear una nueva

aplicación.2 En el formulario, colocar dos controles Label, dos controles TextBox, dos controles

UpDown, dos controles CommandButton y un control PictureBox. Para usar controles UpDown se debe habilitar el componente “Microsoft Common Controls-2.5.0(SP2)” o bien el “Microsoft Common Controls-2.6.0”. Asignar las siguientes propiedades:

Control Propiedad Valor Label Caption Valor más bajoLabel Caption Valor más altoTextBox Nombre Min

Text “ “TextBox Nombre Max

Text “ “UpDown Name UpDown1

BuddyControl MinBuddyProperty TextIncrement 1Max 10Min 0SyncBuddy True

UpDown Name UpDown2BuddyControl MaxBuddyProperty TextIncrement 1Max 160Min 0SyncBuddy True

PictureBox Nombre GráficoBackColor &H80000009&

CommandButton Nombre DibujarCaption Dibujar

CommandButton Nombre SalirCaption Salir

Asociar un procedimiento al cuadro de texto Min accionado por el suceso KeyPress. Este procedimiento sólo debe permitir el ingreso de los dígitos 0, 1, 2,...,9 y de los caracteres ”-“ y “.” en el cuadro de texto Min.1 Hacer doble clic en el cuadro de texto Min. La ventana de código abre el procedimiento

Min_Change.2 Desplegar el cuadro de lista Procedimientos de la ventana de código y en la lista de

sucesos que puede reconocer el control TextBox, seleccionar el suceso KeyPress.3 Digitar el siguiente procedimiento:Private Sub Min_KeyPress(KeyAscii As Integer) If Not ((Chr(KeyAscii) >= “0” And Chr(KeyAscii) <= “9”) Or (Chr(KeyAscii) = “-“ Or Chr(KeyAscii) = “.”)) Then BeepKeyAscii = 0End lfEnd Sub

Asociar un procedimiento al cuadro de texto Max accionado por el suceso KeyPress. Este procedimiento sólo debe permitir el ingreso de los dígitos 0, 1, 2, ..., 9 y de los caracteres “-” y “.” en el cuadro de texto Max



1 Hacer doble clic en el cuadro de texto Max. La ventana de código abre el procedimiento Max_Change

2 Desplegar el cuadro de Lista Procedimientos de la ventana de código y en la lista de sucesos que puede reconocer el control TextBox, seleccionar el suceso KeyPress.

3 Digitar el siguiente procedimiento:Private Sub Max_KeyPress(KeyAscii As Integer)If Not ((Chr(KeyAscii) >= “0” And Chr(KeyAscii) <= “9”) Or (Chr(KeyAscii) = “-“ Or Chr(KeyAscii) = “.”)) ThenBeepKeyAscii = 0End IfEnd Sub

Asociar un procedimiento al botón de comando Dibujar accionado por el suceso Click. Cuando el usuario haga clic en el botón comando Dibujar, este procedimiento debe dibujar el gráfico de la función Sin(X) en el control PictureBox.1 Hacer doble clic en el botón de comando Dibujar. La ventana de código abre el

procedimiento Dibujar_Click.2 Digitar el siguiente procedimiento:Private Sub Dibujar_Click()Dim VarX, FunY, XMin, XMax, YMin, YMax As Double ‘El método Cls borra el gráfico pintado en el control. Gráfico.Cls‘Cambia temporalmente la propiedad ScaleMode a 3 (pixeles) Gráfico.ScaleMode = 3XPíxeles = Gráfico.ScaleWidth XMin = Val(Min)XMax = Val(Max)‘Calcula los valores mínimo y máximo de la función.For I = 1 to XPíxeles

VarX = XMin + (Xmax - XMin) * I / XPíxelesFunY = Sin(VarX)If FunY > YMax Then YMax = FunYIf FunY < YMin Then YMin = FunY

Next I‘Prepara el sistema de coordenadas definido por el usuario Gráfico.Scale (XMin, YMin) - (XMax, Ymax) ‘Traza el gráfico de la función For I = 1 To XPíxelesVarX = XMin + (XMax - XMin) * I / XPíxelesGráfico.PSet (VarX, Sin(VarX)), RGB(0, 0, 255) Next IEnd Sub

Se analiza el procedimiento anterior. La siguiente línea Gráfico.ScaleMode = 3

Cambia temporalmente la propiedad ScaleMode a 3 con la finalidad de utilizar la propiedad ScaleWidth del control PictureBox. Luego se asigna a la variable XPíxeles la resolución horizontal del control PictureBox con el fin de preparar un sistema de coordenadas definido por el usuario.XPíxeles = Gráfico.ScaleWidth

Las siguientes instruccionesFor I = 1 To XPíxelesVarX = XMin + (XMax - XMin) * I / XPíxelesFunY = FunciónY(VarX)



If FunY > YMax Then YMax = FunYIf FunY < YMin Then YMin = FunYNext I

Sirven para averiguar las dimensiones del sistema de coordenadas. Después de finalizar el bucle For...Next, las variables YMax e YMin contienen los valores máximo y mínimo de la función para el rango XMax y XMin.

La siguiente línea, prepara el sistema de coordenadas definido por el usuario utilizando el método Scale:Gráfico.Scale (XMin, YMin) - (XMax, YMax)

Para trazar el gráfico de la función punto por punto utilizamos el método PSet.For I = 1 To XpíxelesVarX = XMin + (XMax - XMin) * I / XpíxelesGráfico.PSet (VarX, Sin(VarX)), RGB(0, 0, 255)Next I

Observar que el método PSet llama a la función Sin(VarX) que calcula el valor de la variable dependiente para cada valor de la variable VarX.

La siguiente ilustración muestra el gráfico de la función Y = Sin(X).

7.3.3 El Método Line.- Permite dibujar una línea entre dos puntos. La sintaxis de este método es:[objeto.]Line[(X1, Y1)] - (X2, Y2)[, color]

Si al método Line se le añade la opción B, las coordenadas (Xl ,Y1) y (X2,Y2) harán referencia a la esquina superior izquierda o inferior derecha de un rectángulo.[objeto.]Line(X1, Y1) - (X2, Y2)[, [color], B[F]]

Si se especifica la opción BF, se obtiene una rectángulo coloreado. Si objeto no se especifica, la figura se dibuja sobre el formulario actual.

Desarrollar una aplicación que muestre líneas verticales, horizontales y diagonales en un control PintureBox. Seguir estos pasos:1 Hacer clic en el comando Nuevo proyecto del menú Archivo para crear una nueva

aplicación.2 Colocar tres controles Label, dos controles TextBox, dos controles UpDown, cinco

controles CommandButton y un control PictureBox en el formulario.Asignar las siguientes propiedades a los controles:

Control Propiedad Valor Form Caption Trazado de LíneasLabel Caption Introduzca los datos requeridosLabel Caption HorizontalesLabel Caption VerticalesTextBox Name Horiz

MaxLength 4Text “ “

TextBox Name Vert.



MaxLength 4Text “ “

UpDown BuddyControl HorizBuddyProperty TextIncrement 1Max 1600Min 1SyncBuddy True

UpDown BuddyControl VertBuddyProperty TextIncrement 1Max 1600Min 1SyncBuddy True

PictureBox Name GráficoBackcolor Blanco

CommandButton Name TrazarHorizontalesCaption Trazar Horizontales

CommandButton Name TrazarVerticalesCaption Trazar Verticales

CommandButton Name TrazarDiagonalesCaption Trazar Diagonales

CommandButon name LimpiarCuadroCaption Limpiar Cuadro

CommandButon Name SalirCaption Salir

Diseñada la interfaz de usuario, asociar un procedimiento al cuadro de texto Horiz accionado por el suceso KeyPress. Este procedimiento sólo debe permitir el ingreso de dígitos en el cuadro de texto Horiz.1. En el formulario, hacer doble clic sobre el cuadro de texto Horiz.2. En la ventana de código, desplegar el cuadro de lista Procedimientos y seleccionar el

suceso KeyPress. La ventana de código abre el procedimiento Horiz_KeyPress.3. Digitar el siguiente código:Private Sub Horiz_keyPress(KeyAscii As Integer) If Chr(KeyAscii) < “0” Or Chr(KeyAscii) > “9” ThenBeepKeyAscii = 0End IfEnd Sub

Asociar un procedimiento al cuadro de texto Vert accionado por el suceso KeyPress. Este procedimiento sólo debe permitir el ingreso de dígitos en el cuadro de texto Vert.1. En el formulario, hacer doble clic sobre el cuadro de texto Vert.2. En la ventana de código, desplegar el cuadro de lista Procedimientos y seleccionar el

suceso KeyPress. La ventana de código abre el procedimiento Vert_KeyPress.3. Digitar el siguiente código:Private Sub Vert_KeyPress(KeyAscii As Integer) If Chr(KeyAscii) < “0” Or Chr(KeyAscii) > “9” ThenBeep KeyAscii = 0 End IfEnd Sub

Asociar un procedimiento al botón de comando Horizontales accionado por el suceso



Click. Cuando el usuario haga clic en este botón, el control PictureBox debe mostrar el número de líneas horizontales que indica el cuadro de texto Horiz.1. En el formulario, hacer doble clic en el botón de comando Trazar Horizontales. La ventana

de código abre el procedimiento TrazarHorizontales_Clíck.2. Digitar el siguiente código:Private Sub TrazarHorizontales_Click()Dim lineas As Integerlineas = Val(Horiz)X1 = 0‘Se calcula el espacio que debe haber entre línea y líneaNY1 = Grafico.Height / (lineas + 1)Y1 = NY1For i = 1 To lineasGrafico.Line (X1, Y1)-(Grafico.Width, Y1)Y1 = Y1 + NY1Next iEnd Sub

Asociar un procedimiento al botón de comando Trazar Verticales accionado por el suceso Click. Cuando el usuario haga clic en este botón, el control PictureBox debe mostrar el número de líneas verticales que indica el cuadro de texto Vert.1. En el formulario, hacer doble clic en el botón de comando Trazar Verticales. La ventana

de código abre el procedimiento TrazarVerticales_Clíck.2. Digitar el siguiente código:Private Sub TrazarVerticales_Click()Dim lineas As Integerlineas = Val(Vert)Y1 = 0‘Se calcula el espacio que debe haber entre línea y lúneaNX1 = Grafico.Width / (lineas + 1)X1 = NX1For i = 1 To lineasGrafico.Line (X1, Y1)-(X1, Grafico.Height)X1 = X1 + NX1Next iEnd Sub

Hacer doble clic en el botón de comando Trazar Diagonales y escriba el siguiente código en el procedimiento que muestra la ventana de código.Private Sub TrazarDiagonales_Click() ‘Traza las dos diagonals principales en el control PictureBoxGrafico.Line (0, 0)-(Grafico.Width, Grafico.Height)Grafico.Line (0, Grafico.Height)-(Grafico.Width, 0)End Sub

Hacer doble clic en el botón de comando Limpiar Cuadro y escriba la sentencia Grafico.Cls en el procedimiento que muestra la ventana de código.Private Sub LimpiarCuadro_Click()Grafico.Cls End Sub

Hacer doble clic en el botón de comando Salir y escribir la sentencia End en el procedimiento que muestra la ventana de código.Private Sub Salir_Click() EndEnd Sub



Presionar la tecla F5 para ejecutar el programa.

7.3.4 El Método Circle.- Permite dibujar un círculo, una elipse o parte de estas figuras con centro (X, Y). La sintaxis de este método es:[objeto.]Circle(X, Y), radio, [color], [principio], [fin], [aspecto]

X e Y son las coordenadas del centro del círculo y el argumento radio es el radio del círculo. Los argumentos principio y fin son ángulos, en radianes, de valores comprendidos en el rango –2*PI a 2*PI, que especifican los ángulos de principio y fin para el trazado del arco. Si se omiten, se traza una curva completa. El argumento aspecto es la proporción entre el radio vertical y horizontal de la elipse. Si aspecto < 1, la elipse se extiende horizontalmente y se comprime en dirección vertical.

Desarrollar una aplicación que dibuje un número de circunferencias requerido con centro en el centro del PictureBox. Es fácil hacerlo utilizando el método Circle.

Seguir estos pasos:1. Hacer clic en el comando Nuevo proyecto del menú Archivo para crear una nueva

aplicación.2. Colocar dos controles Label, dos controles TextBox, un control UpDown, tres controles

CommandButton y un control PictureBox en el formulario.3. Asignar las siguientes propiedades a los controles:Control Propiedad Valor Form Caption CircunferenciasLabel Caption CirculosLabel Caption AspectoTextBox Name Círculos

Text “ “TextBox Name Aspecto

Text “ “UpDown BuddyControl Circulos

BuddyProperty TextIncrement 1Max 230Mim 1 SyncBuddy True

PictureBox Name GráficoBackcolor Blanco

CommandButton Name TrazarCaption Trazar



CommandButton Name LimpiarCaption Limpiar

CommandButton Name SalirCaption Salir

Al cargar el formulario, este debe quedar centrado en la pantalla. Para ello debemos introducir el siguiente código:Private Sub Form_Load()Move (Screen.Width - Width) / 2, (Screen.Height - Height) / 2End Sub

Cuando se introduzcan valores en los cuadros de texto Círculos y Aspecto, el programa debe permitir solo el ingreso de números. Para ello se debe introducir el siguiente código bajo el suceso KeyPress de cada cuadro de texto:Private Sub Circulos_KeyPress(KeyAscii As Integer)If Chr(KeyAscii) < "0" Or Chr(KeyAscii) > "9" ThenBeepKeyAscii = 0End IfEnd SubPrivate Sub Aspecto_KeyPress(KeyAscii As Integer)If Not ((Chr(KeyAscii) >= "0" And Chr(KeyAscii) <= "9") Or (Chr(KeyAscii) = ".")) ThenBeepKeyAscii = 0End IfEnd Sub

Asociar un procedimiento al botón de comando Trazar accionado por el suceso Click. Cuando el usuario haga clic en este botón, el control PictureBox debe mostrar el número de circunferencias indicado en el TextBox Circulos.1. En el formulario, hacer doble clic en el botón de comando Trazar. La ventana de código

abre el procedimiento Trazar_Click.2. Digitar el siguiente código:Private Sub Trazar_Click() aspec = Val(Aspecto)If aspec = 0 Then aspec = 1x = Grafico.Width / 2y = Grafico.Height / 2Ncirc = Val(Circulos)radio = yNC = y / NcircFor i = 1 To NcircGrafico.Circle (x, y), radio, , , , aspecradio = radio - NCNext iEnd Sub

Asociar un procedimiento al botón de comando Limpiar accionado por el suceso Click. Cuando el usuario haga clic en este botón, se debe limpiar el PictureBox.1. Hacer doble clic en el botón de comando Limpiar. La ventana de código abre el

procedimiento Limpiar_Click.2. Digitar las siguientes sentencias.Private Sub Limpiar_Click()Grafico.ClsEnd Sub

Asociar un procedimiento al botón de comando Salir accionado por el suceso Click.



Cuando el usuario haga clic en este botón, la ejecución del programa debe finalizar.1. Hacer doble clic en el botón de comando Salir. La ventana de código abre el

procedimiento Salir_Click.2. Entre las instrucciones Salir_Click y End Sub digitar la sentencia End.Private Sub Salir_Click()EndEnd Sub

Las siguientes ilustraciones muestran ejemplos de los resultados de la aplicación.

7.4 Los Controles Line y Shape.- Estos controles permiten crear figuras geométricas de diferentes formas, tamaños y colores en un formulario o en un marco.

Utilizar el control Line para dibujar líneas rectas. La siguiente tabla muestra algunas propiedades de este control:Propiedad Descripción BorderStyle Permite establecer el estilo del borde. Presenta las siguientes opciones:

Valor Descripción 0-Transparent Transparente.1-Solid Sólido.2-Dash De rayas.3-Dot De puntos.4-Dash-Dot Raya-punto.5-Dash-Dot-Dot Raya-punto-punto.6-Inside Solid Sólido interno.

BorderWidth Permite establecer el ancho del borde.BorderColor Permite colorear la línea con cualquiera de los colores estándar de Visual Basic.Visible Permite mostrar u ocultar la línea.

El control Shape permite dibujar rectángulos, cuadrados, elipses y circunferencias. Algunas propiedades de este control son:Propiedad Descripción BorderColor Permite especificar un color para el borde de la figura.FillColor Permite especificar el color de relleno de la figura.FillStyle Permite establecer un patrón para el color de relleno. Presenta las siguientes

opciones:Valor Descripción 0-Solid Sólido.1-Transparent Transparente.2-Horizontal Line Línea horizontal.3-Vertical Line Línea vertical.4-Upward Diagonal Diagonal hacia arriba.5-Downward Diagonal Diagonal hacia abajo.6-Cross Cruz.7-Diagonal Cross Diagonal cruzado.



Shape Permite controlar la forma de la figura. Presenta las siguientes opciones:Valor Descripción 0-Rectangle Rectángulo.1-Square Cuadrado.2-Oval Elipse3-Circle Círculo.4-Rounded Rectangle Rectángulo redondeado.5-Rounded Square Cuadrado redondeado.

Visible Permite mostrar u ocultar la figura.Desarrollar una aplicación que permita modificar las propiedades del control Shape.

Abrir un nuevo proyecto y en el formulario, colocar dos controles Label, dos controles ComboBox, dos controles CommandButton, un control Frame, un control Shape, un control CheckBox y un control CommonDialog.Control Propiedad Valor Form Caption Figuras geométricasLabel Caption FiguraLabel Caption Estilo rellenoComboBox Name Figura

Style 2-Dropdown ListList Rectángulo

CuadradoOvaloCírculoRectángulo redondeado Cuadrado redondeado

ComboBox Name EstiloRellenoStyle 2-Dropdown ListList Sólido

TransparenteLíneas horizontalesLíneas verticalesDiagonales ascendentesDiagonales descendentesCrucesCruces diagonales

Frame Caption MuestraShape Nombre FormaCheckBox Nombre CasillaOcultarCommonDialog Nombre DiálogoColorCommandButton Nombre BotónColor

Caption Color de rellenoCommandButton Nombre Salir

Caption SalirLa interfaz de usuario debe ser similar a la siguiente ilustración:



Asociar un procedimiento al control Figura accionado por el suceso Click. Cuando el usuario despliegue este cuadro de lista y seleccione una opción, la figura que aparece en el control Shape debe cambiar de forma.Private Sub Figura_Clíck() Select Case Figura.TextCase “Rectángulo”‘Cambia la forma a un rectánguloForma.Shape = 0Case “Cuadrado”‘Cambia la forma a un cuadradoForma.Shape = 1Case “Ovalo”‘Cambia la forma a un óvaloForma.Shape = 2Case “Círculo”‘Cambia la forma a un círculoForma.Shape = 3Case “Rectángulo redondeado”‘Cambia la forma a un rectángulo redondeadoForma.Shape = 4Case “Cuadrado redondeado”‘Cambia la forma a un cuadrado redondeadoForma.Shape = 5End Select End Sub

Asociar un procedimiento al control EstiloRelleno accionado por el suceso Click. Cuando el usuario despliegue este cuadro de lista y seleccione una opción, el estilo de relleno de la figura que muestra el control debe cambiar de aspecto.Private Sub EstiloRelleno_Click() Select Case EstiloRelleno.TextCase “Sólido”Forma.FillStyle = 0Case “Transparente”Forma.FillStyle = 1Case “Líneas horizontales”Forma.FillStyle = 2Case “Líneas verticales”Forma.FillStyle = 3Case “Diagonales ascendentes”Forma.FillStyle = 4Case “Diagonales descendentes”Forma.FillStyle = 5Case “Cruces”Forma.FillStyle = 6Case “Cruces diagonales”Forma.FillStyle = 7End SelectEndSub

Asociar un procedimiento al control CasillaOcultar accionado por el suceso Click. Cuando el usuario haga clic en este control, la figura que aparece en la muestra debe aparecer o desaparecer.Private Sub CasillaOcultar_Clic()



‘Muestra u oculta la figuraIf CasillaOcultar.Value = 1 Then Forma.Visible = FalseElseForma.Visible = TrueEnd IfEnd Sub

Asociar un procedimiento al botón de comando BotónColor accionado por el suceso Click. Cuando el usuario haga clic en este botón, debe aparecer el cuadro de diálogo Color en el que el usuario podrá seleccionar un color para el relleno de la figura.Private Sub BotónColor_Click() DiálogoColor.Action = 3 Forma.FillColor = DiálogoColor.Color End Sub

Hacer doble clic en el botón de comando Salir y en la ventana de código, escribir el comando End.Private Sub Salir_Click()‘Finaliza la ejecución del programa EndEnd Sub

Presionar la tecla F5 para ejecutar el programa. Desplegar el cuadro de lista ‘Figura’ y seleccionar la opción Elipse. Desplegar el cuadro de lista ‘Estilo relleno’ y seleccionar la opción ‘Cruces diagonales’. Hacer clic en el botón ‘Color de relleno’ y aparecerá el cuadro de diálogo Color. Seleccionar un color y hacer clic en Aceptar. Observar que el color de relleno de la figura adquiere el color elegido.


capítulo 7 vs basic - controles que muestran imágenes y gráficos

Documents