Capítulo 7 Vs Basic - Controles Que Muestran Imágenes y Gráficos

Computacin para Ingeniera I y Laboratorio
Cap.7Visual BasicControles que muestran Imgenes y Grficos
CAPITULO 7 VISUAL BASIC CONTROLES QUE MUESTRAN IMGENES Y GRAFICOS
Como Windows es una interfaz grfica de usuario, es importante tener una forma de
presentar imgenes grficas en la interfaz de una aplicacin. Visual Basic incluye tres
controles que facilitan el trabajo con grficos:
Form (Formulario)
PictureBox (Cuadro de dibujo)
Image (Imagen)
7.1 El Control Image (Imagen).- Este control se utiliza para presentar imgenes grficas
(mapa de bits, cono, metarchivo, metarchivo mejorado o archivos JPEG o GIF) en una
aplicacin. 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 grfica en
este control de dos maneras: durante el diseo de la aplicacin o durante la ejecucin. Para
cargar una imagen en tiempo de diseo, seguir estos pasos:
1. En el formulario, hacer clic sobre el control Image con el botn derecho del mouse y en el
men contextual que aparece, seleccionar Propiedades.
2. En la ventana Propiedades, hacer clic en el botn...de la propiedad Picture. Visual Basic
visualiza el cuadro de dilogo 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 tamao
automticamente para ajustarse al de la imagen, independientemente del tamao del control
dentro del formulario.
7.1.2 Carga de una Imagen Usando el Portapapeles.- Tambin se puede cargar una
imagen a un control Image en tiempo de diseo si se lo pega desde otra aplicacin. 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 Edicin
7.1.3 La Propiedad Stretch.- Si la propiedad Stretch est como True, la imagen ajustar su
tamao al cambiar el tamao del control Image en tiempo de diseo. Es posible que la
imagen (especialmente los mapas de bits) se distorsione si el tamao de sta es reajustada.
Ing. Hermas Herrera Callejas
Pgina : 1 de 21
Stretch=False
Stretch=True
Para 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 Ejecucin.- Para cargar un grfico en el control
Image en tiempo de ejecucin utilizar la propiedad Picture y la funcin LoadPicture.
Set Image1.Picture = LoadPicture (C:\Imgenes\Gatito.bmp)
Para borrar el grfico de este control, utilizar la funcin 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 diseo:
Set Imagel.Picture = LoadPicture()
La siguiente aplicacin, 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()
Sita el control Imagel en esquina superior izquierda del formulario.
Imagel.Move 0,0
Ajusta el tamao del formulario al del control Image.
Form1.Height = Image1.Height
Form1.Width = Image1.Width
End Sub
Private Sub Image1_Click()
Muestra la imagen Gatito.bmp en el control Image
Set Image1.Picture = LoadPicture(C:\Grficos\Gatito.bmp)
End Sub
Private Sub Image1_DblClick()
Borra la imagen Gatito.bmp del control Image
Set 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 imgenes que se encuentran almacenadas
en distintos archivos de disco, con nombres que terminan en nmeros: Imagen1, Imagen2,
Imagen3 e Imagen4.
Seguir estos pasos:
1. Seleccionar el comando Nuevo proyecto del men Archivo, para crear una nueva
Pgina : 2 de 21
aplicacin.
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 Edicin. Una copia del control Image se
guarda en el Portapapeles.
5. Hacer clic en el comando Pegar del men Edicin. Visual Basic muestra un mensaje
preguntando si se desea crear una matriz de controles. Una matriz de controles es un
grupo de objetos idnticos que se mostrarn 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 simultneamente 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 Edicin y despus arrastrar el tercer
control Image a la parte inferior del primero.
9. Volver a hacer clic en el comando Pegar del men Edicin y despus 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 ilustracin:
Al soltar el botn del mouse, los cuatro controles Image aparecern seleccionados.
Presionar la tecla F4 y establecer las siguientes propiedades:
Matriz de control Image
BorderStyle
Stretch
1- Fixed Single
True
Luego de establecer las propiedades de los controles Image, asignar las siguientes
propiedades al botn de comando Command1:
CommandButton
Name
Caption
Mostrar
Mostrar imgenes
En el formulario, hacer doble clic sobre el botn de comando Mostrar imgenes y en la

ventana de cdigo digitar el siguiente procedimiento:
Private Sub Mostrar_Click()
Este procedimiento carga 4 archivos de imagen que estn almacenados en la carpeta C:\Grficos.
Dim I As Byte
For I = 1 To 4
Image1(I - 1).Picture = LoadPicture(C:\Grficos\Imagen& I &.bmp)
Pgina : 3 de 21
Next I
End Sub
Guardar el formulario con el nombre Imgenes.frm y la aplicacin con el nombre

Imgenes.vbp.
Presionar la tecla F5 para ejecutar el programa y hacer clic en el botn Mostrar
imgenes. En el formulario aparecern las imgenes cargadas:
Las imgenes cargadas durante el diseo son guardadas y cargadas con la aplicacin.
Lo que significa que cuando se crea un archivo .EXE de la aplicacin, no se necesitar
acompaarlo de los archivos de imgenes utilizados. En cambio, cuando las imgenes se
cargan en tiempo de ejecucin, utilizando la funcin LoadPicture y se crea un archivo EXE,
se debe acompaar ste con los archivos de imgenes utilizados.
7.1.5 Creacin de Botones de Orden Grficos.- 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 grficos. 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 grficos
Botn de orden basado en texto
Desarrollar una aplicacin en la que se ejecutarn rdenes utilizando botones de orden

basados en grficos. Estos botones se hundirn o emergern 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
aplicacin.
2. Agregar tres controles Image en el formulario. Ordenarlos tal como se observa en la
ilustracin prxima:
3. Guardar
el
formulario
la
aplicacin
con
nombres
SensibilidadCursor.frm
Pgina : 4 de 21
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 Botn 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, tamao 18) de este control.
10. Agregar nueve controles Image al formulario. La interfaz debe ser similar a la ilustracin
proxima:
NS
KS SS
NB KB SB
11. Asignar los nombres que muestra la ilustracin 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
NS
KS
SS
NegritaBaj
NB
CursivaBaj
KB
SubrayadoBaj
SB
En el formulario, seleccionar el control N y en la ventana Propiedades hacer clic en el

botn ... de la propiedad Picture. En el cuadro de dilogo 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.
Pgina : 5 de 21
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 tamao de estos controles y
ubicarlos en la parte inferior del formulario; adems, nombrarlos tal como muestra la
siguiente ilustracin:
Botn
FS
FB
Observar que el nombre Botn 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 False
16. Insertar en los controles F, FS y FB las imgenes de salir mostradas a continuacin:
Salir
SalirSob
FS
SalirBaj
FB
En el formulario, seleccionar el control F y en la ventana Propiedades hacer clic en el

botn ... de la propiedad Picture. En el cuadro de dilogo 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 Botn(0), Botn(1), Botn(2) y Botn(3) las imgenes insertadas en
los controles N, K, S y F.
Pgina : 6 de 21
Sita el formulario en el centro de la pantalla

Move (Screen.Width - Wdth) \ 2, (Screen.Height - Height) \ 2
Botn(0).Picture = N.Picture
Botn(1).Picture = K.Picture
Botn(2).Picture = S.Picture
Botn(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 Botn(0), Botn(1),
Botn(2), Botn(3) deben mostrar las imgenes 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 Botn(0).Picture = NS.Picture Then Botn(0).Picture = N.Picture
If Botn(1).Picture = KS.Picture Then Botn(1).Picture = K.Picture
If Botn(2).Picture = SS.Picture Then Botn(2).Picture = S.Picture
If Botn(3).Picture = FS.Picture Then Botn(3).picture = F.Picture
End Sub
Asociar un procedimiento a la matriz de controles Botn accionado por el suceso

MouseMove. Hacer doble clic sobre uno de estos controles y en la ventana de cdigo
desplegar la lista Procedimientos. Seleccionar el suceso MouseMove y la ventana de cdigo
mostrar el procedimiento Botn_MouseMove. Digitar el siguiente cdigo:
Private Sub Botn_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
Select Case Index

Case 0
If Botn(0).Picture = N.Picture Then Botn(0).Picture = NS.Picture
Case 1
If Botn(1).Picture = K.Picture Then Botn(1).Picture = KS.Picture
Case 2
If Botn(2).Picture = S.Picture Then Botn(2).Picture = SS.Picture
Case 3
Botn(3).Picture = FS.Picture
End Select
End Sub

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 Botn_MouseDown(Index As Integer, Button As Integer, Shift As lnteger, X As Single, Y As Single)
Select Case Index

Case 0
If Botn(0).Picture = NS.Picture Then
Botn(0).Picture = NB.Picture
Label1.FontBold = True
ElseIf Botn(0).Picture = NB.Picture Then
Pgina : 7 de 21
Botn(0).Picture = N.Picture
Label1.FontBold = False
End If
Case 1
If Botn(1).Picture = KS.Picture Then
Botn(1).Picture = KB.Picture
Label1.FontItalic = True
ElseIf Botn(1).Picture = KB.Picture Then
Botn(1).Picture = K.Picture
Label1.FontItalic = False
End If
Case 2
If Botn(2).Picture = SS.Picture Then
Botn(2).Picture = SB.Picture
Label1.FontUnderline = True
Else If Botn(2).Picture = SB.Picture Then
Botn(2).Picture = S.Picture
Label1.FontUnderline = False
End If
Case 3
Botn(3).Picture = FB.Picture
End Select
End Sub

MouseUp. Cuando el usuario site el puntero, presione y suelte el botn izquierdo del mouse
sobre el control Botn(3) (propiedad Index = 3) la ejecucin del programa debe finalizar.
Private Sub Botn_MouseUp(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
Finaliza la ejecucin del programa

If Index = 3 Then End
End 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 ilustracin para S:
Pulsar sobre el botn 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 imgenes grficas en una aplicacin.
Sin embargo, el control PictureBox se utiliza tambin para actuar como contenedor de otros
controles y dispone de propiedades y mtodos mediante los cuales es posible dibujar puntos,
lneas, rectngulos, crculos, establecer rellenos, tipos de lnea, etc.
7.2.1 Propiedades del Control PictureBox
Pgina : 8 de 21
Propiedad
(Nombre)
Align
AutoRedraw
AutoSize
DrawStyle
DrawWidth
FillColor
FillStyle
Font
ForeColor
Height
Picture
ScaleHeight
ScaleLeft
ScaleMode
ScaleTop
ScaleWidth
Width
Comentario
Nombre del control usado en el cdigo.
Permite que el control PictureBox se site automticamente en la parte superior,
inferior, izquierda o derecha del formulario.
Valor
Descripcin
0-None
El control aparecer donde se lo coloque
1-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.
Establecer esta propiedad a True para que el resultado de los mtodos grficos
como Circle, Line y Point que se dibuja en el control, se vuelva a dibujar
automticamente cuando el control PictureBox cambie de tamao o se vuelva a
presentar despus de estar oculto detrs de algn otro objeto.
Establecer esta propiedad a True para hacer que el control se ajuste al tamao de la
imagen.
Determina el estilo de la lnea para el resultado de mtodos grficos. Presenta las
siguientes opciones:
Valor
Descripcin
0-Solid
Slido.
1-Dash
De rayas.
2-Dot
De puntos.
3-Dash-Dot
Raya-punto
4-Dash-Dot-Dot Raya-punto-punto.
5-Transparent
Transparente.
6-Inside Solid
Slido interno.
Devuelve o establece el ancho de la lnea para el resultado de mtodos grficos.
Devuelve o establece el color usado para rellenar figuras, crculos y cuadros.
Devuelve o establece el estilo de relleno de una figura. Presenta las siguientes
opciones:
Valor
Descripcin
0-Solid
Slido.
1-Transparent
Transparente.
2-Horizontal Line
Lnea horizontal
3-Vertical Line
Lnea vertical
4-Upward Diagonal
Diagonal hacia arriba.
5-Downward Diagonal
Diagonal hacia abajo.
6-Cross
Cruz.
Facilita la manipulacin de los atributos de texto.
Devuelve o establece el color de primer plano utilizado para mostrar textos y grficos
en un objeto.
Devuelve o establece el alto del control.
Devuelve o establece el grfico que se mostrar en el control.
Devuelve o establece el nmero de unidades verticales del interior de un objeto.
Devuelve o establece la coordenada horizontal para el borde izquierdo de un objeto.
Devuelve o establece un valor que indica las unidades de medida de las
coordenadas de un objeto al usar mtodos grficos o colocar controles.
Devuelve o establece la coordenada vertical del borde superior de un objeto.
Devuelve o establece el nmero de unidades horizontales de medida del interior de
un objeto.
Devuelve o establece el ancho del control.
7.2.2 Sistema de Coordenadas.- El origen de coordenadas para un formulario o un cuadro

Pgina : 9 de 21
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
0
1
2
3
4
5
6
7
Descripcin
Sistema de coordenadas definido por el usuario.
Twips (escala por defecto). 1,440 twips por pulgada.
Puntos. 72 puntos por pulgada
Pxeles. Un pxel es la unidad ms pequea de resolucin de un monitor.
Caracteres. Un carcter es un rea de 120 Twips de ancho y 240 twips de alto.
Pulgadas. 1 pulgada es igual a 25,4 milmetros.
Milmetros
Centmetros. 567 twips por centmetro.
Para ajustar el sistema de coordenadas a una de estas escalas, se utiliza la propiedad

ScaleMode.
7.3 Los Mtodos Grficos.- Visual Basic tiene los siguientes mtodos grficos: Print, PSet,
Line y Circle. Estos mtodos permiten mostrar texto y dibujar lneas, crculos y puntos en un
formulario o en un control PictureBox.
7.3.1 El Mtodo Print.- Permite mostrar texto. Por ejemplo, la siguiente instruccin 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 mtodos 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 lneas colocarn el texto Texto de prueba en el
centro del control PictureBox.
Private Sub Picture1 _Click()
Picture1.CurrentX = (Picture1.ScaleWidth - TextWidth(Texto de prueba))/2
Picture1.CurrentY = (Picture1.ScaleHeight TextHeight(Texto de prueba))/2
Picture1.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
despus emplear el mtodo Print para presentar la cadena de caracteres.
7.3.2 El Mtodo 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
Pgina : 10 de 21
la funcin SIN(X).
1 Seleccionar el comando Nuevo proyecto del men Archivo para crear una nueva
aplicacin.
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
Label
Label
TextBox
Propiedad
Caption
Caption
Nombre
Text
TextBox
Nombre
Text
UpDown
Name
BuddyControl
BuddyProperty
Increment
Max
Min
SyncBuddy
UpDown
Name
BuddyControl
BuddyProperty
Increment
Max
Min
SyncBuddy
PictureBox
Nombre
BackColor
CommandButton Nombre
Caption
CommandButton Nombre
Caption
Valor
Valor ms bajo
Valor ms alto
Min
Max
UpDown1
Min
Text
1
10
0
True
UpDown2
Max
Text
1
160
0
True
Grfico
&H80000009&
Dibujar
Dibujar
Salir
Salir
Asociar un procedimiento al cuadro de texto Min accionado por el suceso KeyPress.

Este procedimiento slo debe permitir el ingreso de los dgitos 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 cdigo abre el procedimiento
Min_Change.
2 Desplegar el cuadro de lista Procedimientos de la ventana de cdigo 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
Beep
KeyAscii = 0
End lf
End Sub
Asociar un procedimiento al cuadro de texto Max accionado por el suceso KeyPress.

Este procedimiento slo debe permitir el ingreso de los dgitos 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 cdigo abre el procedimiento
Pgina : 11 de 21
Max_Change
2 Desplegar el cuadro de Lista Procedimientos de la ventana de cdigo y en la lista de
sucesos que puede reconocer el control TextBox, seleccionar el suceso KeyPress.
Private Sub Max_KeyPress(KeyAscii As Integer)
If Not ((Chr(KeyAscii) >= 0 And Chr(KeyAscii) <= 9) Or (Chr(KeyAscii) = - Or Chr(KeyAscii) = .)) Then
Beep
KeyAscii = 0
End If
End Sub
Asociar un procedimiento al botn de comando Dibujar accionado por el suceso Click.

Cuando el usuario haga clic en el botn comando Dibujar, este procedimiento debe dibujar el
grfico de la funcin Sin(X) en el control PictureBox.
1 Hacer doble clic en el botn de comando Dibujar. La ventana de cdigo abre el
procedimiento Dibujar_Click.
Private Sub Dibujar_Click()
Dim VarX, FunY, XMin, XMax, YMin, YMax As Double
El mtodo Cls borra el grfico pintado en el control.
Grfico.Cls
Cambia temporalmente la propiedad ScaleMode a 3 (pixeles)
Grfico.ScaleMode = 3
XPxeles = Grfico.ScaleWidth
XMin = Val(Min)
XMax = Val(Max)
Calcula los valores mnimo y mximo de la funcin.
For I = 1 to XPxeles
VarX = XMin + (Xmax - XMin) * I / XPxeles
FunY = Sin(VarX)
If FunY > YMax Then YMax = FunY
If FunY < YMin Then YMin = FunY
Next I
Prepara el sistema de coordenadas definido por el usuario
Grfico.Scale (XMin, YMin) - (XMax, Ymax)
Traza el grfico de la funcin
For I = 1 To XPxeles
VarX = XMin + (XMax - XMin) * I / XPxeles
Grfico.PSet (VarX, Sin(VarX)), RGB(0, 0, 255)
Next I
End Sub
Se analiza el procedimiento anterior. La siguiente lnea

Grfico.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 XPxeles la
resolucin horizontal del control PictureBox con el fin de preparar un sistema de coordenadas
definido por el usuario.
XPxeles = Grfico.ScaleWidth
Las siguientes instrucciones

For I = 1 To XPxeles
VarX = XMin + (XMax - XMin) * I / XPxeles
FunY = FuncinY(VarX)
If FunY > YMax Then YMax = FunY
Pgina : 12 de 21
If FunY < YMin Then YMin = FunY

Next I
Sirven para averiguar las dimensiones del sistema de coordenadas. Despus de

finalizar el bucle For...Next, las variables YMax e YMin contienen los valores mximo y
mnimo de la funcin para el rango XMax y XMin.
La siguiente lnea, prepara el sistema de coordenadas definido por el usuario utilizando
el mtodo Scale:
Grfico.Scale (XMin, YMin) - (XMax, YMax)
Para trazar el grfico de la funcin punto por punto utilizamos el mtodo PSet.
For I = 1 To Xpxeles
VarX = XMin + (XMax - XMin) * I / Xpxeles
Grfico.PSet (VarX, Sin(VarX)), RGB(0, 0, 255)
Next I
Observar que el mtodo PSet llama a la funcin Sin(VarX) que calcula el valor de la
variable dependiente para cada valor de la variable VarX.
La siguiente ilustracin muestra el grfico de la funcin Y = Sin(X).
7.3.3 El Mtodo Line.- Permite dibujar una lnea entre dos puntos. La sintaxis de este
mtodo es:
[objeto.]Line[(X1, Y1)] - (X2, Y2)[, color]
Si al mtodo Line se le aade la opcin B, las coordenadas (Xl ,Y1) y (X2,Y2) harn
referencia a la esquina superior izquierda o inferior derecha de un rectngulo.
[objeto.]Line(X1, Y1) - (X2, Y2)[, [color], B[F]]
Si se especifica la opcin BF, se obtiene una rectngulo coloreado. Si objeto no se

especifica, la figura se dibuja sobre el formulario actual.
Desarrollar una aplicacin que muestre lneas 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
aplicacin.
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
Form
Label
Label
Label
TextBox
TextBox
Propiedad
Caption
Caption
Caption
Caption
Name
MaxLength
Text
Name
MaxLength
Valor
Trazado de Lneas
Introduzca los datos requeridos
Horizontales
Verticales
Horiz
4
Vert.
4
Pgina : 13 de 21
UpDown
UpDown
PictureBox
CommandButton
CommandButton
CommandButton
CommandButon
CommandButon
Text
BuddyControl
BuddyProperty
Increment
Max
Min
SyncBuddy
BuddyControl
BuddyProperty
Increment
Max
Min
SyncBuddy
Name
Backcolor
Name
Caption
Name
Caption
Name
Caption
name
Caption
Name
Caption
Horiz
Text
1
1600
1
True
Vert
Text
1
1600
1
True
Grfico
Blanco
TrazarHorizontales
Trazar Horizontales
TrazarVerticales
Trazar Verticales
TrazarDiagonales
Trazar Diagonales
LimpiarCuadro
Limpiar Cuadro
Salir
Salir
Diseada la interfaz de usuario, asociar un procedimiento al cuadro de texto Horiz

accionado por el suceso KeyPress. Este procedimiento slo debe permitir el ingreso de
dgitos en el cuadro de texto Horiz.
1. En el formulario, hacer doble clic sobre el cuadro de texto Horiz.
2. En la ventana de cdigo, desplegar el cuadro de lista Procedimientos y seleccionar el
suceso KeyPress. La ventana de cdigo abre el procedimiento Horiz_KeyPress.
3. Digitar el siguiente cdigo:
Private Sub Horiz_keyPress(KeyAscii As Integer)
If Chr(KeyAscii) < 0 Or Chr(KeyAscii) > 9 Then
Beep
KeyAscii = 0
End If
End Sub
Asociar un procedimiento al cuadro de texto Vert accionado por el suceso KeyPress.

Este procedimiento slo debe permitir el ingreso de dgitos en el cuadro de texto Vert.
1. En el formulario, hacer doble clic sobre el cuadro de texto Vert.
2. En la ventana de cdigo, desplegar el cuadro de lista Procedimientos y seleccionar el
suceso KeyPress. La ventana de cdigo abre el procedimiento Vert_KeyPress.
Private Sub Vert_KeyPress(KeyAscii As Integer)
If Chr(KeyAscii) < 0 Or Chr(KeyAscii) > 9 Then
Beep
KeyAscii = 0
End If
End Sub
Asociar un procedimiento al botn de comando Horizontales accionado por el suceso

Click. Cuando el usuario haga clic en este botn, el control PictureBox debe mostrar el
Pgina : 14 de 21
nmero de lneas horizontales que indica el cuadro de texto Horiz.

1. En el formulario, hacer doble clic en el botn de comando Trazar Horizontales. La ventana
de cdigo abre el procedimiento TrazarHorizontales_Clck.
Private Sub TrazarHorizontales_Click()
Dim lineas As Integer
lineas = Val(Horiz)
X1 = 0
Se calcula el espacio que debe haber entre lnea y lnea
NY1 = Grafico.Height / (lineas + 1)
Y1 = NY1
For i = 1 To lineas
Grafico.Line (X1, Y1)-(Grafico.Width, Y1)
Y1 = Y1 + NY1
Next i
End Sub
Asociar un procedimiento al botn de comando Trazar Verticales accionado por el

suceso Click. Cuando el usuario haga clic en este botn, el control PictureBox debe mostrar
el nmero de lneas verticales que indica el cuadro de texto Vert.
1. En el formulario, hacer doble clic en el botn de comando Trazar Verticales. La ventana
de cdigo abre el procedimiento TrazarVerticales_Clck.
Private Sub TrazarVerticales_Click()
Dim lineas As Integer
lineas = Val(Vert)
Y1 = 0
Se calcula el espacio que debe haber entre lnea y lnea
NX1 = Grafico.Width / (lineas + 1)
X1 = NX1
For i = 1 To lineas
Grafico.Line (X1, Y1)-(X1, Grafico.Height)
X1 = X1 + NX1
Next i
End Sub
Hacer doble clic en el botn de comando Trazar Diagonales y escriba el siguiente

cdigo en el procedimiento que muestra la ventana de cdigo.
Private Sub TrazarDiagonales_Click()
Traza las dos diagonals principales en el control PictureBox
Grafico.Line (0, 0)-(Grafico.Width, Grafico.Height)
Grafico.Line (0, Grafico.Height)-(Grafico.Width, 0)
End Sub
Hacer doble clic en el botn de comando Limpiar Cuadro y escriba la sentencia

Grafico.Cls en el procedimiento que muestra la ventana de cdigo.
Private Sub LimpiarCuadro_Click()
Grafico.Cls
End Sub
Hacer doble clic en el botn de comando Salir y escribir la sentencia End en el

procedimiento que muestra la ventana de cdigo.
Private Sub Salir_Click()
End
End Sub
Presionar la tecla F5 para ejecutar el programa.

Pgina : 15 de 21
7.3.4 El Mtodo Circle.- Permite dibujar un crculo, una elipse o parte de estas figuras con
centro (X, Y). La sintaxis de este mtodo es:
[objeto.]Circle(X, Y), radio, [color], [principio], [fin], [aspecto]
X e Y son las coordenadas del centro del crculo y el argumento radio es el radio del
crculo. 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 proporcin entre
el radio vertical y horizontal de la elipse. Si aspecto < 1, la elipse se extiende horizontalmente
y se comprime en direccin vertical.
Desarrollar una aplicacin que dibuje un nmero de circunferencias requerido con
centro en el centro del PictureBox. Es fcil hacerlo utilizando el mtodo Circle.
Seguir estos pasos:
1. Hacer clic en el comando Nuevo proyecto del men Archivo para crear una nueva
aplicacin.
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
Form
Label
Label
TextBox
Propiedad
Caption
Caption
Caption
Name
Text
TextBox
Name
Text
UpDown
BuddyControl
BuddyProperty
Increment
Max
Mim
SyncBuddy
PictureBox
Name
Backcolor
CommandButton Name
Caption
CommandButton Name
Valor
Circunferencias
Circulos
Aspecto
Crculos
Aspecto
Circulos
Text
1
230
1
True
Grfico
Blanco
Trazar
Trazar
Limpiar
Pgina : 16 de 21
Caption
CommandButton Name
Caption
Limpiar
Salir
Salir
Al cargar el formulario, este debe quedar centrado en la pantalla. Para ello debemos
introducir el siguiente cdigo:
Move (Screen.Width - Width) / 2, (Screen.Height - Height) / 2
End Sub
Cuando se introduzcan valores en los cuadros de texto Crculos y Aspecto, el programa

debe permitir solo el ingreso de nmeros. Para ello se debe introducir el siguiente cdigo
bajo el suceso KeyPress de cada cuadro de texto:
Private Sub Circulos_KeyPress(KeyAscii As Integer)
If Chr(KeyAscii) < "0" Or Chr(KeyAscii) > "9" Then
Beep
KeyAscii = 0
End If
End Sub
Private Sub Aspecto_KeyPress(KeyAscii As Integer)
If Not ((Chr(KeyAscii) >= "0" And Chr(KeyAscii) <= "9") Or (Chr(KeyAscii) = ".")) Then
Beep
KeyAscii = 0
End If
End Sub
Asociar un procedimiento al botn de comando Trazar accionado por el suceso Click.

Cuando el usuario haga clic en este botn, el control PictureBox debe mostrar el nmero de
circunferencias indicado en el TextBox Circulos.
1. En el formulario, hacer doble clic en el botn de comando Trazar. La ventana de cdigo
abre el procedimiento Trazar_Click.
Private Sub Trazar_Click()
aspec = Val(Aspecto)
If aspec = 0 Then aspec = 1
x = Grafico.Width / 2
y = Grafico.Height / 2
Ncirc = Val(Circulos)
radio = y
NC = y / Ncirc
For i = 1 To Ncirc
Grafico.Circle (x, y), radio, , , , aspec
radio = radio - NC
Next i
End Sub
Asociar un procedimiento al botn de comando Limpiar accionado por el suceso Click.

Cuando el usuario haga clic en este botn, se debe limpiar el PictureBox.
1. Hacer doble clic en el botn de comando Limpiar. La ventana de cdigo abre el
procedimiento Limpiar_Click.
2. Digitar las siguientes sentencias.
Private Sub Limpiar_Click()
Grafico.Cls
End Sub
Asociar un procedimiento al botn de comando Salir accionado por el suceso Click.

Cuando el usuario haga clic en este botn, la ejecucin del programa debe finalizar.
Pgina : 17 de 21
1. Hacer doble clic en el botn de comando Salir. La ventana de cdigo abre el

procedimiento Salir_Click.
2. Entre las instrucciones Salir_Click y End Sub digitar la sentencia End.
End
End Sub
Las siguientes ilustraciones muestran ejemplos de los resultados de la aplicacin.
7.4 Los Controles Line y Shape.- Estos controles permiten crear figuras geomtricas de
diferentes formas, tamaos y colores en un formulario o en un marco.
Utilizar el control Line para dibujar lneas rectas. La siguiente tabla muestra algunas
propiedades de este control:
Propiedad
BorderStyle
Descripcin
Permite establecer el estilo del borde. Presenta las siguientes opciones:
Valor
Descripcin
0-Transparent Transparente.
1-Solid
Slido.
2-Dash
De rayas.
3-Dot
De puntos.
4-Dash-Dot
Raya-punto.
5-Dash-Dot-Dot Raya-punto-punto.
6-Inside Solid Slido interno.
BorderWidth
Permite establecer el ancho del borde.
BorderColor
Permite colorear la lnea con cualquiera de los colores estndar de Visual Basic.
Visible
Permite mostrar u ocultar la lnea.
El control Shape permite dibujar rectngulos, cuadrados, elipses y circunferencias.

Algunas propiedades de este control son:
Propiedad
BorderColor
FillColor
FillStyle
Shape
Descripcin
Permite especificar un color para el borde de la figura.
Permite especificar el color de relleno de la figura.
Permite establecer un patrn para el color de relleno. Presenta las siguientes
opciones:
Valor
Descripcin
0-Solid
Slido.
1-Transparent
Transparente.
2-Horizontal Line
Lnea horizontal.
3-Vertical Line
Lnea vertical.
4-Upward Diagonal
Diagonal hacia arriba.
5-Downward Diagonal Diagonal hacia abajo.
6-Cross
Cruz.
7-Diagonal Cross
Diagonal cruzado.
Permite controlar la forma de la figura. Presenta las siguientes opciones:
Pgina : 18 de 21
Visible
Valor
Descripcin
0-Rectangle
Rectngulo.
1-Square
Cuadrado.
2-Oval
Elipse
3-Circle
Crculo.
4-Rounded Rectangle Rectngulo redondeado.
5-Rounded Square
Cuadrado redondeado.
Permite mostrar u ocultar la figura.
Desarrollar una aplicacin 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
Form
Caption
Label
Caption
Label
Caption
ComboBox
Name
Style
List
ComboBox
Name
Style
List
Frame
Shape
CheckBox
CommonDialog
CommandButton
Caption
Nombre
Nombre
Nombre
Nombre
Caption
Nombre
Caption
CommandButton
Valor
Figuras geomtricas
Figura
Estilo relleno
Figura
2-Dropdown List
Rectngulo
Cuadrado
Ovalo
Crculo
Rectngulo redondeado
Cuadrado redondeado
EstiloRelleno
2-Dropdown List
Slido
Transparente
Lneas horizontales
Lneas verticales
Diagonales ascendentes
Diagonales descendentes
Cruces
Cruces diagonales
Muestra
Forma
CasillaOcultar
DilogoColor
BotnColor
Color de relleno
Salir
Salir
La interfaz de usuario debe ser similar a la siguiente ilustracin:
Asociar un procedimiento al control Figura accionado por el suceso Click. Cuando el

Pgina : 19 de 21
usuario despliegue este cuadro de lista y seleccione una opcin, la figura que aparece en el
control Shape debe cambiar de forma.
Private Sub Figura_Clck()
Select Case Figura.Text
Case Rectngulo
Cambia la forma a un rectngulo
Forma.Shape = 0
Case Cuadrado
Cambia la forma a un cuadrado
Forma.Shape = 1
Case Ovalo
Cambia la forma a un valo
Forma.Shape = 2
Case Crculo
Cambia la forma a un crculo
Forma.Shape = 3
Case Rectngulo redondeado
Cambia la forma a un rectngulo redondeado
Forma.Shape = 4
Case Cuadrado redondeado
Cambia la forma a un cuadrado redondeado
Forma.Shape = 5
End 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 opcin, el estilo de
relleno de la figura que muestra el control debe cambiar de aspecto.
Private Sub EstiloRelleno_Click()
Select Case EstiloRelleno.Text
Case Slido
Forma.FillStyle = 0
Case Transparente
Forma.FillStyle = 1
Case Lneas horizontales
Forma.FillStyle = 2
Case Lneas verticales
Forma.FillStyle = 3
Case Diagonales ascendentes
Forma.FillStyle = 4
Case Diagonales descendentes
Forma.FillStyle = 5
Case Cruces
Forma.FillStyle = 6
Case Cruces diagonales
Forma.FillStyle = 7
End Select
EndSub
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 figura
Pgina : 20 de 21
If CasillaOcultar.Value = 1 Then
Forma.Visible = False
Else
Forma.Visible = True
End If
End Sub
Asociar un procedimiento al botn de comando BotnColor accionado por el suceso

Click. Cuando el usuario haga clic en este botn, debe aparecer el cuadro de dilogo Color
en el que el usuario podr seleccionar un color para el relleno de la figura.
Private Sub BotnColor_Click()
DilogoColor.Action = 3
Forma.FillColor = DilogoColor.Color
End Sub
Hacer doble clic en el botn de comando Salir y en la ventana de cdigo, escribir el

comando End.
Finaliza la ejecucin del programa
End
End Sub
Presionar la tecla F5 para ejecutar el programa. Desplegar el cuadro de lista Figura y

seleccionar la opcin Elipse. Desplegar el cuadro de lista Estilo relleno y seleccionar la
opcin Cruces diagonales. Hacer clic en el botn Color de relleno y aparecer el cuadro de
dilogo Color. Seleccionar un color y hacer clic en Aceptar. Observar que el color de relleno
de la figura adquiere el color elegido.
Pgina : 21 de 21

Capítulo 7 Vs Basic - Controles Que Muestran Imágenes y Gráficos

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Capítulo 7 Vs Basic - Controles Que Muestran Imágenes y Gráficos

Загружено:

Авторское право:

Доступные форматы

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

CAPITULO 7 VISUAL BASIC CONTROLES QUE MUESTRAN IMGENES Y GRAFICOS

Ing. Hermas Herrera Callejas

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

La siguiente aplicacin, muestra la imagen Gatito.bmp si el usuario hace clic sobre el

para visualizar la imagen Gatito.bmp

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

En el formulario, hacer doble clic sobre el botn de comando Mostrar imgenes y en la

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

Guardar el formulario con el nombre Imgenes.frm y la aplicacin con el nombre

7.1.5 Creacin de Botones de Orden Grficos.- Hasta ahora, en las aplicaciones

Botones de orden basados en grficos

Botn de orden basado en texto

Desarrollar una aplicacin en la que se ejecutarn rdenes utilizando botones de orden

Ing. Hermas Herrera Callejas

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

7. Hacer clic en S para crear una matriz de controles Image.

En el formulario, seleccionar el control N y en la ventana Propiedades hacer clic en el

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

Al control KS insertar el icono CursivaSob.

En el formulario, seleccionar el control F y en la ventana Propiedades hacer clic en el

Asociar un procedimiento al formulario. Cuando el usuario inicie el programa, este

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

Sita el formulario en el centro de la pantalla

Asociar un procedimiento al formulario accionado por el suceso MouseMove. Cuando el

Asociar un procedimiento a la matriz de controles Botn accionado por el suceso

Select Case Index

Asociar un procedimiento a la matriz de controles Botn accionado por el suceso

Select Case Index

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

Asociar un procedimiento a la matriz de controles Botn accionado por el suceso

Finaliza la ejecucin del programa

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

7.2.2 Sistema de Coordenadas.- El origen de coordenadas para un formulario o un cuadro

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

de dibujo es la esquina superior izquierda de los mismos, la coordenada X aumenta hacia la

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

Para presentar una cadena de caracteres en un determinado punto de la pantalla,

Donde X e Y son las coordenadas del punto. El argumento color es opcional y si no se

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

Asociar un procedimiento al cuadro de texto Min accionado por el suceso KeyPress.

Asociar un procedimiento al cuadro de texto Max accionado por el suceso KeyPress.

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

Asociar un procedimiento al botn de comando Dibujar accionado por el suceso Click.

Se analiza el procedimiento anterior. La siguiente lnea

Las siguientes instrucciones

Computacin para Ingeniera I y Laboratorio

Cap.7Visual BasicControles que muestran Imgenes y Grficos

If FunY < YMin Then YMin = FunY

Sirven para averiguar las dimensiones del sistema de coordenadas. Despus de

Si se especifica la opcin BF, se obtiene una rectngulo coloreado. Si objeto no se