Developing with Graphics/fr

From Free Pascal wiki
Jump to navigationJump to search

│ 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

Retrieved from "https://wiki.freepascal.org/index.php?title=Developing_with_Graphics/fr&oldid=131803"