La clase TGraphicControl contiene una propiedad de tipo TCanvas, que utilizaremos para dibujar el aspecto del componente. Con un objeto de la clase TCanvas, podemos dibujar textos con cualquier fuente instalada en el sistema, o bien líneas, polígonos, arcos, rellenar superficies de color, copiar zonas de imagen, combinar imágenes, etc.
Una de las características más interesantes del GDI, y por lo tanto de la clase TCanvas, es que funciona independientemente del tipo de dispositivo sobre el que dibujan. Es decir: las funciones están diseñadas de tal forma que podemos dibujar con ellas en la pantalla, en la impresora, en un plotter, o en cualquier otro dispositivo gráfico, sin preocuparnos demasiado de las características de este dispositivo.
La clase TCanvas tiene tres atributos importantes:
- Font: se trata de un objeto de tipo TFont que representa la fuente que se utilizará cuando se dibuje un texto (a través de los métodos TextOut o TextRect). Antes de dibujar un texto debemos asegurarnos de que este objeto contienen los valores correctos.
- Pen: se trata del pincel (pen en inglés) que se utilizará para dibujar las líneas. El pincel es un objeto de tipo TPen, que permite configurar el color con que dibujará, el ancho, el estilo (raya continua, puntos...), etc. Antes de dibujar cualquier línea o polígono (con los métodos LineTo, Polygon, Rectangle, etc.) debemos configurar el tipo de pincel que queremos utilizar.
- Brush: se trata de la brocha (brush en inglés) que se utilizará para pintar zonas de relleno. Cuando estamos dibujando polígonos, podemos rellenar el interior con un color o tramado, utilizando para ellos las características que defina la brocha seleccionada. La brocha permite configurar el color de relleno, o el estilo de relleno (vacío, sólido, tramado, etc.). Antes de dibujar un polígono con relleno, debemos configurar apropiadamente los valores de la brocha.
Además de estos tres atributos, la clase TCanvas cuenta con varios métodos para dibujar distintas figuras, tal y como podemos ver en la siguiente tabla:
||
Método ||
Qué dibuja ||
|| Arc || Un arco a partir de las coordenadas de una elipse ||
|| Ellipse || Una elipse a partir de sus coordenadas ||
|| FillRect || Rellena un rectángulo ||
|| FloodFill || Rellena un area, delimitada por líneas de un color distinto. Hace el mismo efecto que la herramienta “Bote de pintura” de muchos programas gráficos ||
|| FrameRect || Un rectángulo con borde ||
|| LineTo || Una línea recta ||
|| Polygon || Un polígono cerrado a partir de un conjunto ordenado de puntos ||
|| PolyLine || Igual que el anterior, pero no rellena el interior con la brocha ||
|| Rectangle || Un rectángulo ||
|| RoundRect || Un rectángulo con los bordes redondeados ||
|| TextOut || Un texto ||
|| TextRect || Un texto restringido al tamaño de un rectángulo ||
El tablero
Como ya viene siendo habitual, vamos explicar con un ejemplo la creación de este tipo de componentes, y así veremos que es más sencillo de lo que parece. En esta ocasión, vamos a crear un componente gráfico, usando el Canvas para dibujar un tablero de ajedrez. Este componente nos puede servir como base para crear un ajedrez completo, o unas damas si no queremos complicarnos la vida.
Crear este componente, como cualquier componente gráfico, no es complejo, sino que la dificultad dependerá del algoritmo necesario para dibujarlo en pantalla. En nuestro caso, no es más que dibujar una serie de filas y columnas, alternando los colores de cada una de las casillas.
En el siguiente listado, podéis ver una primera aproximación del componente:
TTablero = class(TGraphicControl)
protected
procedure DibujarTablero(filas, columnas: integer; color1, color2: TColor);
procedure DibujarBorde(color: TColor);
function CanResize(var NewWidth, NewHeight: Integer): Boolean; override;
procedure Paint; override;
end;
En este listado vemos cuatro métodos básicos:
- DibujarTablero: contiene todo el algoritmo de dibujo para pintar un tablero a través del Canvas. Si nos fijamos en los parámetros, permiten configurar el número de filas y columnas, así como los colores para las casillas blancas y negras.
- DibujarBorde: dibuja un rectángulo que actuará de borde del tablero. Su único parámetro configura el color que se utilizará para dibujar este borde.
- CanResize: se trata de un método sobrescrito que sirve para permitir o bloquear el cambio de tamaño del componente. Cada vez que se intente cambiar el tamaño del componente, ya sea en diseño o a través de código, se llamará a este método, con el que podemos parar la operación de cambio de tamaño.
- Paint: se trata método principal, donde se iniciará toda la operación de dibujo. El código de este método es tan sencillo como llamar a DibujarTablero (para dibujar las casillas) y después llamar a DibujarBorde (para dibujar el recuadro exterior).
El código de cada uno de estos método podéis verlo en los ejemplos que acompañan al artículo
