1. Gráficos en Visual Basic
Apoyo SSD4

2. Sistema de coordenadas
Se utilizan coordenadas para definir la
posición de cualquier objeto presentado en la
pantalla. Para algunos objetos, el sistema de
coordenadas también se utiliza para definir el
tamaño del objeto (su altura y anchura).
La posición de un objeto siempre se expresa
como la distancia entre su esquina superior
izquierda y la esquina superior izquierda de
su objeto contenedor.
Mtl Lourdes Cahuich 2

3. Sistema de coordenadas
El contenedor de un formulario es siempre el
objeto Screen (pantalla).
La única excepción de esta regla es lo que
se denomina formularios hijos MDI (Interfaz
de Documentos Múltiples), cuyo contenedor
es el formulario padre MDI.
Mtl Lourdes Cahuich 3

4. Sistema de coordenadas
El contenedor de un control es siempre el
formulario sobre el que está, salvo que el
control esté colocado en un Picture Box o
Frame, en cuyo caso el Picture Box o Frame
es el contenedor
Mtl Lourdes Cahuich 4

5. Sistema de coordenadas
El sistema de coordenadas de Visual Basic
funciona como el sistema gráfico de
coordenadas cartesianas habitual.
Cualquier punto se representa con dos
números.
Uno de ellos (tradicionalmente llamado X)
indica la posición horizontal del punto,
mientras que el otro número (Y) indica la
posición vertical del punto.
Mtl Lourdes Cahuich 5

6. Sistema de coordenadas
Por supuesto, un sistema de coordenadas
debe tener un punto cero, u origen (el punto
donde tanto X como Y es 0).
También debe tener una escala que
relaciona las unidades de las coordenadas
con las unidades de medida. Un valor X de
dos, puede significar dos centímetros, dos
metros o dos kilómetros
Mtl Lourdes Cahuich 6

7. Sistema de coordenadas
En todos los sistemas de coordenadas de
Visual Basic, el origen por omisión se localiza
en la esquina superior izquierda del
contenedor.
Los valores X positivos se mueven a la
derecha, y los valores Y positivos hacia
abajo.
Mtl Lourdes Cahuich 7

8. Sistema de coordenadas
Las coordenadas negativas son posibles y
representan posiciones por encima o a la
izquierda del origen por omisión.
El origen puede situarse en cualquier sitio (al
menos para algunos objetos contenedores).
Mtl Lourdes Cahuich 8

9. Sistema de coordenadas
Una unidad lógica imprime al tamaño
correcto. Por ejemplo, una línea que mide
una pulgada lógica mide una pulgada cuando
se imprime.
Mtl Lourdes Cahuich 9

10. Sistema de coordenadas
Establecemos una escala del objeto
contenedor utilizando la propiedad
ScaleMode; sin embargo, los únicos objetos
que tienen una propiedad ScaleMode son
Form, Picture Box y Printer.
Los otros objetos que pueden ser
contenedores (el objeto Screen y el control
Frame) siempre usan twips para las medidas.
Mtl Lourdes Cahuich 10

11. Sistema de coordenadas
Podemos usar varias escalas diferentes en
las coordenadas de Visual Basic. Aunque
muchos programas Visual Basic están
escritos utilizando únicamente la escala por
omisión, necesitamos saber las opciones.
Mtl Lourdes Cahuich 11

12. Valor Unidad
0 Personalizado1
1 Twip (por defecto); hay 1.440 twips por pulgada lógica, y
567 twips por centímetro lógico
2 Punto; hay 72 puntos por pulgada lógica
3 Pixel; ésta es la unidad más pequeña de resolución de
pantalla o impresora
4 Carácter; una unidad carácter es igual a 120 twips
horizontales, y 240 twips verticales
5 Pulgada
6 Milímetro
7 Centímetro
Mtl Lourdes Cahuich 12

13. El objeto Screen
El objeto Screen es la representación lógica
de Visual Basic de toda la pantalla de
visualización.
Las coordenadas de pantalla siempre se
miden en twips, y la esquina superior
izquierda siempre se localiza en (0, 0).
Mtl Lourdes Cahuich 13

14. Objeto Screen
El tamaño físico de la pantalla varía de un
sistema a otro.
Podemos obtener el tamaño de la pantalla
mediante dos propiedades del objeto Screen,
Width y Height.
ScreenWidthInTwips = Screen.width
ScreenHeightInTwips = Screen.Height
Mtl Lourdes Cahuich 14

15. Objeto Screen
Aunque no podemos cambiar estas
propiedades, conocer sus valores nos
ayudará a determinar la posición y tamaño
correctos de nuestros formularios.
El objeto Screen tiene algunas otras
propiedades que necesitamos conocer.
Mtl Lourdes Cahuich 15

16. Objeto Screen
Las propiedades TwipsPerPixelX y
TwipsPerPixelY devuelven el número de
twips por pixel de pantalla.
Un pixel es el punto más pequeño de luz que
puede visualizarse en la pantalla, y la
resolución física de una visualización
concreta se expresa en términos de pixeles
horizontales y verticales.
Mtl Lourdes Cahuich 16

17. Objeto Screen
Cuando un programa está en ejecución, el
número de twips por pixel dependerá de la
configuración del hardware del sistema, así
como de los ajustes del controlador de
visualización de Windows
Mtl Lourdes Cahuich 17

18. Propiedades
Podernos usar estas propiedades para
acoplar los gráficos del programa con las
características de la pantalla.
Por ejemplo, para dibujar la línea horizontal
más fina posible, estableceríamos el grosor
de la línea igual a Screen.TwipsPerPixelY
twips
Mtl Lourdes Cahuich 18

19. Propiedades
El resultado es una línea que tiene
precisamente un grosor de un pixel.
También podemos calcular la resolución
actual de la pantalla:
Xres = Screen.Width / Screen.TwipsPerPixelX
Yres = Screen.Height / Screen.TwipsPerPixelY
Mtl Lourdes Cahuich 19

20. Propiedades de posición y tamaño
Las propiedades Top y Left especifican la
posición de la esquina superior izquierda del
objeto dentro de su contenedor, y las
propiedades Height y Width especifican su
tamaño.
Estas cuatro propiedades utilizan las
unidades de coordenadas especificadas por
la propiedad ScaleMode del contenedor.
Mtl Lourdes Cahuich 20

21. Propiedades de posición y tamaño
Si cambiamos la propiedad ScaleMode de
un contenedor, bien durante el diseño del
programa o en ejecución, las propiedades de
cualquier objeto del contenedor cambian
automáticamente a las nuevas unidades.
Mtl Lourdes Cahuich 21

22. Propiedades de posición y tamaño
Otras dos propiedades, ScaleHeight y
ScaleWidth, sólo se aplican a objetos Form,
Picture Box y Printer.
Estas propiedades proveen las dimensiones
del interior del objeto (es decir, el área
disponible para operar con gráficos).
Mtl Lourdes Cahuich 22

23. Propiedades de posición y tamaño
Estas especificaciones son diferentes de las
que proveen las propiedades Height y
Width, que indican el tamaño global del
objeto, incluyendo los bordes, barra de título
y otros componentes del objeto.
Mtl Lourdes Cahuich 23

24. Propiedades de posición y tamaño
El uso más frecuente para las propiedades
ScaleHeight y ScaleWidth es en tiempo de
ejecución: el programa las lee para
determinar el tamaño del interior del objeto
contenedor y luego utiliza los valores para
situar objetos o realizar operaciones gráficas
dentro del contenedor.
Mtl Lourdes Cahuich 24

25. Propiedades de posición y tamaño
Todos los controles Visual Basic tienen una
propiedad Container, que devuelve la
identidad del objeto contenedor del control.
También podemos establecer esta
propiedad, que tendría el efecto de mover un
control de un contenedor a otro
Mtl Lourdes Cahuich 25

26. El control Picture Box
Las posibilidades de este control
pertenecen a tres campos:
1. Presentar imágenes que fueron creadas en
cualquier otra parte y existen en archivos en
disco, como fotografías escaneadas y
dibujos creados con un programa gráfico.
Mtl Lourdes Cahuich 26

27. El control Picture Box
2. Presentar gráficos que son creados con
sentencias de programa, como el método
Circle.
3. Servir como un contenedor para agrupar
otros controles.
Mtl Lourdes Cahuich 27

28. Carga de una imagen durante el diseño del
programa
Podemos cargar una imagen en un Picture
Box durante el diseño del programa, con el
objetivo de incrustar la imagen en el archivo
ejecutable del proyecto. (Las imágenes a
veces se guardan como archivos FRX.)
Este método es apropiado si un Picture Box
siempre va a mostrar la misma imagen o
cuando no queremos distribuir un archivo de
imagen separado del programa.
Mtl Lourdes Cahuich 28

29. Carga de una imagen durante el diseño del
programa
Cargar una imagen durante el diseño del
programa no impide que podamos cargar
otra imagen en el Picture Box mientras el
programa está en ejecución.
Mtl Lourdes Cahuich 29

30. Formatos de imagen para un Picture Box.
Mtl Lourdes Cahuich 30

31. Carga de una imagen durante el diseño del
programa
Para cargar una imagen en tiempo de
diseño, seleccionar la propiedad Picture del
Picture Box en la ventana Propiedades.
Visual Basic presenta un panel de diálogo
Cargar Imagen, que permite seleccionar el
archivo gráfico. La imagen seleccionada se
presenta en el control durante el diseño, así
como cuando el programa se ejecuta.
Mtl Lourdes Cahuich 31

32. Carga de una imagen durante la ejecución
del programa
Hay varios métodos hay disponibles para
visualizar una imagen en un Picture Box en
tiempo de ejecución.
Un método podría ser seleccionar la
propiedad Picture del control. Pero no
funciona directamente.
Mtl Lourdes Cahuich 32

33. Carga de una imagen durante la ejecución
del programa
Debemos usar la función LoadPicture:
MiPictureBox.Picture = LoadPicture(nombrearchivo)
Mtl Lourdes Cahuich 33

34. Carga de una imagen durante la ejecución
del programa
Donde nombrearchivo es el nombre de un
archivo en uno de los formatos de imagen
admitidos, incluyendo la ruta completa, si es
necesario.
La posición de la imagen y el efecto de la
propiedad AutoSize del control son los
mismos que cuando cargamos una imagen
en tiempo de diseño.
Mtl Lourdes Cahuich 34

35. Borrar una imagen
Podemos borrar un Picture Box utilizando
LoadPicture sin argumento:
MiPictureBox.Picture = LoadPicture()
Mtl Lourdes Cahuich 35

36. Limitaciones para cargar imágenes
Cargar una imagen en un Picture Box con
estos métodos es correcto en la mayoría de
las ocasiones, pero tiene algunas
limitaciones:
La imagen siempre se coloca en la esquina
superior izquierda del Picture Box.
El tamaño de la imagen no puede cambiarse, es
decir, la imagen siempre se presenta con su
tamaño original.
Sólo puede presentarse una imagen cada vez en
un control dado.
Mtl Lourdes Cahuich 36

37. Propiedades picturebox
Los detalles de cómo aparecen los objetos
gráficos los controlan una serie de
propiedades del control PictureBox.
Entre estas propiedades se encuentran las
siguientes:
Mtl Lourdes Cahuich 37

38. Propiedades picturebox
CurrentX, CurrentY
Estas propiedades determinan la posición
actual del dibujo. Mediante estas
propiedades, se especifica la posición inicial
de las primitivas de dibujo, por ejemplo las
líneas, dicha posición se actualiza para
reflejar cada primitiva de dibujo.
Mtl Lourdes Cahuich 38

39. Propiedades picturebox
BackColor, ForeColor, FillColor
Estas propiedades determinan el color que
usa el dibujo. BackColor indica el color de
background de la primitiva de dibujo.
Esto afecta, por ejemplo, al area que se
encuentra alrededor del texto. ForeColor
determina el color del primer plano (sobre la
cual trabaja el usuario) del dibujo.
Mtl Lourdes Cahuich 39

40. Propiedades picturebox
Esto afecta, por ejemplo, al color de las letras
del texto y el color de las líneas.
Por último, FillColor determina el color del
interior de algunas primitivas, como los
rectángulos o círculos.
Mtl Lourdes Cahuich 40

41. Propiedades picturebox
FillStyle
Esta propiedad determina si el area interior
del dibujo se encuentra rellena con un color
(1-Solid), se encuentra vacía (0-
Transparent), o tiene otro tipo de llenado (por
ejemplo, 4-Upward Diagonal, rellena el area
interior con líneas en diagonal).
Mtl Lourdes Cahuich 41

42. Propiedades picturebox
Si FillStyle no tiene asignado el valor 0-
Transparent, entonces el valor de FillColor
actual determina el color de las líneas o del
area utilizado para rellenar el dibujo.
Si FillStyle es diferente de 1-Solid, el area va
a presentarse con la propiedad que tiene el
color de background (BackColor).
Mtl Lourdes Cahuich 42

43. Propiedades picturebox
DrawWidth
Esta propiedad determina el grosor de las
líneas y bordes del objeto. Este valor está
expresado en pixeles (no twips).
DrawStyle
Esta propiedad determina el estilo de la línea
que se usa para dibujar líneas y orillas
Mtl Lourdes Cahuich 43

44. Propiedades picturebox
Entre las configuraciones disponibles se
encuentran: 0-Solid, 1-Dash, 2-Dot, 3-Dash
Dot, 4-Dash Dot Dot, y 5-Transparent.
Observa que las líneas no transparentes que
tienen la propiedad DrawWidth > 1 tendrán
un borde sólido, independientemente de la
configuración de esta propiedad
Mtl Lourdes Cahuich 44

45. Métodos picturebox
Las operaciones de dibujo se implementan
como métodos del control PictureBox o
Forma.
Cada método de dibujo usa el estado actual
de las propiedades antes mencionadas, junto
con un conjunto de parámetros para controlar
su acción.
Mtl Lourdes Cahuich 45

46. Métodos picturebox
Cls
Este método inicializa el control PictureBox con su
color de background e inicializa las variables
CurrentX y CurrentY en 0,0. Este método no recibe
parámetros y se manda llamar de la siguiente
manera:
drawnObject.Cls
donde drawnObject es el objeto PictureBox (o
Form) que se está dibujando. En general, si se
omite el nombre del objeto que se está dibujando, el
método se aplicará al background de la forma
actual. (por ejemplo, la forma sobre la cual el
usuario ha seleccionado la ventana activa).
Mtl Lourdes Cahuich 46

47. Métodos picturebox
PSet
Este método dibuja un punto en una posición
determinada, e inicializa las variables CurrentX y
CurrentY en esa posición. El tamaño del punto lo
determina la propiedad DrawWidth. Si no se
especifica el color, se usa el color ForeColor. A este
método se le puede mandar llamar desde varias
formas, utilizando la siguiente sintáxis:
drawnObject.PSet [Step] (x, y) [, color]
Mtl Lourdes Cahuich 47

48. Métodos picturebox
Basándote en esta notación, debes sustituir
los elementos que se encuentran en itálicas
con un nombre, una expresión o un valor.
Los elementos que se encuentran en
negritas son palabras reservadas, y los
elementos que están encerrados entre quot;[quot; y
quot;]quot; indican que el elemento es opcional (los
brackets [] no se incluyen en el código)
Mtl Lourdes Cahuich 48

49. Métodos picturebox
Line
Este método dibuja una línea o un
rectángulo. El estilo y grosor de la línea la
determinan las propiedades DrawWidth y
DrawStyle respectivamente
Mtl Lourdes Cahuich 49

50. Métodos picturebox
Circle
Este método dibuja un círculo, una elipse o
un arco circular o elíptico. Tal como con otras
primitivas, las propiedades ForeColor,
DrawWidth, DrawStyle, FillStyle y FillColor
determinan el aspecto del dibujo.
Mtl Lourdes Cahuich 50

51. Métodos picturebox
PaintPicture
Este método presenta una imagen o parte de
una imagen en una posición dada.
Generalmente las imágenes se obtienen de
la propiedad Picture de un objeto
Mtl Lourdes Cahuich 51

52. Referencias
http://www.adrformacion.com/curso/aplicacio
nesvisualbasic/leccion1/graficos_visual_basic
.htm
Material curso iCarnegie SSD4
Mtl Lourdes Cahuich 52