Real Basic dispone de un control específico para el dibujado de nuestros propios controles gráficos: el Canvas. De hecho, muchos programadores de Real Basic emplean controles Canvas para ampliar las posibilidades gráficas a la hora de elaborar la interfaz de la aplicación o para añadir sus propios controles. Por ejemplo, se puede emplear una subclase Canvas para simular un botón, una caja de listado (ListBox) o simplemente para reproducir y manejar texto.

Cuando se incorpora un control Canvas en una ventana del proyecto, dispondrá de un gran rango de posibilidades. Éste recibe eventos relativos al desplazamiento del ratón a lo largo de su superficie, así como otros relacionados con el ratón. Por ejemplo, si se ha pulsado el botón del ratón o si se está arrastrando a lo largo y ancho de la superficie del Canvas.

Del mismo modo que una ventana de proyecto tiene sus propias medidas, siendo el valor de origen 0,0 la esquina superior izquierda, en la ventana de propiedades del control Canvas también se puede ajustar este aspecto. En este caso, el valor de origen 0,0 correspondiente al Canvas se refiere a la esquina superior izquierda de dicho control, no de la ventana en la cual está contenido.

Al definir el ancho y alto de un control Canvas, estará ajustando la superficie en la cuál podrá trabajar con el único método disponible a través del mismo: Scroll. También estará definiendo la superficie sobre la que podrá aplicar los métodos de la clase Graphics y Picture. Con la primera podrá dibujar formas geométricas simples, dibujar líneas, píxeles, borrar una zona delimitada por un rectángulo, situar en el Canvas un archivo gráfico en mapa de bits y también “dibujar” texto, pudiendo asignar parámetros como tipo, tamaño y estilo.

El control Canvas y sus propiedades

Una de las similitudes existentes entre el control Canvas y las ventanas es que en ambos casos se puede trabajar sobre dos planos: el fondo y el primer plano. La diferencia entre ambos estriba en que en el caso del control Canvas no podrá definir un color sólido como fondo, sólo podrá definir un gráfico. Del mismo modo que vimos en los primeros capítulos del cursillo, el dibujo que utilice como fondo del Canvas puede ser un archivo gráfico importado directamente en la ventana de proyecto (por ejemplo, PICT, JPEG o GIF) o bien incorporado mediante programación. Para incorporar un archivo gráfico a la ventana de proyecto, puede arrastrar el archivo desde el Escritorio hacia la ventana. Posteriormente, podrá seleccionar dicho archivo como imagen de fondo para el Canvas mediante la propiedad BackDrop en la ventana de propiedades o bien asignarlo mediante código. Por ejemplo:

Canvas1.backdrop = mifondo

Ajustará el fondo del control Canvas1 con el dibujo del archivo incorporado a la ventana de proyecto cuyo nombre sea “mifondo”.

La propiedad Graphics es la que nos proporciona acceso a todos los métodos gráficos para dibujar en el área definida para el Canvas. Por tanto, a través de ella obtendremos un amplio rango de posibilidades, tanto para dibujar sobre nuestro particular lienzo como para hacer otras operaciones igualmente interesantes. Por ejemplo, podrá copiar una zona determinada, borrarla con el color de fondo definido para la ventana en la que está contenido el control Canvas, aplicar un factor de escala a un dibujo, e incluso dibujar algunos iconos en las coordenadas especificadas (el icono de nota o el de advertencia).

Escriba las siguientes líneas en el gestor del evento Paint correspondiente al control Canvas:

Sub Paint(g as Graphics)

g.drawcautionIcon 10,10

Al ejecutar el programa verá el icono de advertencia dibujado en el interior del control Canvas, desplazado diez píxeles hacia abajo y hacia la derecha desde la posición de origen del Canvas.

Anteriormente comentábamos que el control Canvas sólo proporciona un método: Scroll. Este tiene como misión desplazar el contenido del Canvas la cantidad de píxeles indicados por el usuario, ya sea sobre uno o los dos ejes (X,Y).

Scroll

Los parámetros que se deben pasar a dicho método son los que se muestran en la tabla “Propiedades del método Scroll”.

Los valores positivos para DeltaX y DeltaY desplazarán el dibujo hacia la derecha y hacia abajo respectivamente. Los valores negativos lo harán hacia la izquierda y hacia arriba. Si no se proporcionan los valores correspondientes a X, Y, Ancho y Alto, se desplazará el total del dibujo contenido en el control Canvas.

Realicemos un sencillo ejemplo. Para ello incluiremos en la ventana dos botones y un control de Canvas.

1. Importe un archivo gráfico en la ventana de proyecto. Cree dos propiedades:

ancho as integer

alto as integer

2. Introduzca el siguiente código en el gestor del evento Paint del control Canvas:

g.drawpicture dibujo,ancho,alto

3. Deberá sustituir “dibujo” por el nombre del archivo gráfico que haya importado. Recuerde que debe ser un archivo gráfico en mapa de bits.

4. Incluya el siguiente código en el primer botón:

ancho=ancho+1

canvas1.scroll 1,0

Y las siguientes líneas en el segundo:

ancho=ancho-1

canvas1.scroll -1,0

5. Ejecute el programa y pulse los botones para desplazar (scroll) la imagen contenida en el Canvas hacia la derecha y hacia la izquierda respectivamente. Como puede comprobar, si la imagen desaparece por la derecha, y se vuelve a desplazar hacia la izquierda, comprobará que se redibuja nuevamente en su totalidad.

Gestores de eventos

¿Cuál es el proceso que sigue este programa? Como puede ver en el editor de código, el control Canvas incorpora diez gestores de eventos. De ellos, puede decirse que el más importante es el gestor Paint.

Cuando defina una imagen de fondo para el Canvas a través de la ventana de propiedades, REALbasic se encarga de realizar el redibujado automáticamente; del mismo modo que lo hace con la imagen de fondo definida para una ventana. De este modo, cuando el Canvas ha sido solapado momentáneamente por otra ventana de la aplicación o del Finder, REAlbasic se encargará de enviar automáticamente un evento Paint y este se gestiona, como puede adivinar, mediante el gestor Paint del control Canvas. Al recibir un evento de este tipo, el control Canvas ejecutará las instrucciones incluidas en el gestor Paint. También lo hará si recibe un evento Refresh o RefreshRect. Por ejemplo:

Canvas1.refresh

Provocará que se ejecuten las instrucciones incluidas en el gestor Paint.

Clases Picture y Graphics

Las propiedades BackDrop y Graphics del control Canvas implican el acceso a dos clases: Picture y Graphics. Por tanto, en el control Canvas podremos utilizar los métodos correspondientes a ambas.

Un objeto de clase Picture incluye un dibujo en mapa de bits. Puede crear un objeto Picture de las siguientes formas:

- Importando un archivo en la ventana de proyecto.

- Mediante el método OpenAsPicture de un objeto FolderItem.

- Mediante la función NewPicture.

De las propiedades proporcionadas por la clase Picture, las más significativas son las siguientes:

Height y Width (enteros). Nos indican la altura y ancho de la imagen en píxeles. Consultando estas propiedades podremos adecuar el tamaño del Canvas al de la imagen que hayamos importado.

Transparent (booleano). Cuando está ajustado como True, habremos definido la propiedad de transparencia para dicha imagen. REALbasic interpreta como transpare