3 de Enero de 1999

Un programa de Dibujo II.

En el capítulo anterior vimos como empezar a dibujar usando la herramienta Canvas que Delphi ponia a nuestra disposición. Si habeís consultado la ayuda de Delphi, habreís visto que esta herramienta tiene una gran cantidad de propiedades y métodos. Por ahora me voy a centrar en la propiedad Pen (lápiz). Esta es una propiedad que apesar que tiene gran cantidad de opciones, su uso es fácil e intuitivo. Con ella podemos indicar de que manera se pinta, con que color, etc

Si consultas la ayuda de Delphi verás que dice que Pen es una propiedad del tipo TPen. Esta contiene una serie de propiedades para configurar el lápiz (pen).

Propiedades del lápiz (TPen)

La propiedad Width indica el ancho en pixels de la línea que vallamos a pintar. Su valor debe ser un entero (integer) igual a uno o superior. La propiedad Color indica el color con el cual va ser pintado la línea. Como valores admite los colores predefinidos por Windows, que son esos que aparecen el la propiedad Color de los componentes. Esta es la tabla de colores y sus equivalencias.

Tabla de principales colores

Otra propiedad es Style, como ya comenté, que contiene el "estilo" con el que dibuja el lápiz, estas son sus valores.

Si aplicas los estilos al programa que tenemos es probable que no se aprecien, y eso es debido a la manera que dibujamos la línea, este problemilla lo solucionaré más adelante. Por ahora quedaros con los diversos tipos de línea que hay, ya que antes he de hablaros de la propiedad Mode. Esta propiedad indica como interactuan el lápiz con el el lienzo (Pen con Canvas), vamos a ver los posibles valores que puede tomar esta propiedad.

Una cosa que hay que tener en cuenta, es que windows trabaja con colores RGB (Red, Green, Blue; rojo, verde, azul), para generar toda la mezcla de colores, por eso cuando se habla de colores comunes se refiere a las tonalidades de los colores base (rgb) que coinciden en un coinciden. Por otra parte de todos los modos aqui mostrados el más interesante en pmXor, la mejor manera de saber lo que hace cada uno es probandolos.

De todos los modos de dibujo, el más socorrido y el que vamos a usar es el pmNotXor. Este modo tiene la particularidad que si dibujamos una línea, por ejemplo, y después vuelves a dibujar la línea de nuevo por encima de la que estaba, esta se borra, y queda como si no hubieras dibujada nada.Esto lo vamos a usar para crear el efecto que tienen los programas de dibujo, los cuales cuando dibujas un línea esta se se va dibujando a medida que mueves el ratón, y puedes ir cambiando el  destino, y cuando dejas de dibujar (sueltas el botón por ejemplo), la línea queda dibujada desde el origen hasta donde esta el cursor del ratón.

Así que tenemos que hacer algunas modificaciones al programa. Para conseguir esto debemos guardar en un variable el punto de donde partimos, osea donde el usuario ha pulsado el botón del ratón. Además tenemos que introducir otra variable más, la cual contendrá la posición anterior del ratón, osea, cada vez que se ejecute el evento MouseMove deberemos pintar la línea desde el origen hasta donde estaba el ratón antes de producirse ese evento usando el modo pmNotXor, con lo que logramos borrar la línea que habiamos pintado, despues pintamos una nueva línea desde el origen hasta el punto donde esta el ratón (ojo que he dicho está, y no estaba, este punto es indicado por las variables X e Y del evento). Una vez pintada la línea "nueva", guardamos el punto donde esta el ratón, así cuando se vuelva a ejecutar el evento tendremos guardado el punto donde estaba el ratón en el evento anterior, a esta variable la llamaré Punto.Las dos nuevas variables son del tipo TPoint, el cual es un tipo de variable definida por Delphi, la cual contiene las coordenadas de un punto. Fijate que las dos variables están definidas en la sección privada del formulario para que sean accesibles a todos los procedimientos del formulario.

unit uEjemplo2;

interface

uses
  Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,
  ExtCtrls;

type
  TForm1 = class(TForm)
    Image1: TImage;
    procedure FormCreate(Sender: TObject);
    procedure Image1MouseDown(Sender: TObject; Button: TMouseButton;
      Shift: TShiftState; X, Y: Integer);
    procedure Image1MouseMove(Sender: TObject; Shift: TShiftState; X,
      Y: Integer);
    procedure Image1MouseUp(Sender: TObject; Button: TMouseButton;
      Shift: TShiftState; X, Y: Integer);
  private
    { Private declarations }
    Pintando : Boolean;
    Origen,
    Punto : TPoint;
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.DFM}

procedure TForm1.FormCreate(Sender: TObject);
begin
 Pintando := False;
 Image1.Canvas.Refresh;
end;

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
 If Button = mbLeft Then
 Begin
   Pintando := True;
   Image1.Canvas.MoveTo (X,Y);
   Origen := Point (X,Y);
   Punto := Point (X,Y);
 end;
end;

procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
 If Pintando Then
  With Image1 Do
  Begin
    Canvas.Pen.Mode := pmNotXor;
    Canvas.MoveTo (Origen.X,Origen.Y);
    Canvas.LineTo (Punto.X,Punto.Y);
    Canvas.MoveTo (Origen.X,Origen.Y);
    Canvas.LineTo (X,Y);
  end;
  Punto := Point (X,Y);
  Image1.Canvas.Pen.Mode := pmCopy;
end;

procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
 If Button = mbLeft Then
  pintando := False;
end;

end.

Si te fijas en el evento MouseMove, despues del If, hay una línea que pone With Image1 Do, esta orden no tiene efecto sobre la ejecución del programa, pero si sobre su compilación. Lo que hace esta línea realmente, es ahorrar tiempo a la hora de escribir y ayudar a clarificar el código. Esta línea lo que indica es que todos los métodos o propiedades s que vienen después son aplicadas al componente Image1. Este cuadro te aclarará más las cosas.

Hasta ahora solo hemos dibujado lineas, pero se puede dibujar formas básicas (rectángulos, circulos, etc.). Las principales formas las veremos en el próximo capítulo, además usaremos una variable cuyo contenido lo definiremos nosotros. Los libros se suelen referir a ellas como tipos de datos definidos por el usuario.