Canvas

Presentado Por: Luis Felipe Navas Ivan Ceballos Luis Bohorquez

Tutor: Juan Kelsy

Universidad De Crdoba 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 lneas, rectngulos, textos, etc. Es imprescindible en la creacin de controles visuales, ya que es aqu donde se dibujan. En la mayora de los controles podemos usarlo sin problemas, pero hay otros que no se dejan. L o s c o m p o n e n t e s m a s a p r o p i a d o s para dibujar son el TImage, o, an mejor, el TPaintBox. Para que n uestros 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 tamao, 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 smbolo del dlar ($) indica que se trata de un hexadecimal. Los dos siguientes ceros estn ah en todos los colores, sin que cumplan ninguna funcin (aparte de hacer que el nmero tenga ocho cifras en total). Despus se sitan los valores del azul (bb), verde (gg) y rojo (rr) que compongan el color. Estos valores sern en hexadecimal, por supuesto, y tomarn 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 tamao 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 W indows. Para obtener las fuentes disponibles, debe usar la propiedad Screen.Fonts, donde estn listadas. Si las quiere incluir todas en una lista hay un procedimiento bastante rpido: var ListFonts : TStrings; begin ListFonts := Screen.Fonts; ListBox1.Items := ListFonts; end;

La ltima propiedad de Font es Style, donde indica cmo se dibujar. Puede tomar una combinacin de: fsBold: Negrita, fsItalic: Cursiva, fsUnderline: Subrayada y fsStrikeOut: Tachada. Para aadir 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 cmo se ha de dibujar los contornos de las figuras, o las lneas. Tiene cuatro propiedades: Color (TPen.Color), el cual funciona igual que el color de las fuentes, grosor en pxeles (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 lnea slida (por defecto). psDash : Una lnea intermitente. psDot : Lnea con puntos intercalados. psDashDot : Lnea que combina la intermitencia con los puntos. psDashDotDot Parecida a la anterior, pero por cada hueco, hay dos puntos. psClear : La lnea no se dibuja. Esto puede servir para eliminar el borde en las figuras, pero no es aconsejable para dibujar lneas.

El modo (Tpen.Mode) sirve para que se combine el color de la lnea con el color del fondo de diversas maneras. Aqu pondremos algunos modos: pmBlack pmWhite pmNot pmCopy pmNotCopy pmMerge pmNotMerge Se dibuja en negro. Se dibuja en blanco. Color inverso del fondo. Color especificado en la propiedad TPen.Color (por defecto). El color inverso de la propiedad TPen.Color. Combinacin (AND) del color de fondo con el de TPen. Color inverso al de pmMerge.

La ltima propiedad del Canvas que afecta a los dibujos que hagamos es TBrush. Esta propiedad define cmo se rellenan las figuras. No es aplicable a aquellas que son abiertas (tipo lneas, arcos que no se cierran...) Slo 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 cmo debe pintarse el interior de las figuras. Excepto en las dos primeras, siempre se dibuja con lneas 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 lneas horizontales y verticales que divide la figura en cuadritos. bsDiagCross : Parecido a la anterior, pero con lneas diagonales. bsBDiagonal : Lnea diagonales inclinadas a la derecha. bsFDiagonal : Diagonales a la izquierda. bsHorizontal : Lneas horizontales.

bsVertical : Lneas verticales. Por ejemplo, dibujar un rectngulo 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 ms simple de dibujar algo es hacindolo de pxel en pxel (aunque no es la ms fcil ni la ms cmoda). 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 relacin 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;

Lneas
Se utilizan l a s p r o p i e d a d e s LineTo y MoveTo. La primera dibuja una lnea hasta el punto que se le diga, con el color y estilo indicado en TCanvas.Pen. Esta funcin slo lo hace desde el ltimo punto que se le haya indicado hasta el nuevo, lo que facilita el dibujo de varias lneas unidas. Sin embargo, si se quieren lneas separadas, o se va a iniciar una serie de lneas unidas, se debe usar la segunda funcin, que situar el inicio de la lnea 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 lneas si no se especifica posicin. Para modificar la posicin de dicho puntero existe el mtodo MoveTo: Al igual que la estructura de datos TRect est definida en la unidad Types. Veamos como realizar un tringulo 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 tringulo quedara as:

Hemos situado el puntero en un punto y a partir de ah hemos ido tranzando lneas hasta cerrar el tringulo. En este caso la propiedad Brush no tiene ningn valor para el procedimiento LineTo.

Antes he dicho que la funcin LineTo facilita el dibujo de mltiples lneas unidas. Sin embargo, para esto es ms apropiada otra funcin: PolyLine. Esta dibuja una lnea compuesta por lneas simples, lo que se llama lnea quebrada. Como las lneas simples, est sujeta al TPen. Y puesto que una imagen vale mil palabras, ahorrar mucho poniendo una (con su correspondiente cdigo): Consejo: No deje sin definir ningn punto de la matriz, pues aparecera una lnea hacia abajo que se sale del formulario y no parece tener fin.

Crculos
Todos los crculos y derivados son figuras cerradas, por lo que tienen un rea que ser pintada segn la propiedad TBrush. Empezaremos dibujando un circlo simple, para dibujarlo, se utiliza el procedimiento Ellipse. Necesita como parmetro una variable del tipo TRect.

COMO DIBUJAR UN CIRCULO Para dibujar un crculo se utiliza el procedimiento Ellipse. Vamos a dibujar un crculo 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;

Quedara as:

A la propiedad Brush le hemos especificado que nos dibuje el fondo azul utilizando un patrn de lneas 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; //Cdigo del color azul en la paleta de colores Pen.Width := 5; Brush.Color := $00FF00;//Cdigo del color verde en la paleta de colores Brush.Style := bsSolid; Ellipse( 100, 100, 400, 250 ); end; end;

Este sera el resultado:

He tenido que volver a dejar la propiedad Style del Brush con el valor bsSolid para que vuelva a dibujarme el fondo slido porque sino me lo hubiera hecho con lneas cruzadas como lo dej anteriormente.

Otros dibujos
Para terminar los dibujos (aunque no el Canvas), hablar de los rectngulos, e imgenes desde archivos. Los rectngulos tambin son afectados por TBrush. La funcin Rectangle permite dibujar, como el nombre indica, un rectngulo. Hay dos versiones de esta funcin, en la primera necesita un parmetro de tipo TRect. En la segunda, sus valores equivalentes. El segundo y ltimo procedimiento de rectngulos es RoundRect. ste dibuja un rectngulo con las esquinas redondeadas. Necesita seis parmetros: 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 funcin que permite dibujar una imagen desde un archivo y es Draw. Los nicos parmetros que necesita son dnde dibujar y cul 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 parmetro. Le dara una excepcin del tipo EAbtractError en ejecucin, 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 funcin 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 parmetros indican dnde 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 sita 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 aplicacin: