Capt.

13
El Canvas
El Canvas (lienzo) representa una superficie en un objeto donde se puede diseñar un
bitmap. El Canvas es siempre una propiedad de alguna cosa y nunca una clase u objeto
por si mismo.
Cuando se desea diseñar o pintar sobre un objeto, se debe diseñar o pintar sobre el
Canvas asociado a él.
Las operaciones de diseño envuelven la manipulación de pixeles individuales para
diseñar puntos o líneas. Por ejemplo, el color de un pixel puede ser alterado con la
siguiente instrucción:
Canvas.Pixels[10,10] := clRed;
Las operaciones de pintura envuelven la manipulación de grandes cantidades de
pixeles. Generalmente, la pintura incluye el diseño.

Propiedades Comunes del Objeto Canvas

Brush
Determina el color y patrón que el Canvas usa para rellenar formas graficas y fondos.
Configure las propiedades del objeto TBrush para especificar el color y patrón o el
bitmap a usar cuando rellene en los espacios sobre el Canvas.

Font
Especifica la fuente a usar cuando se escribirá texto sobre la imagen. Configure las
propiedades del objeto TFont para especificar el tipo, color, tamaño y estilo de la fuente.

Pen
Especifica el tipo de pincel que el Canvas usara para dibujar rectas y formas. Configure
las propiedades del objeto TPen para especificar el color, estilo, ancho y modo del pincel.

PenPos
Especifica la posición de dibujo actual del pincel.

Pixels
Especifica el color del área de pixeles dentro del actual ClipRect.

Métodos Comunes del Objeto Canvas

A continuación una lista de varios métodos que se pueden usar:

Arc
1
Dibuja un arco sobre la imagen a lo largo del perímetro de la elipse limitada por el
rectángulo especificado.

Chord
Dibuja una figura cerrada representada por la intersección de una recta y una elipse.

CopyRect
Copia parte de una imagen desde otro Canvas en el Canvas.

Draw
Copia el objeto grafico especificado por el parámetro Grafico en el Canvas en la
ubicación dada por las coordenadas (X,Y).

Ellipse
Dibuja la elipse definida por un rectángulo limite sobre el Canvas.

FillRect
Rellena el rectángulo especificado sobre el Canvas usando la brocha actual

FloodFill (solo VCL)

Rellena un área del Canvas usando la brocha actual.

FrameRect (solo VCL)

Dibuja un rectángulo usando la brocha del Canvas para dibujar el borde.

LineTo
Dibuja una recta sobre el Canvas desde el PenPos al punto especificado por X e Y, y
establece la posición del pincel a (X,Y).

MoveTo
Cambia la posición de dibujo actual al punto (X,Y).

Pie
Dibuja un pie formado por la sección de la elipse limitada por el rectángulo (X1,Y1) y
(X2,Y2) sobre el Canvas.

Polygon
Dibuja una serie de rectas sobre el Canvas conectando los puntos pasados y cerrando la
figura dibujando la recta desde el punto final al punto inicial.

Polyline
Dibuja una serie de rectas sobre El Canvas con el pincel actual, conectando cada uno
de los puntos pasados a él en Points.
2
Rectangle
Dibuja un rectángulo sobre el Canvas con su esquina superior izquierda en el punto
(X1,Y1) y su esquina inferior derecha en el punto (X2,Y2). Use Rectangle para dibujar
una caja usando pincel y rellénelo usando la brocha.

RoundRect
Dibuja un rectángulo con las esquinas redondeadas sobre el Canvas.

StretchDraw
Dibuja un grafico sobre el Canvas de modo que la imagen se ajusta en el rectángulo
especificado. La imagen grafica podría necesitar cambiar su magnitud o el aspecto del
radio para ajustarlo.

TextHeight, TextWidth
Retorna la altura y el ancho respectivamente, de una cadena en la fuente actual.

TextOut
Escribe una cadena sobre el Canvas, empezando en el punto (X,Y), y luego actualiza el
PenPos al final de la cadena.

TextRect
Escribe una cadena al interior de una región; cualquier porción de la cadena que cae
fuera de la región no aparece.

Sintaxis
A continuación listaremos la sintaxis para los métodos más comunes del Objeto Canvas.
Arc(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer);
Chord(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer);
Ellipse(X1, Y1, X2, Y2: Integer);
FillRect( const Rect: TRect);
LineTo(X,Y: Integer);
MoveTo(X,Y: Integer);
Pie(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer);
Polygon(Puntos);
PolyLine(Puntos);

3
Rectangle(X1, Y1, X2, Y2: Integer);
RoundRect(X1, Y1, X2, Y2, X3, Y3: Integer);
TextOut(X,Y: Integer; const Text: WideString);
TextRect(Rect; TRect; X,Y: Integer; const Text: String);

1) Lineas Diagonales Cruzadas

El siguiente método dibuja líneas diagonales cruzadas a lo largo del formulario:
Pasos:
1. En el Inspector de Objetos ubique el evento OnPaint en la pagina Events.
2. Haga doble clic dentro del cuadro de la lista desplegable de la derecha.
3. Inserte el siguiente código:
procedure TForm1.FormPaint(Sender: TObject);
begin
with Canvas do
begin
MoveTo(0, 0);
LineTo(ClientWidth, ClientHeight);
MoveTo(0, ClientHeight);
LineTo(ClientWidth, 0);
end;
end;
Programa ejecutándose:

2) Dibujando Poligonales

4
El siguiente método dibujara un rombo en una ficha:
Pasos
1. En el Inspector de Objetos ubique el evento OnPaint en la pagina Events.
2. Haga doble clic dentro del cuadro de la lista desplegable de la derecha.
3. Inserte el siguiente código:
procedure TForm1.FormPaint(Sender: TObject);
begin
with Canvas do
PolyLine([Point(50,50), Point(100, 50), Point(125, 100), Point(75, 100), Point(50, 50)]);
end;
Programa ejecutándose:

3) Estrella Blanca
Este ejemplo pinta una estrella blanca de cinco puntas en un controlador PaintBox.

Pasos
1. En el Diseñador de Formularios inserte un control PaintBox, luego para este
objeto ubique el evento OnPaint en la pagina Events.
2. Haga doble clic dentro del cuadro de la lista desplegable de la derecha.
3. Inserte el siguiente código:
procedure TForm1.PaintBox1Paint(Sender: TObject);
begin
with Sender as TPaintBox do
begin
Canvas.Pen.Color := clWhite;
Canvas.Polyline([Point(40, 10), Point(20, 60), Point(70, 30),
Point(10, 30), Point(60, 60), Point(40, 10)]);
end;
end;
5
Programa ejecutándose:

4) Arco
Las siguientes líneas de código dibujan el cuarto superior de una arco limitado por la
ventana actual:

Pasos
1. En el Inspector de Objetos ubique el evento OnPaint en la pagina Events.
2. Haga doble clic dentro del cuadro de la lista desplegable de la derecha.
3. Inserte el siguiente código:
procedure TForm1.FormPaint(Sender: TObject);
var
R: TRect;
begin
R := GetClientRect;
{Obtiene los limites de la ventana actual}
Canvas.Arc(R.Left, R.Top, R.Right, R.Bottom, R.Right, R.Top, R.Left, R.Top);
end;
Programa ejecutándose:

6
5) Elipse
El siguiente ejemplo pinta una elipse con relleno cuadriculado dentro el componente
Image1 sobre la ficha cuando el usuario hace clic en el botón.

Pasos
1. En el formulario inserte un control Image1 y un control Button1, luego para este
ultimo objeto ubique el evento OnClick en la pagina Events del Inspector de
Objetos.
2. Haga doble clic dentro del cuadro de la lista desplegable de la derecha.
3. Inserte el siguiente código:
procedure TForm1.Button1Click(Sender: TObject);
begin
with Image1 do
begin
Canvas.Brush.Color := clRed;
Canvas.Brush.Style := bsDiagCross;
Canvas.Ellipse(0, 0, Image1.Width, Image1.Height);
end;
end;

Programa ejecutándose:

6) Rectángulos Aleatorios Redondeados

Este ejemplo dibuja muchos rectángulos redondeados de varios tamaños y colores en
una ficha maximizada.
Pasos:
1. Presiones F12 para ingresar al Editor de Código, diríjase a la sección var y
declare las variables globales.

7
 var
X, Y, DX, DY: Integer;
2. Seleccione la ficha. En el Inspector de Objetos ubique el evento OnActivate en la
pagina Events.
3. Inserte el siguiente código:
procedure TForm1.FormActivate(Sender: TObject);
begin
WindowState := wsMaximized;
Timer1.Interval := 50;
Randomize;
end;

4. Inserte un control Timer. Este se encuentra en la sección System.

5. Diríjase al Inspector de Objetos y seleccione la pagina Events. Haga doble clic
dentro del cuadro de la lista desplegable a la derecha del evento OnTimer y digite
las siguientes instrucciones:
procedure TForm1.Timer1Timer(Sender: TObject);
begin
X := Random(Screen.Width - 10);
Y := Random(Screen.Height - 10);
Canvas.Pen.Color := Random(65535);
Canvas.Pen.Width := Random(7);
DX := Random(400);
DY := Random(400);
Canvas.RoundRect(X, Y, X + DX, Y + DY, DX div 2, DY div 2);
end;

Programa ejecutándose:

8
 7) Elipses, Círculos y Arcos

Este ejemplo nos permitirá visualizar Elipses, Círculos y Arcos dibujados

aleatoriamente.

Pasos
1. En el Inspector de Objetos inserte un control situado en la pagina System.
2. Seleccione el objeto Timer. En el Inspector de Objetos ubique el evento OnTimer,
en la pagina Events haga doble clic y complete las siguientes instrucciones:
procedure TForm1.RelojTimer(Sender: TObject);
Var
X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer;
begin
With Canvas Do
Begin
// Tomar aleatoriamente los colores
// y estilos del borde y el relleno
Pen.Color := RGB(Random(256), Random(256), Random(256));
Pen.Width := Random(10);
Brush.Color := RGB(Random(256), Random(256), Random(256));
Brush.Style := TBrushStyle(Random(8));

// Calcular aleatoriamente los puntos

X1 := Random(ClientWidth);
Y1 := Random(ClientHeight);
X2 := Random(ClientWidth);
Y2 := Random(ClientHeight);
X3 := Random(ClientWidth);
Y3 := Random(ClientHeight);
X4 := Random(ClientWidth);
Y4 := Random(ClientHeight);

Case Random(3) Of // Dibujar aleatoriamente una entidad u otra

0: Arc(X1, Y1, X2, Y2, X3, Y3, X4, Y4);
1: Chord(X1, Y1, X2, Y2, X3, Y3, X4, Y4);
2: Pie(X1, Y1, X2, Y2, X3, Y3, X4, Y4);
End;
End;

end;

El método Arc traza un arco de elipse cuyos parámetros son: 4 enteros con las
coordenadas del rectángulo imaginario que delimita la elipse, 2 enteros para determinar
el final de una línea que tendrá su origen en el centro de la elipse el que constituirá el

9
inicio del arco y 2 enteros mas para el cruce entre la recta y la elipse para determinar el
final del arco.

El método Chord dibuja el arco con sus extremos unidos por una línea recta, rellenando
el interior con la brocha actual.

El método Pie dibujara 2 líneas desde el centro de las elipses hasta sus extremos,
generando una superficie similar a la de un sector de un grafico.

Programa ejecutándose:

8) Parábola

Diseñe una aplicación que permita traslaciones a una parábola usando los controles
UpDown.

Pasos:
1. En el Inspector de Objetos inserte los siguientes controles: · Edit, 3 etiquetas, 3
Updpwn y 1 control Button.
2. Aspecto de la interfaz de usuario:

10
 Control Propiedad Valor
UpDown1 Associate Edit1
Increment 50
Min 0
Max 350
Plosition 200
UpDown2 Associate Edit2
Increment 50
Min 0
Max 350
Plosition 250
UpDown3 Associate Edit3
Increment 4
Min 1
Max 64
Plosition 36

Definiremos dos vectores x e y que almacenarán las coordenadas de los puntos de la

parábola a dibujar. En la declaración se consideraran índices negativos para la simetría
respecto al eje vertical. Luego, mediante el procedimiento LineTo iremos uniendo cada
punto perteneciente a la parábola. Haga doble clic sobre el botón y en el editor de
código complete las siguientes instrucciones para el evento OnClick.
procedure TForm1.Button1Click(Sender: TObject);
var i,h,k,p:integer;
x,y:array[-100..100]of integer;
begin
h:=strtoint(edit1.text);
11
k:=strtoint(edit2.text);
p:=strtoint(edit3.text);
for i:=-100 to 100 do
begin
x[i]:=h+i;
y[i]:=k-sqr(x[i]-h)div p;
end;
Canvas.FillRect(Rect(0,0,Width,Height));
Canvas.Pen.Color:=clBlack;
Canvas.MoveTo(200,Height);
Canvas.LineTo(200,0);
Canvas.MoveTo(0,250);
Canvas.LineTo(Width,250);
Form1.Canvas.Font.Size:=24;
Canvas.Font.Name:='Staccato222 BT';
Canvas.TextOut(300,50,'Parábola');
Canvas.Brush.Color:=clYellow;
for i:=-100 to 99 do
begin
Canvas.MoveTo(x[i],y[i]);
Canvas.Pen.Color:=clBlue;
Canvas.Font.Color:=clBlue;
Canvas.LineTo(x[i+1],y[i+1]);
end;
end;
Al hacer clic en el botón se muestra la parábola centrada en el origen de coordenadas:

Cambie las coordenadas de los parámetros h, k y p y nuevamente haga clic en el

botón Aplicar.

12
9) Visualizar Gráficos

Este ejemplo nos permitirá ver el contenido de cualquier archivo de mapa de bits.

Pasos:
1. En la Paleta de Componentes inserte 1 control Image situado en la pagina
Additional, 1 control PopupMenu situado en la pagina Standard, 1 control
OpenDialog situado en la pagina Dialogs.
2. El aspecto inicial de la ficha debe ser similar a la figura:

13
3. Seleccione el control Image y establezca la propiedad Align a Client para que
ocupe toda el área disponible de la ficha.
4. Haga doble clic en el objeto PopupMenu y en el editor ingrese las siguientes
opciones de menú:

5. De este modo, al pulsar el botón derecho sobre la ficha, se mostrara este menú
contextual.
6. Describamos cada una de las opciones.
Ajuste de la Imagen:
Ajusta el tamaño de la ventana a la imagen.

Ajuste a la Ventana:
Ajusta el tamaño en la ventana

Centrado
Centra la imagen en la ventana

Recuperar Archivo
Abre un archivo grafico.

7. Revisemos el código para la opción Ajuste a la Imagen. Se ajustara el espacio

disponible en la ventana a las dimensiones de la imagen.

procedure TForm1.Ajustealaimagen1Click(Sender: TObject);

begin
// Invertir el estado de la opción
Ajustealaimagen1.Checked := Not Ajustealaimagen1.Checked;

14
 // Si está activa
If Ajustealaimagen1.Checked Then
Begin
// Ajustar el tamaño de la ventana
// al de la imagen a mostrar
ClientWidth := Imagen.Picture.Width;
ClientHeight := Imagen.Picture.Height;
End;
end;

8. Revisemos el código para la opción Ajuste a la Ventana.

procedure TForm1.Ajustealaventana1Click(Sender: TObject);

begin
// Invertir el estado de la propiedad
Imagen.Stretch := Not Imagen.Stretch;
// Y mostrar el estado actual
Ajustealaventana1.Checked := Imagen.Stretch;
end;

9. Revisemos el código para la opción Centrado:

procedure TForm1.Centrado1Click(Sender: TObject);

begin
// Invertir el estado de la opción
Centrado1.Checked := Not Centrado1.Checked;
Imagen.Center := Centrado1.Checked;
end;

10. Revisemos el código para la opción Cargar Archivo:

procedure TForm1.Cargararchivo1Click(Sender: TObject);

begin
If CDAbrir.Execute Then // Si se ha elegido un archivo
Try
// Intentar cargarlo
Imagen.Picture.LoadFromFile(CDAbrir.FileName);
Caption := 'Visualizar Gráficos - (' + CDAbrir.FileName + ')';
Except On Exception Do // Si no es posible, indicarlo
ShowMessage('No es posible cargar el archivo');
End;
end;

Para permitir que el control TImage pueda recuperar las imágenes en formato JEPG
añada a la clausula Uses el modulo Jepg.

15
11. Revisemos el código para el evento OnResize:

procedure TForm1.FormResize(Sender: TObject);

begin
If Ajustealaimagen1.Checked Then // Si es necesario
Begin // no permitir el redimensionamiento de la ficha
ClientWidth := Imagen.Picture.Width;
ClientHeight := Imagen.Picture.Height;
End;
end;

12. Finalmente, para abandonar la aplicación.

procedure TForm1.Salir1Click(Sender: TObject);

begin
Close; // Cerrar la ventana
end;

13. Ejecute la aplicación y pulse el botón derecho sobre la superficie del formulario, en
el menú emergente elija el comando Recuperar Archivo. A continuación emerge el
Dialogo Cargar Archivo Grafico.

16
14. Seleccione un archivo y presione el botón Abrir.

Experimente con todas las opciones del menú, deformando la imagen a medida que
redimensiona la ventana o bien ajustando ésta al tamaño de la imagen.

Observe que cuando está activa la opción de ajustar el tamaño a la imagen no es posible
modificar el tamaño a la ventana.

Programa ejecutándose:

17