Tema 3: Programacin

Informtica

Generacin de dibujos en Lazarus

En muchos programas conviene introducir figuras, grficos, dibujos. Los entornos de programacin disponen de herramientas que generan elementos de este tipo de manera sencilla. Los antiguos compiladores de Turbo Pascal precisaban cambiar de modo de funcionamiento de caracteres (la tradicional ventana de MSDOS) a modo grfico para poder realizar dibujos. Para ello se necesitaba inicializar la tarjeta grfica en un formato correcto de funcionamiento. Esto poda ocasionar que nuestros programas no fueran portables hacia otros ordenadores con tarjetas grficas diferentes. Desde la aparicin de Windows este problema ha desaparecido, lo que evita bastantes conflictos con el sistema operativo (el sistema operativo no suele permitir que los programas normales accedan a instrucciones que modifican configuraciones de dispositivos de entrada-salida). En la actualidad Lazarus permite dibujar elementos a partir de la ejecucin de un programa empleando la utilidad canvas. Canvas (se puede traducir como lienzo) es una utilidad de la que disponen varios elementos predefinidos, o componentes de Lazarus, que nos permiten dibujar lneas, elipses, rectngulos, etc. en nuestro programa. No todos los componentes tienen accesible la posibilidad de manipular un lienzo, slo los ms complejos orientados a modo grfico. Algunos componentes que tienen la propiedad canvas disponibles son: El formulario o ficha Los componentes de tipo shape El componente image Si un elemento admite la propiedad canvas entonces tenemos a nuestra disposicin un conjunto de primitivas o elementos de dibujo que incluyen, entre otras, la posibilidad de dibujar: Arcos Cuerdas Rectngulos Elipses (crculos) Pixels Texto Poligonos Curvas de Beziers Lneas Adems los textos pueden modificar su fuente, tamao, formato y las figuras admiten (algunas) efectos de tipo gradiente y degradados, as como modificacin de colores.

Tema 3: Programacin

Informtica

A continuacin explicaremos algunas de estas posibilidades mediante ejemplos sencillos en los que se irn introduciendo los elementos de dibujo disponibles. Ejemplo: Vamos a realizar un programa que nos permita dibujar una elipse de unas proporciones dada y en una posicin determinada de la ficha. Para ello generaremos un nuevo proyecto y podremos cuatro ventanitas de tipo edit y un botn de aceptacin. Las ventanas de edicin deben contener la posicin X e Y superiores e inferiores del dibujo de la elipse que vamos a construir. El siguiente paso consistir en particularizar los elementos para que aparezcan con su nombre correcto, utilizando la propiedad caption o text en cada caso. Finalmente dibujaremos el crculo o elipse indicado en cada caso. Con el fin de aclarar el mtodo que usa el compilador para el dibujo de crculos o elipses vamos a dibujar tambin una lnea en las coordenadas proporcionadas como referencia del dibujo. El cdigo correspondiente al evento onclick del botn del programa es: procedure TForm1.Button1Click(Sender: TObject); var sup_x, sup_y, inf_x, inf_y: integer; begin sup_x:=strtoint(edit1.text); sup_y:=strtoint(edit2.text); inf_x:=strtoint(edit3.text); inf_y:=strtoint(edit4.text); form1.Canvas.ellipse(sup_x, sup_y,inf_x,inf_y); form1.canvas.Line(sup_x,sup_y,inf_x,inf_y); end; Se debe tener en cuenta que el dibujo de la elipse toma como referencia de coordenadas un rectngulo y dibuja en su interior una elipse tangente a los lados. La referencia para el dibujo es, en este caso la propia ficha o formulario. El origen de coordenadas ser la esquina superior izquierda.

Tema 3: Programacin

Informtica

Los dos primeros nmeros proporcionan el punto de arranque de la recta (en este ejemplo la esquina inferior izquierda: 300, 150) y los dos ltimos el punto final (esquina superior derecha: 450, 20). A partir de estos dos puntos se dibuja la elipse que se inscribe en el rectngulo correspondiente. La referencia del rectngulo est dibujada por la lnea que delimitara los vrtices de un rectngulo. El entorno grfico genera una elipse inscrita en este rectngulo. Las coordenadas (0,0) hacen referencia a la esquina superior izquierda del elemento (en este caso la ficha, aunque podra ser tambin un canvas o un imagen). Las X crecen hacia la derecha y las Y crecen hacia abajo (es decir, las X igual y las Y al revs que en unos ejes cartesianos) El significado de cada cantidad se puede ver en el siguiente diagrama:

450 150 300

20

Lazarus, en lugar de disponer de un mtodo para dibujar crculos permite utilizar elipses en las cuales se especifican las coordenadas del rectngulo que las contiene. NOTA IMPORTANTE: Podemos modificar los valores de la elipse y realizar varios dibujos sin ms que hacer clic en el botn. En este caso se sobrescriben los elementos especificados: Sin embargo esta representacin no es estable. Bastar iconizar el programa y restaurar la ventana para que el dibujo se pierda. Hay una instruccin que vuelve a dibujar la ventana pero slo los elementos que la constituyen (etiquetas, botones, etc.). La instruccin se llama invalidate y se suele escribir como respuesta a un evento de tipo modificacin de las dimensiones de la ventana. El sentido de invalidate es que los elementos del lienzo se han modificado y deben borrarse para no interferir con el nuevo dibujo. Invalidate se puede aplicar a un elemento que tenga asociado un canvas (formulario, figura: form, shape, etc.)

Tema 3: Programacin

Informtica

Para evitar este tipo de problemas (es decir, la prdida del dibujo cuando se redimensiona la imagen) en Lazarus se emplea el evento OnPaint: cualquier modificacin de dibujo de un componente con un canvas asociado genera que se ejecute el cdigo asociado al evento OnPaint. La sentencia Invalidate es una forma conveniente de asegurar que se ejecuta el evento OnPaint, donde debe residir la parte de cdigo que se encarga de generar nuestro dibujo. Si obtenemos nuestro dibujo como resultado del evento OnPaint, entonces podremos modificar, iconizar, etc. nuestra ventana y el dibujo se mantendr.

Herramientas de dibujo: el lpiz y el pincel

El lpiz o pluma: pen La elipse que hemos dibujado tiene muchas de sus opciones establecidas en sus valores por defecto: por ejemplo el grosor de la lnea de dibujo. Esta propiedad se puede modificar mediante la especificacin del valor de la clase pen: lapicero. Esta clase se puede variar estableciendo las propiedades de Color, Width (ancho) y Style (estilo o representacin). Por ejemplo si queremos que la lnea sea fragmentada pondremos: form1.canvas.Pen.Style := psdot; psdot significa pen style dotted: es decir, tipo de trazado del lpiz punteado. Ahora cada vez que se realice un dibujo se consulta la propiedad pen.style y se dibujar el elemento con ese formato. Por defecto la propiedad ps es pssolid: es decir lnea contnua. Algunos valores posibles de pen.style son: Pssolid : lnea contnua normal Psdash: guiones: -----Psdot: punteado Psdashdot: combinado de las anteriores Psdashdotdot: raya y dos puntos Tambin se puede modificar el ancho de la raya de dibujo mediante la propiedad width, que toma un valor de tipo integer. Width representa el ancho de la lnea que se est dibujando. Podemos escribir, por ejemplo: form1.Canvas.Pen.Width:=2;

Tema 3: Programacin

Informtica

Otra propiedade que se puede modificar el la clase pen es el color: form1.Canvas.pen.Color:=clred; Como antes, cada vez que se dibuje un elemento a partir de este momento el color ser rojo. Algunos colores predefinidos del entorno son los siguientes; Rojo: clred Azul: clblue Gris : clgrey Verde: clgreen Adems estn todos los colores definidos del entorno Windows: ClMenu Clmenubar ClMenutext Adems se puede especificar un color a partir de sus componentes RGB: form1.canvas.pen.color:=$FFFF00; En este caso es el color cin (estamos trabajando con colores de 24 bits por pxel en un sistema de coordenadas RGB). El pincel (o brocha) Si adems de dibujar una figura queremos establecer el color de fondo de su interior o alguna trama delimitada por un contorno, debemos emplear el elemento brush (brocha), disponible como opciones de un canvas (lienzo). form1.canvas.Brush.Style:=bssolid; form1.canvas.brush.color:=clgreen; form1.Canvas.ellipse(sup_x, sup_y,inf_x,inf_y); Estas instrucciones fuerzan a que se dibuje el elemento grfico (en este caso una elipse) con un fondo (o interior) de color verde. La propiedad pen o brush quedar en el ltimo valor especificado hasta que se vuelva a modificar, de forma que si se vuelve a dibujar un elemento se utilizarn las ltimas asignaciones que se hayan hecho sobre pen y brush. El texto Es posible que nuestro programa precise escribir un texto el un lugar en tiempo de ejecucin, como un componente ms del lienzo. Para ello se debe emplear la instruccin: shape1.canvas.TextOut(10,100,' Inicio de linea ');

Tema 3: Programacin

Informtica

En este ejemplo en lugar de escribir sobre una ficha (form) escribimos sobre una forma (shape). Los dos primeros nmeros son las coordenadas X, Y en las que queremos que aparezca el texto. A continuacin se escribe un string que es el que se va a dibujar como texto en nuestra figura. Se pueden modificar ms propiedades del texto que se va a escribir: las que hacen referencia e la fuente, tamao, color, ejemplo: shape1.canvas.Font.Size:=20; shape1.Canvas.font.Color:=clblue; shape1.Canvas.font.Name:='Arial Narrow'; shape1.canvas.TextOut(10,100,' Inicio de linea '); Estas instrucciones establecen el tamao de la fuente, el color y el nombre de la fuente, que debe estar disponible e instalado (es decir, localizable). La ltima instruccin especifica el texto que se quiere ubicar y el lugar a partir del cual se escribir. En caso que deseemos establecer un color personalizado como color de un elemento de nuestro programa podemos obtener dicho color a partir de un cuadro de dilogo: La ejecucin de la intruccin: colordialog1.execute; abre una ventana de dilogo de Windows (que previamente se debe haber aadido al formulario de nuestra aplicacin). Una vez que se ha seleccionado un color y se ha confirmado la seleccin, la ventana de dilogo devuelve el valor del color seleccionado en el parmetro: colordialog1.Color De forma que la instruccin: form1.canvas.pen.color:=colordialog1.Color; fuerza al lpiz a tomar el color seleccionado en el cuadro de dilogo.