UMSA Facultad de Ingeniera Computacin para Ingeniera I y Laboratorio Controles Bsicos

Controles Image, PictureBox

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) 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 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 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.

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 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. 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 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 1

Univ.: ALCON CHAMBI, Santos

UMSA Facultad de Ingeniera Computacin para Ingeniera I y Laboratorio 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. El Mtodo Line.- Permite dibujar una lnea entre dos puntos. La sintaxis de este mtodo es: [Objeto.]Line[(X1, Y1)] - (X2, Y2)[, color] 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. Proyecto-07: Graficador de Funciones Paso 1: Insertar Controles Controles Bsicos

Paso 2: Establecer propiedades - Form1 Caption = Grafico de la Funcin Y=X*X*Sin(1/X) Name = frmCurvas BackColor= Cualquier color MaxButton=False MinButton=False Icon = cualquier ICONO

Univ.: ALCON CHAMBI, Santos

UMSA Facultad de Ingeniera Computacin para Ingeniera I y Laboratorio - PictureBox1 Name = picGrfico AutoRedraw=True BackColor=Negro FillColor=Negro ForeColor=Negro Control Nombre Picture Visible Image1 imgDibujarInhabilitado DibujarInhabilitado.bmp False Image2 imgDibujarNormal DibujarNormal.bmp False Image3 imgDibujarUp DibujarUP.bmp False Image4 imgDibujarDown DibujarDown.bmp False Image5 imgSalirNormal SalirNormal.bmp False Image6 imgSalirUp SalirUp.bmp False Image7 imgSalirDown SalirDown.bmp False Image8 imgBotn DibujarInhabilitado.bmp True Image9 imgBotn SalirNormal.bmp True Objeto Nombre Caption Text Label1 Sin Modificar Ingrese valor de X ms bajo No Tiene Label2 Sin Modificar Ingrese valor de X ms alto No Tiene Text1 txtMin No Tiene Text2 txtMax No Tiene Paso 3: Escribir el Cdigo Controles Bsicos

Chr(KeyAscii) = ".")) Then Beep MsgBox "Ingrese Solo Nmeros", vbExclamation, "ERROR" KeyAscii = 0 Else 'se cambia el valor de la variable a TRUE sw1 = True 'cuando sw1 y sw2 sean verdaderos, entonces el imgBotn(0) pasara a estar habilitado, con la imagen imgDibujarNormal If sw1 And sw2 Then imgBotn(0).Picture = imgDibujarNormal.Picture EndIf IfKeyAscii = 13 Then MsgBox "Verifique que todos los Datos son Correctos, de serlo Proceda a DIBUJAR", vbInformation, "REVISE LA INFORMACION" End If End Sub Private Sub txtMin_KeyPress(KeyAscii As Integer) If Not ((Chr(KeyAscii) >= "0" And Chr(KeyAscii) <= "9") Or (KeyAscii = 13 Or KeyAscii = 8 Or Chr(KeyAscii) = "-" Or Chr(KeyAscii) = ".")) Then Beep MsgBox "Ingrese SoloNmeros", vbExclamation, "ERROR" KeyAscii = 0 Else sw2 = True If sw1 And sw2 Then imgBotn(0).Picture = imgDibujarNormal.Picture End If If KeyAscii = 13 Then txtMax.SetFocus EndIf End Sub

'se dimensionan variables de tipo Boolean, que funcionaran como interruptores, las que inicializan con un valor de FALSE por defecto Dim sw1, sw2 As Boolean Private Sub Form_Load() Move (Screen.Width - Width) \ 2, (Screen.Height - Height) \ 2 End Sub Private Sub txtMax_KeyPress(KeyAscii As Integer) If Not ((Chr(KeyAscii) >= "0" And Chr(KeyAscii) <= "9") Or (KeyAscii = 13 Or KeyAscii = 8 Or Chr(KeyAscii) = "-" Or
Univ.: ALCON CHAMBI, Santos

UMSA Facultad de Ingeniera Computacin para Ingeniera I y Laboratorio Controles Bsicos

'Genera la funcin Y, de acuerdo a su ecuacin Function FuncinY(ByVal X As Double) As Double If X <> 0 Then FuncinY = X * X * Sin(1 / X) 'If X <> 0 Then FuncinY = Sin(1 / X) 'If X <> 0 Then FuncinY = X * Tan(1 / X) End Function Private Sub imgBotn_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single) 'el ndex muestra el valor de uno de los elementos del array de controles creado Select Case Index 'de mover el mouse por la imagen de DIBUJAR se dar a lugar el siguiente procedimiento Case 0 'si la imagen de DIBUJAR esta normal entonces al pasar el mouse por el control, este mostrara la imagen del botn sobresaltado If imgBotn(0).Picture = imgDibujarNormal Then imgBotn(0).Picture = imgDibujarUp.Picture 'mientras que la imagen de SALIR seguir normal imgBotn(1).Picture = imgSalirNormal.Picture 'de mover el mouse por la imagen de SALIR se dar a lugar lo siguiente Case 1 If imgBotn(0).Picture = imgDibujarUp.Picture imgBotn(0).Picture = imgDibujarNormal.Picture imgBotn(1).Picture = imgSalirUp.Picture End Select End Sub Private Sub Form_MouseMove(Button As Integer, Shift As Integer,
Univ.: ALCON CHAMBI, Santos

X As Single, Y As Single) If imgBotn(0).Picture = imgDibujarUp Then imgBotn(0).Picture = imgDibujarNormal.Picture imgBotn(1).Picture = imgSalirNormal.Picture End Sub Private Sub imgBotn_MouseDown(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single) Select Case Index Case 0 If imgBotn(0).Picture = imgDibujarUp.Picture Then imgBotn(0).Picture = imgDibujarDown.Picture Case 1 imgBotn(1).Picture = imgSalirDown.Picture End Select End Sub Private Sub imgBotn_MouseUp(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single) Select Case Index Case 0 Dim VarX, FunY, XMin, XMax, YMin, YMaxAs Double If imgBotn(0).Picture = imgDibujarDown.Picture Then imgBotn(0).Picture = imgDibujarUp YMin = 1E+101 YMax = -1E+101 'El mtodo Cls borra el grfico pintado en el control picGrfico.Cls 'Cambia temporalmente la propiedad ScaleMode a 3 (pixeles) picGrfico.ScaleMode = 3 XPxeles = picGrfico.ScaleWidth XMin = Val(txtMin) XMax = Val(txtMax) 'Calcula Min y Max para el eje Y (para la funcin) For I = 1 ToXPxeles
4

Then

UMSA Facultad de Ingeniera Computacin para Ingeniera I y Laboratorio Controles Bsicos

VarX = XMin + (XMax - XMin) * I / XPxeles FunY = FuncinY(VarX) If FunY>YMax Then YMax = FunY If FunY<YMin Then YMin = FunY Next 'Prepara el sistema de coordenadas definido por el usuario picGrfico.Scale (XMin, YMin)-(XMax, YMax) picGrfico.ForeColor = RGB(0, 0, 255) 'Se sita sobre el primer punto picGrfico.PSet (XMin, FuncinY(XMin)) 'Traza la funcin, mediante el mtodo LINE For I = 1 ToXPxeles VarX = XMin + (XMax - XMin) * I / XPxeles picGrfico.Line -(VarX, FuncinY(VarX)) Next EndIf Case 1 'Finaliza la ejecucin del programa End End Select End Sub
Paso 4: Grabar el programa Paso 5: Ejecuta el programa

Private DibujoAs Integer Private Sub Form_Load() Move 0, 0 Form1.Width = Screen.Width Form1.Height = Screen.Height End Sub Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) Dibujo = Dibujo - 1 Select Case Button Case vbLeftButton r = 255 g=0 b=0 Case vbMiddleButton r=0 g = 255 b=0 Case vbRightButton r=0 g=0 b = 255 End Select CurrentX = X CurrentY = Y End Sub Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) If Dibujo Then Line -(X, Y), RGB(r, g, b) End If End Sub Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single) Dibujo = 0 End Sub

PRACTICA Vamos a simular el dibujar a mano alzada en un formulario.... 1. Crea un nuevo proyecto 2. Sin insertar ningn control accede a la ventana de cdigo y escriba los siguientes cdigos: 3. Adems, deber explicar mediante COMENTARIOS cmo funciona el programa. Private r As Integer, g As Integer, b As Integer Univ.: ALCON CHAMBI, Santos