Difference between revisions of "BGRABitmap tutorial 3/es"

From Lazarus wiki
Jump to navigationJump to search
m (Text replace - "delphi>" to "syntaxhighlight>")
Line 13: Line 13:
 
Añade una variable privada a la forma principal para almacenar la imágen :
 
Añade una variable privada a la forma principal para almacenar la imágen :
  
<delphi>  TForm1 = class(TForm)
+
<syntaxhighlight>  TForm1 = class(TForm)
 
   private
 
   private
 
     { private declarations }
 
     { private declarations }
Line 19: Line 19:
 
   public
 
   public
 
     { public declarations }
 
     { public declarations }
   end; </delphi>
+
   end; </syntaxhighlight>
  
 
Crea la imágen cuando la forma es creada. Para hacer esto, haz doble clic en la forma, un procedimiento debe aparecer en el editor de código. Añade la instrucción de creación :
 
Crea la imágen cuando la forma es creada. Para hacer esto, haz doble clic en la forma, un procedimiento debe aparecer en el editor de código. Añade la instrucción de creación :
  
<delphi>procedure TForm1.FormCreate(Sender: TObject);
+
<syntaxhighlight>procedure TForm1.FormCreate(Sender: TObject);
 
begin
 
begin
 
   image := TBGRABitmap.Create(640,480,BGRAWhite);  //crea una imágen de 640x480
 
   image := TBGRABitmap.Create(640,480,BGRAWhite);  //crea una imágen de 640x480
end; </delphi>
+
end; </syntaxhighlight>
  
 
=== Dibuja el bitmap ===
 
=== Dibuja el bitmap ===
  
 
Añade un manejador OnPaint. Para hacer esto, selecciona la forma principal, luego ve al inspector de objetos, en la pestaña de eventos haz doble clic en la línea OnPaint. Luego agrega el código de dibujo :
 
Añade un manejador OnPaint. Para hacer esto, selecciona la forma principal, luego ve al inspector de objetos, en la pestaña de eventos haz doble clic en la línea OnPaint. Luego agrega el código de dibujo :
<delphi>procedure TForm1.FormPaint(Sender: TObject);
+
<syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject);
 
begin
 
begin
 
   PaintImage;
 
   PaintImage;
end; </delphi>  
+
end; </syntaxhighlight>  
  
 
Añade el procedimiento PaintImage :
 
Añade el procedimiento PaintImage :
<delphi>procedure TForm1.PaintImage;
+
<syntaxhighlight>procedure TForm1.PaintImage;
 
begin
 
begin
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
end;
 
end;
</delphi>
+
</syntaxhighlight>
  
 
Luego de escribir esto, pon el cursor en PaintImage y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
 
Luego de escribir esto, pon el cursor en PaintImage y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
Line 48: Line 48:
  
 
Con el inspector de objetos, agrega manejadores para los eventos MouseDown y MouseMove :
 
Con el inspector de objetos, agrega manejadores para los eventos MouseDown y MouseMove :
<delphi>procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
+
<syntaxhighlight>procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
 
   Shift: TShiftState; X, Y: Integer);
 
   Shift: TShiftState; X, Y: Integer);
 
begin
 
begin
Line 58: Line 58:
 
begin
 
begin
 
   if ssLeft in Shift then DrawBrush(X,Y);
 
   if ssLeft in Shift then DrawBrush(X,Y);
end;</delphi>
+
end;</syntaxhighlight>
  
 
Agrega el procedimiento DrawBrush :
 
Agrega el procedimiento DrawBrush :
<delphi>procedure TForm1.DrawBrush(X, Y: Integer);
+
<syntaxhighlight>procedure TForm1.DrawBrush(X, Y: Integer);
 
const radius = 5;
 
const radius = 5;
 
begin
 
begin
Line 69: Line 69:
  
 
   PaintImage;
 
   PaintImage;
end;</delphi>
+
end;</syntaxhighlight>
  
 
Luego de escribir esto, pon el cursor en DrawBrush y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
 
Luego de escribir esto, pon el cursor en DrawBrush y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
Line 80: Line 80:
 
=== Código ===
 
=== Código ===
  
<delphi>unit UMain;
+
<syntaxhighlight>unit UMain;
  
 
{$mode objfpc}{$H+}
 
{$mode objfpc}{$H+}
Line 155: Line 155:
 
   {$I UMain.lrs}
 
   {$I UMain.lrs}
  
end.</delphi>
+
end.</syntaxhighlight>
  
 
=== Ejecuta el programa ===
 
=== Ejecuta el programa ===
Line 166: Line 166:
  
 
Para tener un dibujo contínuo, necesitamos agregar variables adicionales :
 
Para tener un dibujo contínuo, necesitamos agregar variables adicionales :
<delphi>  TForm1 = class(TForm)
+
<syntaxhighlight>  TForm1 = class(TForm)
 
     ...
 
     ...
 
   private
 
   private
Line 172: Line 172:
 
     image: TBGRABitmap;
 
     image: TBGRABitmap;
 
     mouseDrawing: boolean;
 
     mouseDrawing: boolean;
     mouseOrigin: TPoint;    </delphi>
+
     mouseOrigin: TPoint;    </syntaxhighlight>
  
 
mouseDrawing va a ser 'True' durante el dibujado (con el botón izquierdo presionado) y mouseOrigin el punto inicial del segmento que está siendo dibujado.
 
mouseDrawing va a ser 'True' durante el dibujado (con el botón izquierdo presionado) y mouseOrigin el punto inicial del segmento que está siendo dibujado.
  
 
El manejador de clic lo convierte en algo un poco mas complicado :
 
El manejador de clic lo convierte en algo un poco mas complicado :
<delphi>procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
+
<syntaxhighlight>procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
 
   Shift: TShiftState; X, Y: Integer);
 
   Shift: TShiftState; X, Y: Integer);
 
begin
 
begin
Line 186: Line 186:
 
     DrawBrush(X,Y,True);
 
     DrawBrush(X,Y,True);
 
   end;
 
   end;
end; </delphi>
+
end; </syntaxhighlight>
 
Esto inicializa el dibujado con la posición actual. Luego, esto dibuja un segmento cerrado (fíjate en el nuevo parámetro para DrawBrush). De todas formas, en el principio, el segmento está cerrado y tiene una longitud cero, que nos da un disco :
 
Esto inicializa el dibujado con la posición actual. Luego, esto dibuja un segmento cerrado (fíjate en el nuevo parámetro para DrawBrush). De todas formas, en el principio, el segmento está cerrado y tiene una longitud cero, que nos da un disco :
  
Line 196: Line 196:
  
 
Es por esto que necesitamos un nuevo parámetro para la función DrawBrush, que se convierte en :
 
Es por esto que necesitamos un nuevo parámetro para la función DrawBrush, que se convierte en :
<delphi>procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
+
<syntaxhighlight>procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
 
const brushRadius = 20;
 
const brushRadius = 20;
 
begin
 
begin
Line 203: Line 203:
  
 
   PaintImage;
 
   PaintImage;
end; </delphi>
+
end; </syntaxhighlight>
  
 
Transmitimos el parámetro Closed a DrawLineAntialias, para indicar cuando el segmento está cerrado o no. Mira el orden de las coordenadas. La posición inicial y la posición final están intercambiadas. De todas formas, para DrawLineAntialias, es la parte final que esta abierta, en este caso, necesitamos que la parte inicial esté abierta.
 
Transmitimos el parámetro Closed a DrawLineAntialias, para indicar cuando el segmento está cerrado o no. Mira el orden de las coordenadas. La posición inicial y la posición final están intercambiadas. De todas formas, para DrawLineAntialias, es la parte final que esta abierta, en este caso, necesitamos que la parte inicial esté abierta.
Line 210: Line 210:
  
 
El manejador MouseMove se convierte en :
 
El manejador MouseMove se convierte en :
<delphi>procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
+
<syntaxhighlight>procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
 
   Y: Integer);
 
   Y: Integer);
 
begin
 
begin
 
   if mouseDrawing then DrawBrush(X,Y,False);
 
   if mouseDrawing then DrawBrush(X,Y,False);
end; </delphi>
+
end; </syntaxhighlight>
  
 
Finalmente, necesitamos agregar un manejador MouseUp para actualizar mouseDrawing :
 
Finalmente, necesitamos agregar un manejador MouseUp para actualizar mouseDrawing :
<delphi>procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
+
<syntaxhighlight>procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
 
   Shift: TShiftState; X, Y: Integer);
 
   Shift: TShiftState; X, Y: Integer);
 
begin
 
begin
 
   if Button = mbLeft then
 
   if Button = mbLeft then
 
     mouseDrawing := False;
 
     mouseDrawing := False;
end;  </delphi>
+
end;  </syntaxhighlight>
  
 
=== Código ===
 
=== Código ===
  
<delphi>unit UMain;
+
<syntaxhighlight>unit UMain;
  
 
{$mode objfpc}{$H+}
 
{$mode objfpc}{$H+}
Line 316: Line 316:
 
   {$I UMain.lrs}
 
   {$I UMain.lrs}
  
end.</delphi>
+
end.</syntaxhighlight>
  
 
=== Ejecuta el programa ===
 
=== Ejecuta el programa ===

Revision as of 13:54, 24 March 2012

Deutsch (de) English (en) español (es) français (fr)


Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Edit

Esta tutoría muestra como dibujar en un bitmap con el mouse.

Crear un nuevo proyecto

Crea un nuevo proyecto y añade referencia a BGRABitmap, de la misma forma que en la primer tutoría.

Crea una nueva imágen

Añade una variable privada a la forma principal para almacenar la imágen :

  TForm1 = class(TForm)
  private
    { private declarations }
    image: TBGRABitmap;
  public
    { public declarations }
  end;

Crea la imágen cuando la forma es creada. Para hacer esto, haz doble clic en la forma, un procedimiento debe aparecer en el editor de código. Añade la instrucción de creación :

procedure TForm1.FormCreate(Sender: TObject);
begin
  image := TBGRABitmap.Create(640,480,BGRAWhite);  //crea una imágen de 640x480
end;

Dibuja el bitmap

Añade un manejador OnPaint. Para hacer esto, selecciona la forma principal, luego ve al inspector de objetos, en la pestaña de eventos haz doble clic en la línea OnPaint. Luego agrega el código de dibujo :

procedure TForm1.FormPaint(Sender: TObject);
begin
  PaintImage;
end;

Añade el procedimiento PaintImage :

procedure TForm1.PaintImage;
begin
  image.Draw(Canvas,0,0,True);
end;

Luego de escribir esto, pon el cursor en PaintImage y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.

Manejar el mouse

Con el inspector de objetos, agrega manejadores para los eventos MouseDown y MouseMove :

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then DrawBrush(X,Y);
end;

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if ssLeft in Shift then DrawBrush(X,Y);
end;

Agrega el procedimiento DrawBrush :

procedure TForm1.DrawBrush(X, Y: Integer);
const radius = 5;
begin
  image.GradientFill(X-radius,Y-radius, X+radius,Y+radius,
    BGRABlack,BGRAPixelTransparent, gtRadial,
    PointF(X,Y), PointF(X+radius,Y), dmDrawWithTransparency);

  PaintImage;
end;

Luego de escribir esto, pon el cursor en DrawBrush y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.

Este procedimiento dibuja un gradiente radial (gtRadial) :

  • el borde rectangular es (X-radius,Y-radius, X+radius,Y+radius).
  • el centro es negro, el borde es transparente
  • el centro está en (X,Y) y el borde está en (X+radius,Y)

Código

unit UMain;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
  BGRABitmap, BGRABitmapTypes;

type
  { TForm1 }

  TForm1 = class(TForm)
    procedure FormCreate(Sender: TObject);
    procedure FormMouseDown(Sender: TObject; Button: TMouseButton;
      Shift: TShiftState; X, Y: Integer);
    procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
    procedure FormPaint(Sender: TObject);
  private
    { private declarations }
    image: TBGRABitmap;
    procedure DrawBrush(X, Y: Integer);
    procedure PaintImage;
  public
    { public declarations }
  end; 

var
  Form1: TForm1; 

implementation

{ TForm1 }

procedure TForm1.FormCreate(Sender: TObject);
begin
  image := TBGRABitmap.Create(640,480,BGRAWhite);
end;

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then DrawBrush(X,Y);
end;

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if ssLeft in Shift then DrawBrush(X,Y);
end;

procedure TForm1.FormPaint(Sender: TObject);
begin
  PaintImage;
end;

procedure TForm1.DrawBrush(X, Y: Integer);
const radius = 20;
begin
  image.GradientFill(X-radius,Y-radius, X+radius,Y+radius,
    BGRABlack,BGRAPixelTransparent,gtRadial,
    PointF(X,Y), PointF(X+radius,Y), dmDrawWithTransparency);

  PaintImage;
end;

procedure TForm1.PaintImage;
begin
  image.Draw(Canvas,0,0,True);
end;

initialization
  {$I UMain.lrs}

end.

Ejecuta el programa

Deberías poder dibujar en la forma.

BGRATutorial3.png

Dibujo contínuo

Para tener un dibujo contínuo, necesitamos agregar variables adicionales :

  TForm1 = class(TForm)
    ...
  private
    { private declarations }
    image: TBGRABitmap;
    mouseDrawing: boolean;
    mouseOrigin: TPoint;

mouseDrawing va a ser 'True' durante el dibujado (con el botón izquierdo presionado) y mouseOrigin el punto inicial del segmento que está siendo dibujado.

El manejador de clic lo convierte en algo un poco mas complicado :

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then
  begin
    mouseDrawing := True;
    mouseOrigin := Point(X,Y);
    DrawBrush(X,Y,True);
  end;
end;

Esto inicializa el dibujado con la posición actual. Luego, esto dibuja un segmento cerrado (fíjate en el nuevo parámetro para DrawBrush). De todas formas, en el principio, el segmento está cerrado y tiene una longitud cero, que nos da un disco :

BGRATutorial3b.png

De a poco, agregaremos una nueva parte, que es un segmento abierto :

BGRATutorial3c.png

Es por esto que necesitamos un nuevo parámetro para la función DrawBrush, que se convierte en :

procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
const brushRadius = 20;
begin
  image.DrawLineAntialias(X,Y,mouseOrigin.X,mouseOrigin.Y,BGRA(0,0,0,128),brushRadius,Closed);
  mouseOrigin := Point(X,Y);

  PaintImage;
end;

Transmitimos el parámetro Closed a DrawLineAntialias, para indicar cuando el segmento está cerrado o no. Mira el orden de las coordenadas. La posición inicial y la posición final están intercambiadas. De todas formas, para DrawLineAntialias, es la parte final que esta abierta, en este caso, necesitamos que la parte inicial esté abierta.

La definición DrawBrush debe ser actualizada en la 'interface'.

El manejador MouseMove se convierte en :

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if mouseDrawing then DrawBrush(X,Y,False);
end;

Finalmente, necesitamos agregar un manejador MouseUp para actualizar mouseDrawing :

procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then
    mouseDrawing := False;
end;

Código

unit UMain;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
  BGRABitmap, BGRABitmapTypes;

type
  { TForm1 }

  TForm1 = class(TForm)
    procedure FormCreate(Sender: TObject);
    procedure FormMouseDown(Sender: TObject; Button: TMouseButton;
      Shift: TShiftState; X, Y: Integer);
    procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
    procedure FormMouseUp(Sender: TObject; Button: TMouseButton;
      Shift: TShiftState; X, Y: Integer);
    procedure FormPaint(Sender: TObject);
  private
    { private declarations }
    image: TBGRABitmap;
    mouseDrawing: boolean;
    mouseOrigin: TPoint;
    procedure DrawBrush(X, Y: Integer; Closed: boolean);
    procedure PaintImage;
  public
    { public declarations }
  end;

var
  Form1: TForm1;

implementation

{ TForm1 }

procedure TForm1.FormCreate(Sender: TObject);
begin
  image := TBGRABitmap.Create(640,480,BGRAWhite);
end;

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then
  begin
    mouseDrawing := True;
    mouseOrigin := Point(X,Y);
    DrawBrush(X,Y,True);
  end;
end;

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if mouseDrawing then DrawBrush(X,Y,False);
end;

procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then
    mouseDrawing := False;
end;

procedure TForm1.FormPaint(Sender: TObject);
begin
  PaintImage;
end;

procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
const brushRadius = 20;
begin
  image.DrawLineAntialias(X,Y,mouseOrigin.X,mouseOrigin.Y,BGRA(0,0,0,128),brushRadius,Closed);
  mouseOrigin := Point(X,Y);

  PaintImage;
end;

procedure TForm1.PaintImage;
begin
  image.Draw(Canvas,0,0,True);
end;

initialization
  {$I UMain.lrs}

end.

Ejecuta el programa

Ahora el dibujo es en su mayoría contínuo :

BGRATutorial3d.png

Tutoría anterior (cargar imágen) | Siguiente tutoría (acceso directo a píxeles)