Tema 3º: Programación
Informática
Generación de dibujos en Lazarus En muchos programas conviene introducir figuras, gráficos, dibujos. Los entornos de programación 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 gráfico para poder realizar dibujos. Para ello se necesitaba inicializar la tarjeta gráfica en un formato correcto de funcionamiento. Esto podía ocasionar que nuestros programas no fueran portables hacia otros ordenadores con tarjetas gráficas diferentes. Desde la aparición 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 ejecución 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 líneas, elipses, rectángulos, etc. en nuestro programa. No todos los componentes tienen accesible la posibilidad de manipular un lienzo, sólo los más complejos orientados a modo gráfico. 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 disposición un conjunto de primitivas o elementos de dibujo que incluyen, entre otras, la posibilidad de dibujar:
Arcos Cuerdas Rectángulos Elipses (círculos) Pixels Texto Poligonos Curvas de Beziers Líneas
Además los textos pueden modificar su fuente, tamaño, formato y las figuras admiten (algunas) efectos de tipo gradiente y degradados, así como modificación de colores.
1
Tema 3º: Programación
Informática
A continuación explicaremos algunas de estas posibilidades mediante ejemplos sencillos en los que se irán 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 posición determinada de la ficha. Para ello generaremos un nuevo proyecto y podremos cuatro ventanitas de tipo edit y un botón de aceptación. Las ventanas de edición deben contener la posición 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 círculo o elipse indicado en cada caso. Con el fin de aclarar el método que usa el compilador para el dibujo de círculos o elipses vamos a dibujar también una línea en las coordenadas proporcionadas como referencia del dibujo. El código correspondiente al evento onclick del botón 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 rectángulo 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.
2
Tema 3º: Programación
Informática
Los dos primeros números 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 rectángulo correspondiente. La referencia del rectángulo está dibujada por la línea que delimitaría los vértices de un rectángulo. El entorno gráfico genera una elipse inscrita en este rectángulo. Las coordenadas (0,0) hacen referencia a la esquina superior izquierda del elemento (en este caso la ficha, aunque podría ser también 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 revés que en unos ejes cartesianos) El significado de cada cantidad se puede ver en el siguiente diagrama:
20
450 150 300
Lazarus, en lugar de disponer de un método para dibujar círculos permite utilizar elipses en las cuales se especifican las coordenadas del rectángulo que las contiene. NOTA IMPORTANTE: Podemos modificar los valores de la elipse y realizar varios dibujos sin más que hacer clic en el botón. En este caso se sobrescriben los elementos especificados: Sin embargo esta representación no es estable. Bastará iconizar el programa y restaurar la ventana para que el dibujo se pierda. Hay una instrucción que vuelve a dibujar la ventana pero sólo los elementos que la constituyen (etiquetas, botones, etc.). La instrucción se llama invalidate y se suele escribir como respuesta a un evento de tipo modificación 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.)
3
Tema 3º: Programación
Informática
Para evitar este tipo de problemas (es decir, la pérdida del dibujo cuando se redimensiona la imagen) en Lazarus se emplea el evento OnPaint: cualquier modificación de dibujo de un componente con un canvas asociado genera que se ejecute el código 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 código 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 lápiz y el pincel El lápiz 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 línea de dibujo. Esta propiedad se puede modificar mediante la especificación del valor de la clase pen: lapicero. Esta clase se puede variar estableciendo las propiedades de Color, Width (ancho) y Style (estilo o representación). Por ejemplo si queremos que la línea sea fragmentada pondremos: form1.canvas.Pen.Style := psdot;
psdot significa pen style dotted: es decir, tipo de trazado del lápiz 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 línea contínua. Algunos valores posibles de pen.style son: Pssolid : línea contínua normal Psdash: guiones: -----Psdot: punteado ………… Psdashdot: combinado de las anteriores Psdashdotdot: raya y dos puntos
También 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 línea que se está dibujando. Podemos escribir, por ejemplo: form1.Canvas.Pen.Width:=2;
4
Tema 3º: Programación
Informática
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… Además están todos los colores definidos del entorno Windows: ClMenu Clmenubar ClMenutext…
Además se puede especificar un color a partir de sus componentes RGB: form1.canvas.pen.color:=$FFFF00;
En este caso es el color cián (estamos trabajando con colores de 24 bits por píxel en un sistema de coordenadas RGB). El pincel (o brocha)
Si además 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 gráfico (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 utilizarán 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 ejecución, como un componente más del lienzo. Para ello se debe emplear la instrucción: shape1.canvas.TextOut(10,100,' Inicio de linea ');
5
Tema 3º: Programación
Informática
En este ejemplo en lugar de escribir sobre una ficha (form) escribimos sobre una forma (shape). Los dos primeros números son las coordenadas X, Y en las que queremos que aparezca el texto. A continuación se escribe un string que es el que se va a dibujar como texto en nuestra figura. Se pueden modificar más propiedades del texto que se va a escribir: las que hacen referencia e la fuente, tamaño, 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 tamaño de la fuente, el color y el nombre de la fuente, que debe estar disponible e instalado (es decir, localizable). La última instrucción 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 diálogo: La ejecución de la intrucción: colordialog1.execute;
abre una ventana de diálogo de Windows (que previamente se debe haber añadido al formulario de nuestra aplicación). Una vez que se ha seleccionado un color y se ha confirmado la selección, la ventana de diálogo devuelve el valor del color seleccionado en el parámetro: colordialog1.Color
De forma que la instrucción: form1.canvas.pen.color:=colordialog1.Color;
fuerza al lápiz a tomar el color seleccionado en el cuadro de diálogo.
6
