Difference between revisions of "Developing with Graphics/fr"

From Lazarus wiki
Jump to navigationJump to search
m (Text replace - "delphi>" to "syntaxhighlight>")
m (Fixed syntax highlighting)
 
(13 intermediate revisions by 4 users not shown)
Line 7: Line 7:
 
== Libraries ==
 
== Libraries ==
  
[[Graphics libraries]] - vous pouvez voir ici la liste des librairies que vous pouvez utiliser pour développer.
+
[[Graphics libraries]] - vous pouvez voir ici la liste des bibliothèques que vous pouvez utiliser pour développer.
  
==Autres articles graphique==
+
==Autres articles sur les graphiques==
 
===Dessin 2D===
 
===Dessin 2D===
* [[ZenGL]] - Librairie de développement de jeux multiplateformes utilisant OpenGL.
+
* [[ZenGL/fr|ZenGL]] - Bibliothèque de développement de jeux multiplateformes utilisant OpenGL.
 
* [[BGRABitmap]] - Dessiner des formes et des images avec transparence, accéder directement aux pixels, etc.
 
* [[BGRABitmap]] - Dessiner des formes et des images avec transparence, accéder directement aux pixels, etc.
* [[LazRGBGraphics]] - Un paquet pour de rapides manipulations de pixels et de traitement d'image en mémoire
+
* [[LazRGBGraphics]] - Un paquet pour de rapides manipulations de pixels et de traitement d'image en mémoire.
 
* [[Double Gradient]] - Dessiner un gradient double et des gradients multiples facilement.
 
* [[Double Gradient]] - Dessiner un gradient double et des gradients multiples facilement.
* [[Gradient Filler]] - TGradientFiller permet de dessine des gradients multiples avec Lazarus.
+
* [[Gradient Filler]] - TGradientFiller permet de dessiner des gradients multiples avec Lazarus.
 
* [[PascalMagick]] - une API facile à utiliser pour s'interfacer avec [http://www.imagemagick.org ImageMagick], une suite libre de logiciel multiplateforme pour créer, éditer, et composer des images bitmap.
 
* [[PascalMagick]] - une API facile à utiliser pour s'interfacer avec [http://www.imagemagick.org ImageMagick], une suite libre de logiciel multiplateforme pour créer, éditer, et composer des images bitmap.
  
 
===3D===
 
===3D===
* [[GLScene]] - Portage de la librairie graphique visual OpenGL [http://www.glscene.org GLScene]
+
* [[GLScene/fr|GLScene]] - Portage de la librairie graphique visual OpenGL [http://www.glscene.org GLScene].
 +
* [[Castle Game Engine/fr|Castle Game Engine]] - Un moteur libre et multiplateforme pour des jeux 3D and 2D sous FPC/Lazarus ([http://castle-engine.sourceforge.net/engine.php site officiel]).
 +
 
 
===Diagrammes===
 
===Diagrammes===
 
* [[TAChart]] - Composant de diagrammes pour Lazarus
 
* [[TAChart]] - Composant de diagrammes pour Lazarus
 
* [[PlotPanel]] - Un composant de tracé de diagrammes pour des graphes animés
 
* [[PlotPanel]] - Un composant de tracé de diagrammes pour des graphes animés
* [[Perlin Noise]] - Article concernant l'emploi de bruit de Perlin
+
* [[Perlin Noise/fr|Bruit de Perlin]] - Article concernant l'emploi de bruit de Perlin
  
 
==Travailler avec TBitmap ==
 
==Travailler avec TBitmap ==
Sur certains systèmes, les données des images ne sont pas stoquées dans la mémoire local, alors il n'est pas possible d'y accéder directement. Comme Lazarus est fait pour être indépendant de la plateforme, la classe TBitmap ne fournit pas une propriété comme Scanline. Ce serait possible, mais cela nécessiterait une conversion implicite de l'image. Il y a une fonction GetDataLineStart, équivalente à Scanline, mais disponible uniquement pour les images en mémoire comme TLazIntfImage qui utilise en interne un objet TRawImage.  
+
Sur certains systèmes, les données des images ne sont pas stockées dans la mémoire locale si bien qu'il n'est pas possible d'y accéder directement. Comme Lazarus est fait pour être indépendant de la plateforme, la classe ''TBitmap'' ne fournit pas de propriété comme ''Scanline''. Ce serait possible, mais cela nécessiterait une conversion implicite de l'image. Il y a une fonction ''GetDataLineStart'', équivalente à ''Scanline'', mais disponible uniquement pour les images en mémoire comme ''TLazIntfImage'' qui utilise en interne un objet ''TRawImage''.  
  
En résumé, on ne peut changer une image qu'indirectement, en midifiant une image en mémoire, et ensuite en la convertissant en une image dessinable. Ce processus est bien entendu plus lent. Il y a des librairies qui permettent d'accéder directement à des images, mais elles peuvent utiliser implicitement une conversion lorsqu'on les dessine (voir [[BGRABitmap/fr|BGRABitmap]], [[LazRGBGraphics/fr|LazRGBGraphics]] et peut-être un jour [[Current conversion projects/fr#Graphics32|Graphics32]]).  
+
En résumé, on ne peut changer une image qu'indirectement, en modifiant une image en mémoire, et ensuite en la convertissant en une image dessinable. Ce processus est bien entendu plus lent. Il y a des librairies qui permettent d'accéder directement à des images, mais elles peuvent utiliser implicitement une conversion lorsqu'on les dessine (voir [[BGRABitmap/fr|BGRABitmap]], [[LazRGBGraphics/fr|LazRGBGraphics]] et peut-être un jour [[Current conversion projects/fr#Graphics32|Graphics32]]).  
  
Note : quand vous créez une image, vous devez spécifier une hauteur et une largeur, sinon, sa taille sera égale à zéro et rien ne sera dessiné.
+
Note : quand vous créez une image, vous devez spécifier une hauteur et une largeur, sinon sa taille sera égale à zéro et rien ne sera dessiné.
  
 
===Un exemple de fading===
 
===Un exemple de fading===
Voilà un exemple où l'on fait apparaitre progressivement une image (fade in). Sous Delphi, you pouvez le faire ainsi :
+
Voilà un exemple où l'on fait apparaître progressivement une image (''fade in''). Sous Delphi, vous pouvez le faire ainsi :
<syntaxhighlight>
+
 
 +
<syntaxhighlight lang=pascal>
 
procedure TForm1.FadeIn(ABitmap: TBitmap);
 
procedure TForm1.FadeIn(ABitmap: TBitmap);
 
Const NbSteps = 32; //pour simplifier l'instruction 'div'
 
Const NbSteps = 32; //pour simplifier l'instruction 'div'
Line 43: Line 46:
 
   Step: Longword;  
 
   Step: Longword;  
 
begin
 
begin
   //faire une copie 24-bit de l'image à faire apparaitre
+
   //faire une copie 24-bit de l'image à faire apparaître
 
   CopyBmp := TBitmap.Create;
 
   CopyBmp := TBitmap.Create;
 
   CopyBmp.PixelFormat := pf24bit;
 
   CopyBmp.PixelFormat := pf24bit;
Line 82: Line 85:
  
 
Cette fonction peut être implémentée comme suit avec les bibliothèques incluses dans Lazarus :
 
Cette fonction peut être implémentée comme suit avec les bibliothèques incluses dans Lazarus :
<syntaxhighlight>
+
 
 +
<syntaxhighlight lang=pascal>
 
{ Ce code a été copié du projet à l'emplacement $LazarusPath/examples/lazintfimage/fadein1.lpi }
 
{ Ce code a été copié du projet à l'emplacement $LazarusPath/examples/lazintfimage/fadein1.lpi }
 
uses LCLType, // HBitmap type
 
uses LCLType, // HBitmap type
Line 129: Line 133:
  
 
En utilisant BGRABitmap, le fading peut être implémenté comme suit :
 
En utilisant BGRABitmap, le fading peut être implémenté comme suit :
<syntaxhighlight>
+
 
 +
<syntaxhighlight lang=pascal>
 
procedure TForm1.FadeIn3(ABitmap: TBitmap);
 
procedure TForm1.FadeIn3(ABitmap: TBitmap);
 
Const NbSteps = 32;
 
Const NbSteps = 32;
Line 168: Line 173:
 
===Tracer des bitmaps avec une couleur transparente===
 
===Tracer des bitmaps avec une couleur transparente===
  
Un nouveau dispositif, implémenté avec Lazarus 0.9.11, sont les bitmap en couleur transparentes. les fichiers Bitmap (*.BMP)ne peuvent stocker aucune information sur la transparence, mais ils peuvent fonctionner comme s'ils en avaient si vous choisissez une couleur sur eux pour représenter le secteur transparent. C'est un tour courant utilisé dans les applications Win32.
+
Un nouveau dispositif, implémenté avec Lazarus 0.9.11, réside dans les bitmaps en couleurs transparentes. les fichiers Bitmap (*.BMP) ne peuvent stocker aucune information sur la transparence, mais ils peuvent fonctionner comme s'ils en avaient si vous choisissez une couleur sur eux pour représenter le secteur transparent. C'est une astuce courante utilisée dans les applications Win32.
  
L'exemple suivant charge un Bitmap à partir d'une ressource Windows, choisit une couleur pour être transparente (clFuchsia) et le dessine ensuite sur le canvas.
+
L'exemple suivant charge un Bitmap à partir d'une ressource Windows, choisit une couleur pour être transparente (''clFuchsia'') et le dessine ensuite sur le canevas.
  
<syntaxhighlight>
+
<syntaxhighlight lang=pascal>
 
procedure MyForm.MyButtonOnClick(Sender: TObject);
 
procedure MyForm.MyButtonOnClick(Sender: TObject);
 
var
 
var
Line 204: Line 209:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Noter les opérations de mémoire effectuées avec [[doc:rtl/classes/tmemorystream.html|TMemoryStream]]. Elles sont nécessaires pour assurer le chargement correct de l'image .
+
Notez les opérations de mémoire effectuées avec [[doc:rtl/classes/tmemorystream.html|TMemoryStream]]. Elles sont nécessaires pour assurer le chargement correct de l'image.
  
 
===Faire une capture d'image de l'écran ===
 
===Faire une capture d'image de l'écran ===
  
Depuis Lazarus 0.9.16 vous pouvez employer LCL pour faire des captures d'images de l'écran de manière multi-plateforme. Le code d'exemple suivant le fait  (fonctionne avec gtk2 et win32, mais non gtk1 actuellement) :
+
Depuis Lazarus 0.9.16, vous pouvez employer la LCL pour faire des captures d'images de l'écran multiplateforme. Le code d'exemple suivant le fait  (fonctionne avec gtk2 et win32, mais non gtk1 actuellement) :
  
<syntaxhighlight>
+
<syntaxhighlight lang=pascal>
 
   uses LCLIntf, LCLType;
 
   uses LCLIntf, LCLType;
  

Latest revision as of 06:53, 13 February 2020

Deutsch (de) English (en) español (es) français (fr) italiano (it) 日本語 (ja) 한국어 (ko) Nederlands (nl) português (pt) русский (ru) slovenčina (sk) 中文(中国大陆)‎ (zh_CN) 中文(台灣)‎ (zh_TW)

Cette page décrit les classes de base et les techniques pour le dessin avec Lazarus. Les questions plus spécifiques sont traitées dans des articles séparés.

Libraries

Graphics libraries - vous pouvez voir ici la liste des bibliothèques que vous pouvez utiliser pour développer.

Autres articles sur les graphiques

Dessin 2D

  • ZenGL - Bibliothèque de développement de jeux multiplateformes utilisant OpenGL.
  • BGRABitmap - Dessiner des formes et des images avec transparence, accéder directement aux pixels, etc.
  • LazRGBGraphics - Un paquet pour de rapides manipulations de pixels et de traitement d'image en mémoire.
  • Double Gradient - Dessiner un gradient double et des gradients multiples facilement.
  • Gradient Filler - TGradientFiller permet de dessiner des gradients multiples avec Lazarus.
  • PascalMagick - une API facile à utiliser pour s'interfacer avec ImageMagick, une suite libre de logiciel multiplateforme pour créer, éditer, et composer des images bitmap.

3D

Diagrammes

  • TAChart - Composant de diagrammes pour Lazarus
  • PlotPanel - Un composant de tracé de diagrammes pour des graphes animés
  • Bruit de Perlin - Article concernant l'emploi de bruit de Perlin

Travailler avec TBitmap

Sur certains systèmes, les données des images ne sont pas stockées dans la mémoire locale si bien qu'il n'est pas possible d'y accéder directement. Comme Lazarus est fait pour être indépendant de la plateforme, la classe TBitmap ne fournit pas de propriété comme Scanline. Ce serait possible, mais cela nécessiterait une conversion implicite de l'image. Il y a une fonction GetDataLineStart, équivalente à Scanline, mais disponible uniquement pour les images en mémoire comme TLazIntfImage qui utilise en interne un objet TRawImage.

En résumé, on ne peut changer une image qu'indirectement, en modifiant une image en mémoire, et ensuite en la convertissant en une image dessinable. Ce processus est bien entendu plus lent. Il y a des librairies qui permettent d'accéder directement à des images, mais elles peuvent utiliser implicitement une conversion lorsqu'on les dessine (voir BGRABitmap, LazRGBGraphics et peut-être un jour Graphics32).

Note : quand vous créez une image, vous devez spécifier une hauteur et une largeur, sinon sa taille sera égale à zéro et rien ne sera dessiné.

Un exemple de fading

Voilà un exemple où l'on fait apparaître progressivement une image (fade in). Sous Delphi, vous pouvez le faire ainsi :

procedure TForm1.FadeIn(ABitmap: TBitmap);
Const NbSteps = 32; //pour simplifier l'instruction 'div'
var
  FadeBmp, CopyBmp: TBitmap;
  PFade, PCopy: PRGBTriple;
  x, y: integer;
  Step: Longword; 
begin
  //faire une copie 24-bit de l'image à faire apparaître
  CopyBmp := TBitmap.Create;
  CopyBmp.PixelFormat := pf24bit;
  CopyBmp.Width := ABitmap.Width;
  CopyBmp.Height := ABitmap.Height;
  CopyBmp.Canvas.Draw(0,0,ABitmap);

  //créer une image pour le fading
  FadeBmp := TBitmap.Create;
  FadeBmp.PixelFormat := pf24bit;
  FadeBmp.Width := ABitmap.Width;
  FadeBmp.Height := ABitmap.Height;

  for step := 0 to NbSteps do //boucle principale
  begin
    for y := 0 to FadeBmp.Height - 1 do
    begin
      PCopy := CopyBmp.Scanline[y];
      PFade := FadeBmp.Scanline[y];
      for x := 0 to FadeBmp.Width - 1 do
      begin
        PFade^.rgbtRed := (step * PCopy^.rgbtRed) div NbSteps;
        PFade^.rgbtGreen := (step * PCopy^.rgbtGreen) div NbSteps; // calcul de fading
        PFade^.rgbtBlue := (step * PCopy^.rgbtBlue) div NbSteps;
        inc(PCopy); // aller au pixel suivant
        inc(PFade);
      end;
    end;
    Form1.Canvas.Draw(0, 0, FadeBmp);
    Sleep(16); // attendre un cycle d'écran
    Application.ProcessMessages; // gérer les messages Windows
  end;

  FadeBmp.Free;
  CopyBmp.Free;
end;

Cette fonction peut être implémentée comme suit avec les bibliothèques incluses dans Lazarus :

{ Ce code a été copié du projet à l'emplacement $LazarusPath/examples/lazintfimage/fadein1.lpi }
uses LCLType, // HBitmap type
     IntfGraphics, // TLazIntfImage type
     fpImage; // TFPColor type
...
 procedure TForm1.FadeIn(ABitMap: TBitMap);
 var
   SrcIntfImg, TempIntfImg: TLazIntfImage;
   ImgHandle,ImgMaskHandle: HBitmap;
   FadeStep: Integer;
   px, py: Integer;
   CurColor: TFPColor;
   TempBitmap: TBitmap;
 begin
   //crée une copie de l'image dans un objet TLazIntfImage
   SrcIntfImg:=TLazIntfImage.Create(0,0);
   SrcIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);
   //crée une image avec les mêmes dimensions pour faire le fading
   TempIntfImg:=TLazIntfImage.Create(0,0);
   TempIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);

   //crée un objet Bitmap de destination pour l'affichage
   TempBitmap:=TBitmap.Create;
   for FadeStep:=1 to 32 do begin //boucle principale
     for py:=0 to SrcIntfImg.Height-1 do begin
       for px:=0 to SrcIntfImg.Width-1 do begin
         CurColor:=SrcIntfImg.Colors[px,py]; //lire la couleur source
         CurColor.Red:=(CurColor.Red*FadeStep) shr 5;
         CurColor.Green:=(CurColor.Green*FadeStep) shr 5; //calcul de fading
         CurColor.Blue:=(CurColor.Blue*FadeStep) shr 5;
         TempIntfImg.Colors[px,py]:=CurColor;
       end;
     end;
     //création des handles pour l'image temporaire
     TempIntfImg.CreateBitmaps(ImgHandle,ImgMaskHandle,false);
     TempBitmap.Handle:=ImgHandle;
     TempBitmap.MaskHandle:=ImgMaskHandle;
     Canvas.Draw(0,0,TempBitmap); //dessin de l'image
   end;
   SrcIntfImg.Free;
   TempIntfImg.Free;
   TempBitmap.Free;
 end;

En utilisant BGRABitmap, le fading peut être implémenté comme suit :

procedure TForm1.FadeIn3(ABitmap: TBitmap);
Const NbSteps = 32;
var
  CopyBmp,FadeBmp: TBGRABitmap;
  PFade, PSource: PBGRAPixel;
  n, step: Longword;
begin  
  //crée une copie de l'image avec accès direct aux pixels
  CopyBmp := TBGRABitmap.Create(ABitmap.Canvas);

  //crée une image pour le fading
  FadeBmp := TBGRABitmap.Create(ABitmap.Width,ABitmap.Height);

  for step := 0 to NbSteps do //boucle principale
  begin
    PSource := CopyBmp.Data;
    PFade := FadeBmp.Data;
    for n := 0 to FadeBmp.NbPixels - 1 do
    begin
        PFade^.red := (step * PSource^.red) div NbSteps;
        PFade^.green := (step * PSource^.green) div NbSteps; // calcul de fading
        PFade^.blue := (step * PSource^.blue) div NbSteps;
        inc(PSource); // aller au pixel suivant
        inc(PFade);
    end;
    FadeBmp.InvalidateBitmap; // note qu'on a changé par accès direct
    FadeBmp.Draw(Form1.Canvas,0,0,true);  // affiche l'image calculée en mode opaque
    Sleep(16); // attendre un cycle d'écran
    Application.ProcessMessages; // gérer les événements
  end;

  FadeBmp.Free;
  CopyBmp.Free;
end;

Tracer des bitmaps avec une couleur transparente

Un nouveau dispositif, implémenté avec Lazarus 0.9.11, réside dans les bitmaps en couleurs transparentes. les fichiers Bitmap (*.BMP) ne peuvent stocker aucune information sur la transparence, mais ils peuvent fonctionner comme s'ils en avaient si vous choisissez une couleur sur eux pour représenter le secteur transparent. C'est une astuce courante utilisée dans les applications Win32.

L'exemple suivant charge un Bitmap à partir d'une ressource Windows, choisit une couleur pour être transparente (clFuchsia) et le dessine ensuite sur le canevas.

procedure MyForm.MyButtonOnClick(Sender: TObject);
var
  buffer: THandle;
  bmp: TBitmap;
  memstream: TMemoryStream;
begin
  bmp := TBitmap.Create;

  buffer := Windows.LoadBitmap(hInstance, MAKEINTRESOURCE(ResourceID));

  if (buffer = 0) then exit; // Error loading the bitmap

  bmp.Handle := buffer;
  memstream := TMemoryStream.create;
  try
    bmp.SaveToStream(memstream);
    memstream.position := 0;
    bmp.LoadFromStream(memstream);
  finally
    memstream.free;
  end;

  bmp.Transparent := True;
  bmp.TransparentColor := clFuchsia;

  MyCanvas.Draw(0, 0, bmp);

  bmp.Free; // Release allocated resource
end;

Notez les opérations de mémoire effectuées avec TMemoryStream. Elles sont nécessaires pour assurer le chargement correct de l'image.

Faire une capture d'image de l'écran

Depuis Lazarus 0.9.16, vous pouvez employer la LCL pour faire des captures d'images de l'écran multiplateforme. Le code d'exemple suivant le fait (fonctionne avec gtk2 et win32, mais non gtk1 actuellement) :

  uses LCLIntf, LCLType;

  ...

var
  MyBitmap: TBitmap
  ScreenDC: HDC;
begin
  MyBitmap := TBitmap.Create;
  ScreenDC := GetDC(0);
  MyBitmap.LoadFromDevice(ScreenDC);
  ReleaseDC(ScreenDC);

  ...

Graphiques en mouvement - Comment éviter le clignotement

Beaucoup de programmes dessinent leur sortie sur le GUI sous forme de graphiques 2D. Si ces graphiques ont besoin de changer rapidement vous ferez face bientôt à un problème : les graphiques changeant rapidement clignotent souvent sur l'écran. Ceci se produit quand les utilisateurs voient parfois des images entières et parfois seulement quand c'est dessiné partiellement. Cela se produit parce que le procédé d'affichage a besoin de temps.

Mais comment puis je éviter le clignotement et obtenir la meilleure vitesse de dessin ? Naturellement vous pourriez travailler avec l'accélération matérielle en utilisant OpenGL, mais cette approche est tout à fait lourde pour de petits programmes ou de vieux ordinateurs. Ce tutoriel se concentrera sur la façon de dessiner sur un TCanvas. Si vous avez besoin d'aide avec OpenGL, jeter un coup d'oeil sur l'exemple qui vient avec Lazarus. Vous pouvez également employer le gamepack d'A.J. Venter, qui fourni un canvas à double-tampon et un composant de sprite.

Maintenant nous examinerons les options que nous avons pour dessiner un canvas :

Dessiner sur un Timage

Un TImage se compose en 2 parts : un TGraphic, habituellement un TBitmap, contenant l'image persistante et l'aire visuelle, laquelle est peinte à chaque OnPaint. Redimensionner le TImage ne redimensionne pas le bitmap. Le graphique (ou bitmap) est accessible par l'intermédiaire de Image1.Picture.Graphic (ou Image1.Picture.Bitmap). La canvas est Image1.Picture.Bitmap.Canvas. Le canvas de l'aire visuelle d'une TImage est seulement accessible pendant Image1.OnPaint via Image1.Canvas.

Important : Ne jamais employer le OnPaint de l'évènement Image1 pour dessiner le graphique/bitmap d'une TImage. Le graphique d'une TImage est en mémoire tampon aussi tout que vous devez faire est de dessiner vers elle de n'importe où et le changement est là pour toujours. Cependant, si vous redessinez constamment, l'image clignotera. Dans ce cas-ci vous pouvez essayer les autres options. Dessin sur une TImage est considéré comme étant plus lent que les autres approches.

Redimensionner le bitmap d'un TImage

Note : Ne pas employer ceci pendant OnPaint.

 with Image1.Picture.Bitmap do begin
   Width:=100;
   Height:=120;
 end;

Peindre sur le bitmap d'un TImage

Note: Ne pas employer ceci pendant OnPaint.

 with Image1.Picture.Bitmap.Canvas do begin
   // fill the entire bitmap with red
   Brush.Color:=clRed;
   FillRect(0,0,Width,Height);
 end;

Note : À l'intérieur de Image1.OnPaint Image1.Canvas pointe vers l'aire visible volatile. En dehors de Image1.OnPaint l'Image1.Canvas pointe vers Image1.Picture.Bitmap.Canvas.

Un autre exemple :

procedure TForm1.BitBtn1Click(Sender: TObject);
var
  x, y: Integer;
begin
  // Draws the backgroung
  MyImage.Canvas.Pen.Color := clWhite;
  MyImage.Canvas.Rectangle(0, 0, Image.Width, Image.Height);
  
  // Draws squares
  MyImage.Canvas.Pen.Color := clBlack;
  for x := 1 to 8 do
   for y := 1 to 8 do
    MyImage.Canvas.Rectangle(Round((x - 1) * Image.Width / 8), Round((y - 1) * Image.Height / 8),
       Round(x * Image.Width / 8), Round(y * Image.Height / 8));
end;

Peindre sur l'aire visuelle volatile de TImage

Vous pouvez seulement peindre sur ce secteur pendant OnPaint. OnPaint est éventuellement appellé automatiquement par la LCL quand le secteur a été invalidé. Vous pouvez invalidé manuellement le secteur avec Image1.Invalidate. Ceci n'appellera pas immédiatement OnPaint et vous pouvez appeler Invalidate autant de fois que vous le voulez.

 procedure TForm.Image1Paint(Sender: TObject);
 begin
   with Image1.Canvas do begin
     // paint a line
     Pen.Color:=clRed;
     Line(0,0,Width,Height);
   end;
 end;

Dessiner sur l'évênement OnPaint

Dans ce cas tout le dessin doit être fait sur l'évênement OnPaint de la fiche. Il ne reste pas sur le tampon, comme sur la TImage.

Créer un contrôle à soi qui se dessine lui-même

Créer un contrôle à soi a l'avantage de structurer votre code, et vous pouvez réutiliser le contrôle. Cette approche est très rapide, mais elle peut toujours produire du clignotement si vous ne dessinez pas sur un TBitmap en premier et dessinez ensuite sur le canvas. Dans ce cas, il n'est pas besoin d'employer l'évènement OnPaint du contrôle.

Voici un exemple de contrôle personnalisé:

uses
 Classes, SysUtils, Controls, Graphics, LCLType;

type
  TMyDrawingControl = class(TCustomControl)
  public
    procedure EraseBackground(DC: HDC); override;
    procedure Paint; override;
  end;

implementation

procedure TMyDrawingControl.EraseBackground(DC: HDC);
begin
  // Uncomment this to enable default background erasing
  //inherited EraseBackground(DC);
end; 

procedure TMyDrawingControl.Paint;
var
  x, y: Integer;
  Bitmap: TBitmap;
begin
  Bitmap := TBitmap.Create;
  try
    // Initializes the Bitmap Size
    Bitmap.Height := Height;
    Bitmap.Width := Width;
 
    // Draws the background
    Bitmap.Canvas.Pen.Color := clWhite;
    Bitmap.Canvas.Rectangle(0, 0, Width, Height);

    // Draws squares
    Bitmap.Canvas.Pen.Color := clBlack;
    for x := 1 to 8 do
     for y := 1 to 8 do
      Bitmap.Canvas.Rectangle(Round((x - 1) * Width / 8), Round((y - 1) * Height / 8),
       Round(x * Width / 8), Round(y * Height / 8));
      
    Canvas.Draw(0, 0, Bitmap);
  finally
    Bitmap.Free;
  end;

  inherited Paint;
end;

...et la manière de le créer dans la fiche.

procedure TMyForm.FormCreate(Sender: TObject);
begin
  MyDrawingControl:= TMyDrawingControl.Create(Self);
  MyDrawingControl.Height := 400;
  MyDrawingControl.Width := 500;
  MyDrawingControl.Top := 0;
  MyDrawingControl.Left := 0;
  MyDrawingControl.Parent := Self;
  MyDrawingControl.DoubleBuffered := True;
end;

N'oubliez pas de le détruire :

procedure TMyForm.FormDestroy(Sender: TObject);
begin
  MyDrawingControl.Free;
end;

Paramétrer Top et Left à zéro n'est pas nécessaire, puisque c'est la position standard, mais est fait pour renforcer l'endroit où le contrôle sera mis.

"MyDrawingControl.Parent := Self;" est très important et vous ne verrez pas votre contrôle si vous ne faites pas ainsi.

"MyDrawingControl.DoubleBuffered := True;" est nécessaire pour éviter le clignotement sur Windows. Il n'a aucun effet sur gtk.

Employer le gamepack d'A.J. Venter

L'approche par gamepack est de tout dessiner sur un canvas à double-tampon, lequel se met seulement à jour sur le canvas visible quand vous êtes prêt. Ceci demande beaucoup de code, mais il a l'avantage de pouvoir faire de grandes scènes avec de multiples sprites changeant rapidement. Si vous souhaitez employer cette approche, vous pouvez être intéressés par le A.J. Venter's gamepack, un ensemble de composants pour le développement de jeu dans Lazarus, qui fournit un composant avec une zone de visualisation avec double-tampon ainsi qu'un composant de sprite, conçu pour bien s'intégrer entre eux. Vous pouvez obtenir gamepack via SVN :
svn co svn://silentcoder.co.za/lazarus/gamepack