Difference between revisions of "Developing with Graphics/fr"

From Lazarus wiki
Jump to navigationJump to search
Line 225: Line 225:
 
</delphi>
 
</delphi>
  
==graphiques en mouvement - Comment éviter le clignotement ==
+
==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.
 
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.
  

Revision as of 15:06, 12 March 2011

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 sera un lancement de tutoriels concernant la manipulation d'images et autres graphiques. Car je ne suis pas un programmeur en graphisme, j'invite tous ceux qui sont prêt à partager leur compétence ! Ajouter juste un lien à la prochaine section, ajouter une page et créer votre propre article WiKi .

Sur cette page quelques informations générales seront fournies.

Autres articles graphique

Dessin 2D

  • ZenGL - cross-platform game development library using 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 dessine 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
  • Perlin Noise - Article concernant l'emploi de bruit de Perlin

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.

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, 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 apparaitre progressivement une image (fade in). Sous Delphi, you pouvez le faire ainsi : <delphi> 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 apparaitre
 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; </delphi>

Cette fonction peut être implémentée comme suit avec les bibliothèques incluses dans Lazarus : <delphi> { 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;

</delphi>

En utilisant BGRABitmap, le fading peut être implémenté comme suit : <delphi> 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.Width,ABitmap.Height);
 CopyBmp.GetImageFromCanvas(ABitmap.Canvas,0,0);
 //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; </delphi>

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.

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.

<delphi> 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; </delphi>

Noter 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 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) :

<delphi>

 uses LCLIntf, LCLType;
 ...

var

 MyBitmap: TBitmap
 ScreenDC: HDC;

begin

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

</delphi>

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 à 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 dessiner ensuite sur le canvas. Dans ce cas il n'est pas besoin d'employer l'évênement OnPaint du contrôle.

Voici ici 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