Canvas

Presentado Por: Luis Felipe Navas Ivan CeballosLuis Bohorquez

Tutor: Juan Kelsy

Universidad De Córdoba07/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. 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, 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:

varListFonts : TStrings;

beginListFonts := 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 l as 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);beginwith Image1.Canvas dobegin 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);beginwith Image1.Canvas dobegin 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.

varG : TBitMap;

beginG := 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: