Ceci est un miroir du wiki de pascal.chat. La modification, l’historique et la connexion se trouvent là-bas.

BGRABitmap tutorial 10/fr

Deutsch · English · Español · Français

Ce tutoriel montre comment utiliser le plaquage de texture.

Création d'un nouveau projet

Créez un nouveau projet et ajoutez la référence à BGRABitmap, de la même façon que dans le premier tutoriel.

Sans placage particulier

Regardez ce qu'il arrive si on dessine un polygone avec une texture en utilisant le placage par défaut :

pascal

procedure TForm1.FormPaint(Sender: TObject);
var image: TBGRABitmap;
    tex: TBGRABitmap;
begin
  //fond noir
  image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );

  tex:= TBGRABitmap.Create('image.png'); //charge un image
  image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex);
  tex.Free;

  image.Draw(Canvas,0,0,True); //dessine à l'écran
  image.free;
end;

Exécution du programme

Vous devriez obtenir quelque chose comme cela :

Comme vous pouvez le voir, l'image n'est pas déformée.

Transformation affine

Vous pouvez appliquer une transformation affine comme cela :

pascal

procedure TForm1.PaintImage;
var image: TBGRABitmap;
    tex: TBGRABitmap;
    affine: TBGRAAffineBitmapTransform;

begin
  //fond noir
  image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );

  tex:= TBGRABitmap.Create('image.png'); //charge une image

  //création d'une rotation de 45°
  affine := TBGRAAffineBitmapTransform.Create(tex,True);
  affine.RotateDeg(45);

  //utiliser cette transformation comme paramètre à la place de tex
  image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], affine); 

  affine.Free;
  tex.Free;

  image.Draw(Canvas,0,0,True); //dessin à l'écran
  image.free;
end;

Exécution du programme

Vous devriez obtenir une image tournée à l'intérieur du polygone :

Placage de texture

Maintenant, si vous voulez que la texture soit alignée avec les bords du polygone, vous pouvez utiliser le placage de texture.

Placage linéaire

Le placage linéaire étire l'image le long des bords. Pour faire cela :

pascal

procedure TForm1.PaintImage;
var image: TBGRABitmap;
    tex: TBGRABitmap;
begin
  image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );

  tex:= TBGRABitmap.Create('image.png');
  image.FillPolyLinearMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex,
             [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
  tex.Free;

  image.Draw(Canvas,0,0,True);
  image.free;
end;

Pour faire le placage, vous utilisez FillPolyLinearMapping. De nouveaux paramètres sont apparus. Les coordonnées de la texture définissent, pour chaque sommet du polygone, la position dans la texture. L'option d'interpolation est utilisée pour une meilleure qualité.

Exécution du programme

À présent, la texture est déformée selon la forme polygonale :

Placage avec perspective

Le placage avec perspective permet de définir pour chaque point sa profondeur.

pascal

procedure TForm1.PaintImage;
var image: TBGRABitmap;
    tex: TBGRABitmap;
begin
  image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );

  tex:= TBGRABitmap.Create('image.png');
  image.FillPolyPerspectiveMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)],
                                    [75,             75,             50,              50],
       tex, [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
  tex.Free;

  image.Draw(Canvas,0,0,True);
  image.free;
end;

Ici, la profondeur est de 75 pour le haut du polygone et de 50 pour le bas. Cela signifie que le bas est plus proche de l'observateur, comme s'il était horizontal, à la manière d'un plancher.

Exécution du programme

Maintenant, on a l'impression que c'est un polygone en 3D :

Conclusion

Avec ces techniques, il est possible de déformer une image, comme dans l'outil "grille de déformation" de LazPaint, ou pour dessiner des objets en 3D avec textures, comme dans les tests 19-21 de testbgrafunc (aussi dans l'archive de LazPaint).

Tutoriel précédent (éclairage de phong) | Tutoriel suivant (combiner les transformations)

From the Free Pascal wiki, page "BGRABitmap tutorial 10/fr", as it stood on 2020-02-09 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's Licensing page. If you have concerns about this material, message the admin.

Version 2, dernière modification par WikiArchive 11-4-2026.