canvas lazarus pascal
TRANSCRIPT
Canvas Presentado Por: Luis Felipe Navas Ivan Ceballos Luis Bohorquez
Tutor: Juan Kelsy Universidad De Córdoba 07/02/2012
Canvas
Un lienzo para nuestros dibujos
El Canvas, del tipo TCanvas, es una propiedad que tienen todos los controles que derivan de la
clase TGraphicControl, donde se define por primera vez. Esta palabra, que significa lienzo, nos
permite dibujar sobre ella líneas, rectángulos, textos, etc. Es imprescindible en la creación de
controles visuales, ya que es aquí donde se dibujan. En la mayoría de los controles podemos
usarlo sin problemas, pero hay otros que no se dejan. Lo s c o mp o n e n t e s ma s a p r o p i a d o s
para dibujar son el TImage, o, aún mejor, el TPaintBox.
Para que nuestros dibujos nos queden como queremos, hay tres propiedades esenciales: TFont,
TPen y TBrush. La primera es la conocida propiedad para el texto, en la que establecemos su
tamaño, tipo, color, etc. La propiedad Color es del tipo TColor y admite colores predefinidos (por
ejemplo : clBlue, clRed ) o un Valor en hexadecimal que represente el color. Este tendrá la forma
$00bbggrr. El símbolo del dólar ($) indica que se trata de un hexadecimal. Los dos siguientes ceros
están ahí en todos los colores, sin que cumplan ninguna función (aparte de hacer que el número
tenga ocho cifras en total). Después se sitúan los valores del azul (bb), verde (gg) y rojo (rr) que
compongan el color. Estos valores serán en hexadecimal, por supuesto, y tomarán un valor entre
cero (00) y 255 (FF).
La siguiente propiedad de la fuente ( TFont ) es Height, que indica el ancho de las letras. Esto
está relacionado con Size, el tamaño total.
La propiedad Name indica la fuente que se está usando, siendo la normal MS Sans Serif, pero
puede tomar el nombre de cualquiera que haya instalado en Windows. Para obtener las fuentes
disponibles, debe usar la propiedad Screen.Fonts, donde están listadas. Si las quiere incluir todas en
una lista hay un procedimiento bastante rápido:
var
ListFonts : TStrings;
begin
ListFonts := Screen.Fonts;
ListBox1.Items := ListFonts;
end;
La última propiedad de Font es Style, donde indica cómo se dibujará. Puede tomar una
combinación de: fsBold: Negrita, fsItalic: Cursiva, fsUnderline: Subrayada y fsStrikeOut: Tachada.
Para añadir o quitar algunos de ellos se hace de la siguiente forma:
Label1.font.Style:= label1.Canvas.font.Style - [fsBold]; Label1.Font.Style:=label1.Font.Style + [fsBold] // + ó – es para activar o desactivar el estilo de la fuente
El segundo e l e m e n t o i m p o r t a n t e es Pen, del tipo TPen. Esta propiedad indica cómo se ha
de dibujar los contornos de las figuras, o las líneas. Tiene cuatro propiedades: Color (TPen.Color),
el cual funciona igual que el color de las fuentes, grosor en píxeles (TPen.Widht), estilo de
dibujo (TPen.Style) y el modo en que se dibuja (TPen.Mode). De los dos primeros no hay nada que
decir. El estilo puede ser:
psSolid : Una línea sólida (por defecto).
psDash : Una línea intermitente.
psDot : Línea con puntos intercalados.
psDashDot : Línea que combina la intermitencia con los puntos.
psDashDotDot Parecida a la anterior, pero por cada hueco, hay dos puntos.
psClear : La línea no se dibuja. Esto puede servir para eliminar el borde en las figuras, pero no es
aconsejable para dibujar líneas.
El modo (Tpen.Mode) sirve para que se combine el color de la línea con el color del fondo de
diversas maneras. Aquí pondremos algunos modos:
pmBlack Se dibuja en negro.
pmWhite Se dibuja en blanco. pmNot Color inverso del fondo.
pmCopy Color especificado en la propiedad TPen.Color (por defecto).
pmNotCopy El color inverso de la propiedad TPen.Color.
pmMerge Combinación (AND) del color de fondo con el de TPen.
pmNotMerge Color inverso al de pmMerge.
La última propiedad del Canvas que afecta a los dibujos que hagamos es TBrush. Esta propiedad
define cómo se rellenan las figuras. No es aplicable a aquellas que son abiertas (tipo líneas, arcos
que no se cierran...) Sólo tiene tres propiedades: la forma en que se rellena: TBrush.Style, el color: TBrush.Color, y, si queremos que use una imagen: TBrush.Bitmap, del tipo TBitMap.
El estilo indica cómo debe pintarse el interior de las figuras. Excepto en las dos primeras, siempre
se dibuja con líneas finas del color que se indique en Color, dejando ver el fondo:
bsSolid : Rellena toda la figura con el color elegido (por defecto). bsClear : No rellena la figura.
bsCross : Dibuja una red de líneas horizontales y verticales que divide la figura en cuadritos.
bsDiagCross : Parecido a la anterior, pero con líneas diagonales.
bsBDiagonal : Línea diagonales inclinadas a la derecha.
bsFDiagonal : Diagonales a la izquierda.
bsHorizontal : Líneas horizontales.
bsVertical : Líneas verticales.
Por ejemplo, dibujaré un rectángulo de bordes azules, y rallado en color amarillo.
PaintBox1.Canvas.Pen.Color := clBlue;
PaintBox1.Canvas.Brush.Style := bsHorizontal;
PaintBox1.Canvas.Brush.Color := clYellow;
PaintBox1.Canvas.Rectangle (0,0,300,220);
La forma más simple de dibujar algo es haciéndolo de píxel en píxel (aunque no es la más fácil ni
la más cómoda). Esto se hace con la propiedad TCanvas.Pixels, que, en realidad, es una matriz de
dos dimensiones, por lo que hay que pasarle dos valores si queremos acceder a alguno de sus
elementos. En relación con la pantalla, el primer valor corresponde a la coordenada X, y el segundo,
a la Y. Esta matriz es del tipo TColor, por lo que solamente sirve para leer o establecer el color de
un punto. Por ejemplo:
PaintBox1.Canvas.Pixels [10,200] := clRed;
Líneas
Se utilizan las p rop iedades LineTo y MoveTo. La primera dibuja una línea hasta el punto que
se le diga, con el color y estilo indicado en TCanvas.Pen. Esta función sólo lo hace desde el último
punto que se le haya indicado hasta el nuevo, lo que facilita el dibujo de varias líneas unidas. Sin
embargo, si se quieren líneas separadas, o se va a iniciar una serie de líneas unidas, se debe usar la segunda función, que situará el inicio de la línea donde se indique. Por defecto, empieza a dibujar en
(0,0).
Ejemplo:
COMO DIBUJAR LINEAS
La clase TCanvas dispone de un puntero invisible donde dibujará las líneas si no se
especifica posición. Para modificar la posición de dicho puntero existe el método MoveTo:
Al igual que la estructura de datos TRect está definida en la unidad Types. Veamos como
realizar un triángulo de color negro y sin fondo:
procedure TForm1.Button3Click(Sender: TObject);
begin
with Image1.Canvas do
begin
Pen.Color := clBlack;
Pen.Width := 3;
MoveTo( 50, 150 );
LineTo( 100, 220 );
LineTo( 10, 220 );
LineTo( 50, 150 );
end;
end;
El triángulo quedaría
así:
Hemos situado el puntero en un punto y a partir de ahí hemos ido tranzando líneas hasta cerrar el triángulo. En este caso la propiedad Brush no tiene ningún valor para el procedimiento LineTo.
Antes he dicho que la función LineTo facilita el dibujo de múltiples líneas unidas. Sin embargo,
para esto es más apropiada otra función: PolyLine. Esta dibuja una línea compuesta por líneas
simples, lo que se llama línea quebrada. Como las líneas simples, está sujeta al TPen. Y puesto que
una imagen vale mil palabras, ahorraré mucho poniendo una (con su correspondiente código):
Consejo: No deje sin definir ningún punto de la matriz, pues aparecería una línea hacia abajo que
se sale del formulario y no parece tener fin.
Círculos
Todos los círculos y derivados son figuras cerradas, por lo que tienen un área que será pintada
según la propiedad TBrush.
Empezaremos dibujando un circlo simple, para dibujarlo, se utiliza el procedimiento Ellipse.
Necesita como parámetro una variable del tipo TRect.
COMO DIBUJAR UN CIRCULO
Para dibujar un círculo se utiliza el procedimiento Ellipse. Vamos a dibujar un círculo con
un borde de color azul oscuro y un fondo de color amarillo:
procedure TForm1.Button3Click(Sender: TObject);
begin
with Image1.Canvas do
begin
Pen.Color := clSilver;
Pen.Width := 3;
Brush.Color := clBlue;
Brush.Style := bsDiagCross;
Ellipse( 160, 10, 260, 110 );
end;
end;
Quedaría así:
A la propiedad Brush le hemos especificado que nos dibuje el fondo azul utilizando un
patrón de líneas cruzadas diagonales
En este otro ejemplo voy a dibujar una elipse con un borde de 1 pixel de color blanco y un
fondo gris:
procedure TForm1.Button3Click(Sender: TObject);
begin
with Image1.Canvas do
begin
Pen.Color := $FF0000; //Código del color azul en la paleta de colores
Pen.Width := 5;
Brush.Color := $00FF00;//Código del color verde en la paleta de colores
Brush.Style := bsSolid;
Ellipse( 100, 100, 400, 250 );
end;
end;
Este sería el resultado:
He tenido que volver a dejar la propiedad Style del Brush con el valor bsSolid para
que vuelva a dibujarme el fondo sólido porque sino me lo hubiera hecho con líneas
cruzadas como lo dejé anteriormente.
Otros dibujos
Para terminar los dibujos (aunque no el Canvas), hablaré de los rectángulos, e imágenes desde
archivos. Los rectángulos también son afectados por TBrush.
La función Rectangle permite dibujar, como el nombre indica, un rectángulo. Hay dos versiones
de esta función, en la primera necesita un parámetro de tipo TRect. En la segunda, sus valores
equivalentes.
El segundo y último procedimiento de rectángulos es RoundRect. Éste dibuja un rectángulo con
las esquinas redondeadas. Necesita seis parámetros: X1, Y1: esquina superior-izquierda. X2, Y2:
esquina inferior-derecha. X3: Ancho de la elipse que se dibujará en lugar de esquinas. Y3: Alto de
dicha elipse.
Hay una función que permite dibujar una imagen desde un archivo y es Draw. Los únicos
parámetros que necesita son dónde dibujar y cuál es la imagen.
var
G : TBitMap;
begin
G := TBitMap.Create;
G.LoadFromFile ('C:\Imagen.bmp'); Canvas.Draw (10,10,G);
G.Free;
end;
Aviso: No use el tipo TGraphic como parámetro. Le daría una excepción del tipo EAbtractError en
ejecución, cuando intente dibujarlo.
Textos
Cuando se escribe texto en un formulario la fuente, el color del texto y el color del fondo vienen predeterminados por las propiedades Brush yFont del Canvas. Supongamos que quiero escribir texto con fuente Tahoma, negrita, 10 y de color azul con fondo transparente:
procedure TForm1.Button1Click(Sender: TObject);
begin
with Canvas do
begin
Brush.Style := bsClear;
Font.Color := clRed;
Font.Name := 'Verdana';
Font.Size := 24;
TextOut( 120, 120, 'Primer texto de prueba' );
end;
end;
Aquí tenemos nuestro texto personalizado:
La función TextRect. Como indica el nombre, necesita una variable del tipo TRect, que define la
zona donde se dibujará el texto. Si el texto es demasiado grande, se recorta. Los dos siguientes
parámetros indican dónde se inicia el texto y por último, el propio texto, que no tiene porqué
empezar en el sitio que diga el TRect, pero si no se sitúa dentro, puede ocurrir lo de la imagen:
procedure TForm1.Button1Click(Sender: TObject);
Var
F : TRect;
begin
F.Top := 0;
F.Left := 0;
F.Right := 300;
F.Bottom := 200;
Image1.Canvas.Font.Size := 20;
Image1.Canvas.Font.Style := Canvas.Font.Style + [fsBold];
Image1.Canvas.TextRect(F,0,0, 'Prueba de Funcion TextRect');
end;
tendremos algo similar a la siguiente aplicación:
