Sign in Join
Wiki copytemporary

BGRABitmap tutorial 10/fr: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 10/fr

OldNewLine
1+Ce tutoriel montre comment utiliser le plaquage de texture.
2+
3+### Création d'un nouveau projet
4+
5+Créez un nouveau projet et ajoutez la référence à [[BGRABitmap]], de la même façon que dans [[BGRABitmap tutorial/fr|le premier tutoriel]].
6+
7+### Sans placage particulier
8+
9+Regardez ce qu'il arrive si on dessine un polygone avec une texture en utilisant le placage par défaut :
10+
11+``` pascal
12+procedure TForm1.FormPaint(Sender: TObject);
13+var image: TBGRABitmap;
14+ tex: TBGRABitmap;
15+begin
16+ //fond noir
17+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
18+
19+ tex:= TBGRABitmap.Create('image.png'); //charge un image
20+ image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex);
21+ tex.Free;
22+
23+ image.Draw(Canvas,0,0,True); //dessine à l'écran
24+ image.free;
25+end;
26+```
27+
28+### Exécution du programme
29+
30+Vous devriez obtenir quelque chose comme cela :
31+
32+<figure>
33+<img src="BGRATutorial10a.png" title="BGRATutorial10a.png" />
34+<figcaption>BGRATutorial10a.png</figcaption>
35+</figure>
36+
37+Comme vous pouvez le voir, l'image n'est pas déformée.
38+
39+### Transformation affine
40+
41+Vous pouvez appliquer une transformation affine comme cela :
42+
43+``` pascal
44+procedure TForm1.PaintImage;
45+var image: TBGRABitmap;
46+ tex: TBGRABitmap;
47+ affine: TBGRAAffineBitmapTransform;
48+
49+begin
50+ //fond noir
51+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
52+
53+ tex:= TBGRABitmap.Create('image.png'); //charge une image
54+
55+ //création d'une rotation de 45°
56+ affine := TBGRAAffineBitmapTransform.Create(tex,True);
57+ affine.RotateDeg(45);
58+
59+ //utiliser cette transformation comme paramètre à la place de tex
60+ image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], affine);
61+
62+ affine.Free;
63+ tex.Free;
64+
65+ image.Draw(Canvas,0,0,True); //dessin à l'écran
66+ image.free;
67+end;
68+```
69+
70+### Exécution du programme
71+
72+Vous devriez obtenir une image tournée à l'intérieur du polygone :
73+
74+<figure>
75+<img src="BGRATutorial10b.png" title="BGRATutorial10b.png" />
76+<figcaption>BGRATutorial10b.png</figcaption>
77+</figure>
78+
79+### Placage de texture
80+
81+Maintenant, si vous voulez que la texture soit alignée avec les bords du polygone, vous pouvez utiliser le placage de texture.
82+
83+#### Placage linéaire
84+
85+Le placage linéaire étire l'image le long des bords. Pour faire cela :
86+
87+``` pascal
88+procedure TForm1.PaintImage;
89+var image: TBGRABitmap;
90+ tex: TBGRABitmap;
91+begin
92+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
93+
94+ tex:= TBGRABitmap.Create('image.png');
95+ image.FillPolyLinearMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex,
96+ [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
97+ tex.Free;
98+
99+ image.Draw(Canvas,0,0,True);
100+ image.free;
101+end;
102+```
103+
104+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é.
105+
106+#### Exécution du programme
107+
108+À présent, la texture est déformée selon la forme polygonale :
109+
110+<figure>
111+<img src="BGRATutorial10c.png" title="BGRATutorial10c.png" />
112+<figcaption>BGRATutorial10c.png</figcaption>
113+</figure>
114+
115+#### Placage avec perspective
116+
117+Le placage avec perspective permet de définir pour chaque point sa profondeur.
118+
119+``` pascal
120+procedure TForm1.PaintImage;
121+var image: TBGRABitmap;
122+ tex: TBGRABitmap;
123+begin
124+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
125+
126+ tex:= TBGRABitmap.Create('image.png');
127+ image.FillPolyPerspectiveMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)],
128+ [75, 75, 50, 50],
129+ tex, [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
130+ tex.Free;
131+
132+ image.Draw(Canvas,0,0,True);
133+ image.free;
134+end;
135+```
136+
137+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.
138+
139+#### Exécution du programme
140+
141+Maintenant, on a l'impression que c'est un polygone en 3D :
142+
143+<figure>
144+<img src="BGRATutorial10d.png" title="BGRATutorial10d.png" />
145+<figcaption>BGRATutorial10d.png</figcaption>
146+</figure>
147+
148+### Conclusion
149+
150+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).
151+
152+[[BGRABitmap tutorial 9/fr|Tutoriel précédent (éclairage de phong)]] \| [[BGRABitmap tutorial 11/fr|Tutoriel suivant (combiner les transformations)]]
153+
154+---
155+*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](/wiki-contact).*

Back to history