domingo, 30 de mayo de 2010

GRAFICOS EN VISUAL BASIC

GRÁFICOS EN VISUAL BASIC 6.0

Visual Basic 6.0, además de hacer fácil la construcción de interfaces gráficas de usuario, tiene también grandes posibilidades gráficas en lo que se refiere a dibujo de líneas y formas geométricas, así como en lo referente a la introducción de gráficos y figuras realizados con otras aplicaciones. En este capítulo se presentarán brevemente las posibilidades gráficas más importantes de Visual basic 6.0

6.1 TRATAMIENTO DEL COLOR
Antes de ver cómo se dibuja en Visual Basic 6.0 se verá cómo se definen los colores. Al igual que en tantas aplicaciones informáticas, los colores de Visual Basic se definen por medio de las componentes fundamentales RGB (Red, Green and Blue). La intensidad de cada color fundamental se define con un byte, es decir con un número entero entre 0 y 255. Se utilizan pues tres bytes para definir los tres colores. Visual Basic 6.0 utiliza un entero long (32 bits, 4 bytes) para guardar un color, lo cual quiere decir que existe un byte adicional donde se podrá guardar alguna otra información

6.1.1 Representación hexadecimal de los colores
Para los números enteros entre 0 y 255 se utilizan dos dígitos hexadecimales. Con esta notación el cero es el
“00” y el 255 el “FF”. El número que indica el color va precedido por el carácter “&” y la letra “H”. Así, el color verde se define en la forma: &H00FF00. Con esta notación es posible prescindir de los ceros situados a la izquierda. Por ejemplo, el color rojo se puede escribir como &H0000FF y como &HFF.

Visual Basic 6.0 dispone también de nombres para los colores fundamentales y los que son combinación de los colores fundamentales, según puede verse en la Tabla 6.1.

6.1.2 Acceso a los colores del sistema
El cuarto byte (en el entero long que contiene el color) puede utilizarse para hacer referencia a los colores del sistema. Los colores del sistema son aquellos colores con los que Windows 95/98/NT representa las ventanas y sus bordes, las barras de desplazamiento, etc. Dichos colores se eligen en el panel de control Display/Appearance, y Visual Basic 6.0 permite acceder a ellos a través de su nombre o de su valor hexadecimal, que empieza por “&H8” y utiliza el cuarto byte. La Tabla 6.2 muestra algunos de estos valores. Para una descripción completa buscar Color Constants en el Help de Visual Basic 6.0.

6.1.3 Función RGB
Esta función devuelve un número que representa un color a partir de tres argumentos enteros entre 0 y 255, que son sus componentes RGB. Como ejemplo de uso:
form1.BackColor = RGB(127, 127, 64)
Si alguno de los argumentos tiene un valor mayor que 255, se toma como 255.

6.1.4 Paleta de colores

Elegir adecuadamente un color a partir de sus componentes
RGB no es una tarea fácil. Por eso Visual Basic 6.0 proporciona una paleta de 64 colores predefinidos, 16 de los cuales pueden ser definidos a medida por el usuario. La

Figura 6.1 muestra la paleta de colores, que aparece con

View/Color Palette.
La Figura 6.2 muestra el cuadro de diálogo que se abre al pulsar el botón Define Colors... en la parte inferior dcha. de la Figura 6.1. Para elegir un color se pueden introducir directamente los valores RGB, pero también se puede clicar en el mapa de colores de la parte superior izda. y luego mover el cursor de la parte superior dcha. Finalmente, clicando en el botón Add Color. El color seleccionado se añade en la parte inferior de la paleta de colores (Figura
6.1).

Por supuesto es necesario tener en cuenta el número de colores soportado por la tarjeta gráfica del PC en el que se esté trabajando. Lo más frecuente es que los PCs estén configurados para soportar 256 colores (8 bits por pixel),
65.536 colores (16 bits por pixel) o 16.777.216 colores (24 bits por pixel). Si la tarjeta gráfica soporta 65.536 colores se elige el color más cercano al que el usuario ha querido

Image and video hosting by TinyPic
Figura 6.1. Paleta de colores.

Image and video hosting by TinyPic

Figura 6.2. Creación de colores a medida.
Capítulo 6: Gráficos en Visual Basic 6.0 página 71 representar, con la función RGB por ejemplo. Si la tarjeta gráfica soporta sólo 256 colores se utiliza el dithering, que consiste en mezclar pixels de distintos colores con objeto de obtener un efecto lo más parecido posible al color solicitado.
Una vez añadidos los colores a la paleta, al clicar en el pequeño triángulo que aparece en cualquier propiedad de color en la ventana Properties aparecerán una ventana donde es posible elegir entre los colores de la paleta y los denominados colores del sistema (Figura
6.3).

Image and video hosting by TinyPic


6.2 FORMATOS GRÁFICOS
En un formulario de Visual Basic 6.0 -y en los controles Image y PictureBox- es posible insertar gráficos, tanto de tipo bitmap (los producidos por aplicaciones como Paint, Paintbrush, Paint Shop
Pro, etc.), como de tipo vectorial (los producidos por las herramientas gráficas de Word y
PowerPoint).
Visual Basic 6.0 admite varios formatos de ficheros gráficos: los ficheros *.bmp y *.ico para los gráficos de tipo bitmap, los ficheros *.wmf (Windows Meta File) y *.emf (Enhanced Meta File) para los gráficos de tipo vectorial y *.jpg (JPEG o Joint Photographic Experts Group) y *.gif
(Graphic Interchange Format). Los ficheros *.ico son ficheros bitmap de pequeño tamaño (32 por 32) destinados a contener iconos. Los ficheros JPEG y GIF son formatos gráficos comprimidos que soportan respectivamente color de 24 bit (~16 millones de colores) y 8 bit (256 colores). Ambos formatos son los utilizados en Internet para mostrar imágenes.
Si se desea insertar ficheros gráficos que estén en otros formatos, habrá que convertirlos previamente a uno de estos formatos usando el programa adecuado.

6.3 CONTROLES GRÁFICOS
Visual Basic 6.0 dispone de varios controles con los que insertar gráficos en un formulario.
Algunos tienen más posibilidades que otros y es necesario conocerlos bien. A continuación se verán los controles Line, Shape, Image y PictureBox.

6.3.1 Control Line
Es el control gráfico más elemental, ya que carece de propiedades como Text, Caption y Value.
Además no reconoce ningún evento, por lo que su misión es casi exclusivamente decorativa.
El control Line permite dibujar líneas en un formulario o en un control PictureBox. Las propiedades más importantes son las coordenadas de los puntos extremos (X1, Y1, X2 e Y2), la anchura en pixels (BorderWidth), el estilo de la línea (BorderStyle) -continua, a trazos, etc.- que sólo está activo cuando la anchura es 1 pixel, el color (BorderColor) y el nombre (Name). La línea puede estar visible o no (Visible), y existe la propiedad Index, que permite crear arrays de líneas.
Figura 6.3. Colores de sistema
ESIISS: Aprenda Visual Basic 6.0 como si estuviera en Primero página 72

6.3.2 Control Shape
Este control es en muchos aspectos similar al control Line: tampoco tiene las propiedades text, Caption y Value, ni reconoce eventos. Se diferencia en que admite formas geométricas más complejas, que vienen definidas por la propiedad Shape, que admite los valores siguientes: cuadrado (Square), rectángulo (Rectangle), círculo (Circle), elipse (Oval), cuadrado redondeado (Rounded Square) y rectángulo redondeado (Rounded Rectangle).
Además de las propiedades correspondientes al tamaño y posición, las propiedades más interesantes del control Shape son las siguientes: BackColor, BackStyle, BorderColor, BorderStyle, BorderWidth, FillColor, FillStyle, DrawMode. Un control Shape puede estar visible o no (Visible),
y existe la propiedad Index, que permite crear arrays de Shapes.


6.3.3 Ejemplo 6.1: Uso de los controles Line y Shape

La Figura 6.4 muestra un formulario en el que se han dibujado tres controles Line y dos controles Shape.

Las tres líneas se han dibujado con la propiedad
BorderWidth=1, pues si no la propiedad
BorderStyle no surte efecto. La propiedad
BorderStyle es 2-Dash para la segunda línea y 3-Dot para la tercera.
Después se han dibujado dos controles Shape llamados shpRect y shpRRec, cuyas propiedades Shape están respectivamente a 0-Rectangle y a 4-Rounded Rectangle. La propiedad BackColor está en amarillo para shpRect y en blanco para shpRRect.

En ambos casos BackStyle está en 1-Opaque, pues si no el color de fondo no surte efecto. La propiedad FillColor (que determina el color de las líneas de rayado) está en rojo para shpRect y en negro para shpRRect. Finalmente, la propiedad FillStyle que determina el tipo de rayado está en 5-Downward Diagonal para shpRect y en 6-Cross para shpRRect. Como la propiedad DrawMode está en 13-Copy Pen para ambos controles, shpRRect se superpone sobre shpRect porque ha sido creada sobre él con posterioridad.

Image and video hosting by TinyPic
6.3.4 Control Image
El control Image es un contenedor de gráficos bitmap, iconos, metafile, enhanced metafile, GIF y JPEG. Este control admite ya una amplia colección de eventos, por lo que es ya un control con un papel mucho más activo que los anteriores.

Las propiedades más propias e importantes de este control son las propiedades Picture y Stretch. La propiedad Picture sirve para relacionar este control con el fichero que contiene el gráfico que se desea representar, a través del cuadro de diálogo Load Picture que permite elegir el fichero a insertar. El fichero deberá ser de uno de los tipos admitidos. Según el fichero elegido, la propiedad Picture tendrá uno de los tres valores siguientes: icon (ficheros cur, ico), bitmap (bmp, gif, jpg) o metafile (wmf, emf).

La propiedad Stretch indica cómo se comporta el control Image al introducir en él el contenido del fichero gráfico. Por defecto, cuando se crea un control Image arrastrando en el formulario con el ratón esta propiedad tiene el valor False. Estando la propiedad Stretch en False el tamaño del control se ajusta al tamaño del bitmap o del metafile que se introduce en dicho control.

Por el contrario, si dicha propiedad está en True el gráfico que proviene del fichero se adapta al tamaño de control.

Se puede tratar de modificar el tamaño del gráfico en modo de diseño (con el ratón o cambiando las propiedades de tamaño del control). Si el gráfico es un bitmap y la propiedad Stretch está en False, el tamaño de la imagen no cambia aunque cambie el del control (quedando en la esquina superior izquierda si el control se hace más grande, o quedando parcialmente oculta si alguna de las dimensiones del control se hace más pequeña que la del bitmap. Si la propieda Stretch está en True, el bitmap se adapta al tamaño del control y su tamaño se cambia con el de éste. Los gráficos metafile siempre se pueden cambiar de tamaño en modo de diseño, tanto si
Stretch está en True como si está en False.

Existen otras formas de cargar un gráfico en un control Image, además de utilizar la propiedad Picture en modo de diseño, como se ha visto anteriormente. Una segunda forma, utilizable también en modo de diseño, es hacer Copy y Paste a partir de un gráfico contenido en otra aplicación como Paint Shop Pro o Excel.

En modo de ejecución se puede copiar el contenido de un control Image en otro control del mismo tipo por medio de una sentencia de asignación en la forma: imgCuadro.picture = imgCaja.picture y se puede también cargar una imagen de un fichero utilizando el procedimiento LoadPicture, por ejemplo en la forma siguiente (habrá que estar seguro de que existe el fichero):
imgCuadro.picture = LoadPicture("G:\graficos\pc.wmf")
Aunque el control Image admite algunos eventos (Click, DblClick, DragDrop, DragOver,

MouseUp, MouseDown, MouseMove), sus posibilidades son también limitadas. Por la forma en que se dibuja, el control Image no puede estar sobre otro control, como por ejemplo un botón (ver los
layers, más adelante en este capítulo). Tampoco puede contener otros controles en su interior: sólo puede contener gráficos. Finalmente, este control no puede obtener el focus y por tanto no puede responder a acciones desde el teclado. El control PictureBox, que se verá a continuación, resuelve estas limitaciones aunque presenta la desventaja de ser más lento en dibujar que el control Image.

6.3.5 Control PictureBox

Este es el control gráfico ( ) más potente y general de Visual Basic
6.0. Se trata de una especie de formulario reducido, pues puede contener imágenes y otros tipos de controles tales como botones, shapes, labels, cajas de texto, etc. Con respecto a los bitmaps, el control PictureBox se comporta de modo diferente que el control Image. El control PictureBox no tiene propiedad Stretch, con lo cual al cargar un icono o un bitmap siempre aparecen con su tamaño natural (tal y como se puede observar en la Figura 6.5). Sin embargo el control PictureBox tiene la propiedad AutoSize, que por defecto está en False. Cuando se carga un bitmap con AutoSize en False el gráfico aparece en la esquina superior izquierda del control; sin embargo, si AutoSize está en True el control PictureBox adapta su tamaño al del bitmap que es cargado.

Image and video hosting by TinyPic

La Figura 6.5 muestra los resultados de introducir
un icono en un control Image (Stretch: False y True) y en un control PictureBox (AutoSize: False y True).

Los gráficos metafile se comportan de un modo diferente, según puede verse en la Figura 6.6.
Image and video hosting by TinyPic

En el control Image se cargan con su verdadero tamaño si la propiedad Stretch es False, mientras que se adaptan al tamaño del control si dicha propiedad es True. Con el control PictureBox se adaptan al tamaño del control si AutoSize es False, mientras que se cargan con su propio tamaño si es AutoSize es True.
En el control PictureBox (al igual que en los formularios) son importantes las cuatro propiedades relacionadas con el color: BackColor, ForeColor, FillColor y FillStyle. La propiedad
BackColor controla el color de fondo del control. La propiedad ForeColor controla el color del texto que se escribe en el control (con el método Print, por ejemplo, como luego se verá). Las propiedades FillColor y FillStyle no afectan directamente al control sino a los elementos gráficos que se dibujen sobre él con métodos tales como Line y Circle, que se verán a continuación.
FillStyle determina el tipo de relleno o pattern (líneas horizontales, verticales, inclinadas, cruzadas,...), mientras que FillColor determina el color de estas líneas del relleno.

6.4 MÉTODOS GRÁFICOS
Sólo los formularios y los controles PictureBox pueden albergar otros tipos de controles. Además es posible escribir texto y dibujar directamente sobre ellos por medio de ciertos métodos3 de Visual
Basic. Por defecto estos métodos actúan sobre el formulario activo. Si se desea que actúen sobre un control PictureBox hay que precederlos por el nombre del control y el operador punto.

6.4.1 Método Print
En tiempo de ejecución se puede escribir texto en un formulario o en un control PictureBox por medio del método Print. La forma general de este método es la siguiente:

objeto.Print {spc(n)|tab(n)} expresion poschar donde spc(n) es opcional y sirve para insertar n caracteres en la salida; tab(n) es también opcional y sirve para posicionar la salida en una posición absoluta determinada por n con un tabulador. Si tab se utiliza sin argumentos lleva al comienzo de la siguiente región de salida4; expresion representa cualquier expresión cuyo resultado sea un número o una cadena de caracteres. poschar indica dónde se imprimirá el siguiente carácter. Si es un punto y coma (;) la impresión se hace a continuación del último carácter impreso; si es un tab(n) o un tab tiene el efecto antes descrito; si se omite, la impresión comienza en una nueva línea.
El color, la fuente y el tamaño del texto se toman de las correspondientes propiedades del formulario o control PictureBox.

6.4.2 Dibujo de puntos: método PSet
El método PSet sirve para dibujar puntos en un formulario o en un control PictureBox. Su forma general es la siguiente:
object.PSet Step (x, y), color donde:
object es opcional y representa el objeto (form o PictureBox) en el que se va a dibujar el punto. Si se omite, el punto se dibuja en el formulario activo (el que tiene el focus).
Step es opcional. Si se introduce las coordenadas que le siguen son relativas respecto a las propiedades CurrentX y CurrentY de la PictureBox. Al dibujar un punto, estas propiedades se actualizan a las coordenadas de dicho punto.
(x, y) son las coordenadas absolutas o relativas del punto a dibujar (expresiones, variables o constantes single). Tanto las coordenadas como la coma, como los paréntesis son obligatorios. Las unidades dependen de la propiedad ScaleMode del objeto en que se dibuja.
Color es opcional y es un nombre de color (vbRed, vbBlue, etc.) o un long conteniendo el código de color hexadecimal (puede ser el valor de retorno de la función RGB). Si se omite, se utiliza la propiedad ForeColor del objeto en el que se dibuja.
El tamaño del punto viene determinado por la propiedad DrawWidth del objeto en que se dibuja. Si el tamaño es mayor que uno, el punto se dibuja centrado en las coordenadas suministradas a PSet. Si se desea eliminar un punto previamente dibujado es necesario volver a pintar ese punto con el color de fondo del objeto (BackColor).

6.4.3 Dibujo de líneas y rectángulos: método Line
El método Line dibuja líneas y -en ciertas condiciones- cajas rectangulares de lados horizontales y verticales. Su forma general es la siguiente: object.Line Step (x1, y1) - Step (x2, y2), color, BF 4 En Visual Basic se comienza una región de salida cada 14 caracteres, si se utiliza un tipo de letra de anchura constante. Con otros tipos de letra esta medida es sólo aproximada.
ESIISS: Aprenda Visual Basic 6.0 como si estuviera en Primero página 76 donde object, step y color tienen el mismo significado que en PSet, y
(x1, y1) son opcionales y son las coordenadas del punto inicial de la línea. Si se omiten la línea comienza en las coordenadas definidas por CurrentX y CurrentY. (x2, y2) son obligados y contienen las coordenadas del punto final de la línea. B es un carácter opcional. Si se incluye se dibuja un rectángulo (Box) con los puntos dados como extremos de una de sus diagonales.
F es también un carácter opcional, que sólo se puede incluir si se ha incluido B. Si se incluye, la caja rectangular se rellena (Fill) con el mismo color del contorno. Si se omite la caja se rellena con las propiedades FillColor y FillStyle del objeto en el que se dibuja.
Después de ejecutarse este método las propiedades CurrentX y
CurrentY tienen el valor del punto final de la línea. Es necesario introducir el carácter (-), aunque se omita el primero de los puntos que definen la línea.
Las propiedades DrawWidth y
DrawStyle determinan cómo se dibujan las líneas rectas o curvas en
Visual Basic 6.0. Más en concreto, la propiedad DrawWidth determina el grosor en pixels, mientras que DrawStyle determina el tipo de línea. La Tabla 6.3 considera los posibles valores de la propiedad DrawStyle.
Los tipos de raya discontinua no permiten que el grosor sea mayor que 1 pixel. Si el grosor es superior, la línea se dibuja de modo continuo.

Ejemplo:
Line (0 ,0 )-(100 , 0) ' Línea del punto (0,0) al (100,0)
Line -(100 , 100) ' Línea del punto (100,0) al (100,100)
Line -Step (20 , 80) ' Línea del punto (100,100) al (120,180)
Line (100,100)-(200 , 200), vbRed, BF ' Rectángulo rojo del punto
' (100,100) al (200,200)
6.4.4 Dibujo de circunferencias, arcos y elipses: método Circle
El método Circle permite dibujar circunferencias, elipses y arcos. Su forma general es la siguiente:
object.Circle Step (x, y), radius, color, start, end, aspect donde object, step y color tienen el mismo significado que en PSet y Line, y:
(x, y) son obligatorias, y contienen las coordenadas del centro de la circunferencia.
Radius es obligatoria y define el radio de la circunferencia.
Start, end son opcionales, y permiten definir arcos por medio del ángulo inicial (start) y final
(end). Los ángulos se miden siempre en radianes y en sentido contrario a las agujas del reloj. Sus valores deben estar entre -2y 2. En principio se dibuja solamente el arco, pero si uno o ambos valores son negativos se tratan como positivos, pero se

Valor Nombre Estilo de línea
0 vbSolid continua (valor por defecto)
1 vbDash trazos (continua si w>1)
2 vbDot puntos (continua si w>1)
3 vbDashDot raya-pto (continua si w>1)
4 vbDashDotDot raya-pto-pto (continua si w>1)
5 vbInvisible transparente (continua si w>1)
6 vbInsideSolid continua interna
Tabla 6.3. Valores de DrawStyle.

Aspect es también opcional y se utiliza para dibujar elipses. Es la relación entre el diámetro vertical y el horizontal. El valor por defecto es 1.0, lo que corresponde a una circunferencia. Cuando aspect es distinto de 1.0, el parámetro radius define el mayor de los dos diámetros.
Sólo las figuras cerradas (no los arcos sin líneas que unan los extremos con el centro) pueden ser rellenadas con el color determinado por las propiedades FillColor y FillStyle del objeto en que se dibuja). El grosor y estilo de las líneas se determina con las propiedades DrawWidth y
DrawStyle. Después de ejecutarse este método, las propiedades CurrentX y CurrentY tienen el valor del centro de la circunferencia. Si se omite algún argumento (excepto los que van al final), deben respetarse las comas de separación entre argumentos.