cursos online, formacion on-line, teleformación, Elearning, Cursos online de ofimática, diseño gráfico, web, gestión, idiomas, programacion - ADR Formación

1 - Gráficos en Visual Basic

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.

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. 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. El único otro posible contenedor es el objeto Printer, que se utiliza para imprimir.

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

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

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

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.

Especificaciones de escalas en Visual Basic. (ScaleMode)

Valor 

Unidades de escala

Personalizado

Twip (por defecto); hay 1.440 twips por pulgada lógica, y 567 twips por centímetro lógico

Punto; hay 72 puntos por pulgada lógica

Pixel; ésta es la unidad más pequeña de resolución de pantalla o impresora

Carácter; una unidad carácter es igual a 120 twips horizontales, y 240 twips verticales

Pulgada

Milímetro

Centímetro

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

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.

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

La propiedad MousePointer especifica el aspecto del puntero del ratón mientras está sobre un elemento de pantalla de Visual Basic. Con la especificación por defecto de 0, el puntero está controlado por la propiedad MousePointer de los objetos del programa (formulario, control, etc.). Otras posibles especificaciones para la propiedad MousePointer del objeto Screen:

Especificaciones de la propiedad MousePointer.

Especificación

Descripción

0

Forma determinada por el objeto (por omisión)

1

Flecha

2

Cruz (puntero en forma de cruz)

3

Barra |

4

Icono (cuadradito dentro de un rectángulo)

5

Tamaño (flecha de cuatro puntas señalando el norte, sur, este y oeste)

6

Tamaño NE SW (flecha doble que señala los cuatro puntos cardinales)

7

Tamaño N S (flecha doble que señala el norte y el sur)

8

Tamaño NW SE (flecha doble que señala el noroeste y el sureste)

9

Tamaño W E (flecha doble señalando el oeste y este)

10

Flecha arriba

11

Reloj de arena (espera)

12

No soltar

13

Flecha y reloj de arena

14

Flecha y signo de interrogación

15

Dimensionar todo (puede personalizarse bajo Microsoft Windows NT 3.51 y 4.0)

99

Icono personal especificado con la propiedad MouseIcon

Una propiedad MousePointer de 99 nos permite definir nuestro propio cursor utilizando la propiedad MouseIcon. En la sentencia:

Screen.MouseIcon = picture

picture especifica el nombre y ruta del archivo del icono o cursor que debe utilizarse como cursor del ratón cuando la propiedad MousePointer se establece a 99.

La propiedad ActiveForm devuelve el formulario que está actualmente activo. Esta propiedad es útil en un programa de múltiples formularios para escribir una sección de código que siempre referenciará al formulario activo.

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

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

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.

Carga y presentación de formularios

Cada formulario de un proyecto Visual Basic existe en su propio archivo en disco. Presentar un formulario en la pantalla requiere dos pasos:

1. Cargar el formulario del disco a la memoria.
2. Presentar el formulario.

En un proyecto de formulario único, el formulario se carga y se presenta cuando arranca el programa. Para un proyecto de múltiples formularios, el formulario de arranque designado se carga y se presenta cuando el programa se inicia. El resto de formularios se cargan y se presentan bajo el control del programa.

Podemos usar la sentencia Load para cargar un formulario sin presentarlo:

Load nombreformulario

Un formulario también se cargará si el programa se refiere a alguna de sus propiedades. Cargar un formulario y visualizarlo son dos cosas diferentes, por ejemplo, el método Show, se utiliza para visualizar un formulario. Si el formulario todavía no ha sido cargado, Show lo carga automáticamente.

nombreformulario.Show

Dos casos, en que Load es útil son:

  • Si queremos que el procedimiento de evento Load del formulario se ejecute sin que se presente, utilizar la sentencia Load.

  • Si el formulario es complejo (es decir, si tiene muchos controles y/o realiza procesamientos complejos en su procedimiento de evento Load), usar la sentencia Load para cargar el formulario antes de que se necesite visualizarlo. Los formularios complejos se visualizan más deprisa si han sido cargados con anticipación.

Para descargar un formulario que no necesitamos cuando queremos liberar memoria o inicializar todas las propiedades del formulario a sus valores originales se usa la sentencia Unload:

Unload nombreformulario

Para quitar un formulario de la pantalla sin descargarlo, usar el método Hide:

nombreformulario.Hide

Ejemplo

En un formulario nuevo, insertar un Picture Box y un botón. Establecer que el formulario se presente en centro de la pantalla ocupando la mitad del tamaño de la misma y que se redimensionen todos los objetos al cambiar el tamaño del formulario. (Procedimiento de evento Form_Resize). Llamarlo Ejemplo01.

Ejemplo de elementos gráficos

Nota: La primera tarea que debemos abordar es colocar el formulario en medio de la pantalla, para ello acudiremos en diseño a la propiedad StartUpPosition y elegiremos el valor 2 -  CenterScreen. Para especificar el tamaño del formulario tendremos que escribir el siguiente código en su evento Load:

De esta forma, nos aseguramos que tanto la altura como la anchura del formulario (al que hemos llamado Proporcional) sean justo la mitad de las que tenga la pantalla.

Teniendo en cuenta que hemos llamado caja al PictureBox y Salir al botón de comando, deberemos escribir el siguiente código en el evento resize. Ya sólo faltará escribir el código respuesta a la pulsación del botón Salir.

El control Picture Box

Las posibilidades de este control pertenecen a tres campos:

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

  • Presentar gráficos que son creados con sentencias de programa, como el método Circle.

  • Servir como un contenedor para agrupar otros controles.

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

Formatos de imagen para un Picture Box.

Formato

Extensión

Descripción

Bitmap   

BMP o DIB

Bitmap Windows. Define una imagen como una cuadrícula de puntos (pixeles).

Icono   

ICO   

Un tipo especial de bitmap, normalmente 32 por 32 o 16 por 16 pixeles de tamaño.

Cursor   

CUR   

Similar a un icono, aunque también contiene un hotspot (zona caliente) definido, que sigue con precisión la posición del cursor. Se utiliza para el puntero del ratón.

Metaarchivo   

WMF o EMF

Metaarchivo Windows. Define una imagen en términos de líneas y formas.

JPEG   

JPG o JPEG

formato Joint Photographic Expert Group. Un formato de imagen comprimida que admite color de 8 y 24 bits. Habitualmente utilizado en Internet.

GIF   

GIF

Graphical Interchange Format. Un formato comprimido que sólo admite color de 8 bits. También popular en Internet.

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.

Una imagen se carga en un control Picture Box con la esquina superior izquierda de la imagen situada en la esquina superior izquierda del Picture Box. Si la imagen es menor que el Picture Box, el área exterior de la imagen presenta el color especificado por la propiedad BackColor del Picture Box. Si la imagen es mayor que el control, la porción que sale fuera del Picture Box es recortada si la propiedad AutoSize se establece como False (por defecto). Podemos establecer la propiedad AutoSize del Picture Box como True, lo que hace que el Picture Box se agrande o encoja para acoger el tamaño exacto de la imagen.

También podemos cargar una imagen en un Picture Box desde el Portapapeles de Windows. Abrimos la imagen en la aplicación con la que la creamos o editamos, luego copiamos la imagen al Portapapeles utilizando el comando Edición / Copiar. Volvemos a Visual Basic, seleccionarnos el control Picture Box, y seleccionarnos Edición / Pegar.

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. Debemos usar la función LoadPicture:

MiPictureBox.Picture = LoadPicture(nombrearchivo)

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. Podemos borrar un Picture Box utilizando LoadPicture sin argumento:

MiPictureBox.Picture = LoadPicture()

También podemos copiar una imagen de un Picture Box a otro accediendo a la propiedad Picture del control:

MiPictureBox1.Picture = MiPictureBox2.Picture

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.

El método PaintPicture

Este método permite eludir las limitaciones de los anteriores métodos utilizados para cargar una imagen durante la ejecución del programa. Se comienza con una imagen fuente, bien en un control Picture Box o en un formulario. Luego se puede tomar toda la imagen o parte de ella (cualquier región rectangular) y colocarla en cualquier sitio, en otro Picture Box o formulario, o en el Picture Box o formulario fuente. Se puede estirar o encoger la imagen "copiada".

La sintaxis del método PaintPicture:

Objeto.PaintPicture gráfico, x1, y1, w1, h1, x2, y2, w2, h2, código

donde los argumentos son como sigue:

  • Objeto. El nombre del objeto Picture Box, Form o Printer donde la imagen va a colocarse. Este argumento es opcional. Si se omite, se asume el formulario que tiene el foco.
  • gráfico. La fuente del gráfico. Debe ser la propiedad Picture de un objeto Form, Picture o Picture Box.
  • x1, y1. Los valores que indican las coordenadas destino (es decir, la posición del objeto destino donde la esquina superior izquierda de la imagen va a dibujarse). La propiedad ScaleMode del objeto determina la unidad de medida utilizada.
  • w1, h1. Los valores que indican la anchura y altura destinos de la imagen, utilizando las unidades especificadas por la propiedad ScaleMode del objeto destino. Si la anchura y/o altura destino es mayor o menor que la anchura (w2) o altura (h2) fuente, la imagen se estira o se encoge para encajar. Estos argumentos son opcionales; si se omiten, la anchura (w1) y la altura (h1) fuente se utilizan sin estiramiento ni compresión.
  • x2, y2. Los valores que indican las coordenadas fuente de la región que va a ser copiada en el objeto fuente (en unidades especificadas por la propiedad ScaleMode del objeto fuente). Estos argumentos son opcionales; si se omiten, se asume 0 (indicando la esquina superior izquierda de la imagen fuente).
  • w2, h2. Los valores que indican la anchura y altura de la región dentro de la fuente que va a copiarse (en unidades especificadas por la propiedad ScaleMode del objeto fuente). Estos argumentos son opcionales; si se omiten, se utiliza toda la anchura y altura de la fuente.
  • código. Un valor de tipo Long que define la operación en modo de bit realizada entre los pixeles de la imagen fuente y los pixeles de cualquier imagen existente sobre el destino. Este argumento, que es opcional y es útil únicamente con bitmaps. Si el argumento se omite, la fuente se copia en el destino, reemplazando cualquier cosa que hubiera allí.

Una imagen bitmap puede estar ya allí, pero aunque el destino esté en blanco, algo hay allí, tal vez sólo pixeles blancos. Sobre la extensión de la región copiada, por tanto, cada pixel de la imagen copiada tiene el correspondiente pixel en la misma localización en el destino. El argumento código determina como se combinan estos pixeles.

La operación más simple y frecuente es dejar que cada nuevo pixel reemplace el pixel original. El argumento código para esto es la constante predefinida vbSrcCopy. Otros dos argumentos código útiles son vbBlackness y vbWhiteness, que cambian el rectángulo destino a todo negro o todo blanco. Esto en realidad no es una copia de la imagen fuente, pero aún así hay que especificar una fuente en la sentencia PaintPicture. Otros argumentos código realizan diversas combinaciones lógicas de la imagen fuente con la imagen destino. Se puede usar para crear ciertos tipos de efectos visuales, para ahondar en este tema ir al sistema de ayuda de Visual Basic.

Ejemplo

En un formulario nuevo insertar dos Picture Box. Cargar en uno de ellos una imagen (por ejemplo guardia.jpg). Utilizar el otro como ventana de zoom para pulsaciones del botón izquierdo del ratón sobre la imagen. Llamarlo Ejemplo02.  

Ejemplo del método PaintPicture

Descargar guardia.jpg

Nota: Eventos relacionados con el ratón: Visual Basic tiene cuatro eventos relacionados con el clic del ratón. El evento MouseDown se produce cuando el usuario pulsa un botón del ratón. El objeto sobre el que se encuentra el puntero del ratón captura el ratón. Esto significa que el objeto recibe todos los eventos de ratón, incluyendo el evento MouseUp cuando el botón del ratón es liberado (aun cuando el ratón se haya apartado del objeto mientras el ratón estaba pulsado). El evento Click, sin embargo, es generado sólo si los eventos MouseDown y MouseUp se producen sobre el objeto. Si el ratón es apartado del objeto antes de liberar el botón, el objeto recibe un evento MouseDown y MouseUp, pero no un evento Click. Si el botón es liberado sobre el objeto, entonces el evento ocurre en el orden MouseDown, MouseUp, Click. Si hacemos doble clic sobre un objeto, el orden de eventos es MouseDown, MouseUp, DblClick, MouseUp.

Nota: Una vez insertados los dos picture box y cargado uno de ellos con una imagen, suponer que el que tiene la imagen se llama caja1 y el otro caja2. Conviene que en el Load del formulario ajustemos los tamaños y posiciones de los objetos.

Observar que se definen dos constantes (Alto y Ancho) que utilizaremos más adelante para definir el tamaño del recuadro a visualizar aumentado de tamaño.

Para interceptar la pulsación del botón izquierdo del ratón, usaremos el evento Mouse_Up que nos permite seleccionar el botón pulsado.

Una vez que disponemos de las coordenadas X e Y pulsadas por el usuario, tenemos que crear un cuadrado virtual cuyo centro sean esas coordenadas, de forma que sea el que enviemos al otro picture box, como en el destino ocupará todo el control, habremos conseguido el efecto zoom deseado.

Antes de programar el método PaintPicture, debemos pasar las coordenadas del cuadrado virtual por cuatro comprobaciones, de forma que nos aseguremos que el mismo no se "sale" del contenedor.


Todos los derechos reservados © Copyright 2004 ADR Infor S.L.
Contacto: soporte@adrinfor.com