Sign in Join
Wiki copytemporary

BGRABitmap tutorial 11/fr: what changed

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

Title: BGRABitmap tutorial 11/fr

OldNewLine
1+Ce tutoriel montre comment combiner les transformations.
2+
3+### Transformation affine d'un dégradé radial
4+
5+Voici une transformation affine appliquée à un dégradé de la même façon qu'avec les textures :
6+
7+``` pascal
8+uses BGRAGradientScanner, BGRATransform;
9+
10+procedure TForm1.FormPaint(Sender: TObject);
11+var image: TBGRABitmap;
12+ grad: TBGRAGradientScanner;
13+ affine: TBGRAAffineScannerTransform;
14+begin
15+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
16+
17+ grad := TBGRAGradientScanner.Create(BGRA(0,0,255),BGRAWhite,gtRadial,PointF(0,0),PointF(1,0),True,True);
18+
19+ affine := TBGRAAffineScannerTransform.Create(grad);
20+ affine.Scale(150,80);
21+ affine.RotateDeg(-30);
22+ affine.Translate(ClientWidth/2, ClientHeight/2);
23+
24+ image.Fill(affine);
25+
26+ affine.free;
27+ grad.free;
28+
29+ image.Draw(Canvas,0,0,True);
30+ image.free;
31+end;
32+```
33+
34+Le dégradé de base est radial, centré à l'origine (0,0) et de rayon 1.
35+
36+La transformation affine effectue les actions suivantes :
37+
38+- étirer le dégradé à une taille de 150x80 ;
39+- tourner de 30 degrés dans le sens inverse des aiguilles d'une montre ;
40+- centrer sur la fenêtre.
41+
42+L'instruction *Fill* dessine le résultat sur l'image.
43+
44+### Exécution du programme
45+
46+Vous devriez obtenir une ellipse avec un dégradé bleu et blanc.
47+
48+<figure>
49+<img src="BGRATutorial11a.png" title="BGRATutorial11a.png" />
50+<figcaption>BGRATutorial11a.png</figcaption>
51+</figure>
52+
53+### Combiner avec un twirl
54+
55+Vous pouvez ajouter une autre transformation comme cela :
56+
57+``` pascal
58+var image: TBGRABitmap;
59+ grad: TBGRAGradientScanner;
60+ affine: TBGRAAffineScannerTransform;
61+ twirl: TBGRATwirlScanner;
62+begin
63+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
64+
65+ grad := TBGRAGradientScanner.Create(BGRA(0,0,255),BGRAWhite,gtRadial,PointF(0,0),PointF(1,0),True,True);
66+
67+ affine := TBGRAAffineScannerTransform.Create(grad);
68+ affine.Scale(150,80);
69+ affine.RotateDeg(-30);
70+ affine.Translate(ClientWidth/2, ClientHeight/2);
71+
72+ twirl := TBGRATwirlScanner.Create(affine,Point(ClientWidth div 2, ClientHeight div 2),100);
73+ image.Fill(twirl);
74+ twirl.Free;
75+
76+ affine.free;
77+ grad.free;
78+
79+ image.Draw(Canvas,0,0,True);
80+ image.free;
81+end;
82+```
83+
84+Ici, vous créez une transformation de twirl et l'appliquez à la précédente.
85+
86+### Exécution du programme
87+
88+A présent, le centre du dégradé est tourbillonnant.
89+
90+<figure>
91+<img src="BGRATutorial11b.png" title="BGRATutorial11b.png" />
92+<figcaption>BGRATutorial11b.png</figcaption>
93+</figure>
94+
95+### Utiliser un scanner personnalisé
96+
97+Vous pouvez avoir besoin de créer votre propre générateur de dégradés. Voici par exemple un dégradé multiplicateur :
98+
99+``` pascal
100+type
101+ { TBGRAMultiplyScanner }
102+
103+ TBGRAMultiplyScanner = class(TBGRACustomScanner)
104+ function ScanAt(X, Y: Single): TBGRAPixel; override;
105+ end;
106+
107+{ TBGRAMultiplyScanner }
108+
109+function TBGRAMultiplyScanner.ScanAt(X, Y: Single): TBGRAPixel;
110+ function cycle512(value: integer): integer; inline;
111+ begin
112+ result := value and 511;
113+ if result >= 256 then result := 511-result;
114+ end;
115+
116+var
117+ mul: integer;
118+begin
119+ mul := cycle512(round(x*y));
120+ result := BGRA(mul,mul,mul,255);
121+end;
122+```
123+
124+Il est dérivé de *TBGRACustomScanner* afin d'être utilisé pour le remplissage, et la fonction *ScanAt* est remplacée (*override*). Elle calcule le produit des deux coordonnées et fait un cycle de 512 (de 0 à 255 puis de 255 à 0).
125+
126+Dessinez-le à l'écran avec une simple transformation affine :
127+
128+``` pascal
129+var image: TBGRABitmap;
130+ grad: TBGRAMultiplyScanner;
131+ affine: TBGRAAffineScannerTransform;
132+begin
133+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
134+
135+ grad := TBGRAMultiplyScanner.Create;
136+ affine := TBGRAAffineScannerTransform.Create(grad);
137+ affine.Scale(6,4);
138+ affine.Translate(ClientWidth/2, ClientHeight/2);
139+ image.Fill(affine);
140+ affine.free;
141+ grad.free;
142+
143+ image.Draw(Canvas,0,0,True);
144+ image.free;
145+end;
146+```
147+
148+### Exécution du programme
149+
150+Le résultat devrait ressembler à cela :
151+
152+<figure>
153+<img src="BGRATutorial11c.png" title="BGRATutorial11c.png" />
154+<figcaption>BGRATutorial11c.png</figcaption>
155+</figure>
156+
157+### Rendons l'ensemble joli
158+
159+Ajoutez des couleurs en modifiant la procédure *ScanAt* du dégradé multiplicateur :
160+
161+``` pascal
162+var
163+ mul: integer;
164+begin
165+ mul := round(x*y);
166+ result := BGRA(cycle512(round(x*10)),cycle512(mul),cycle512(round(y*10)),255);
167+end;
168+```
169+
170+Les intensités rouge et bleue sont définies avec un cycle des positions x et y.
171+
172+Enfin, ajoutez une rotation :
173+
174+``` pascal
175+ affine := TBGRAAffineScannerTransform.Create(grad);
176+ affine.Scale(6,4);
177+ affine.RotateDeg(-30);
178+ affine.Translate(ClientWidth/2, ClientHeight/2);
179+```
180+
181+<figure>
182+<img src="BGRATutorial11d.png" title="BGRATutorial11d.png" />
183+<figcaption>BGRATutorial11d.png</figcaption>
184+</figure>
185+
186+[[BGRABitmap tutorial 10/fr|Tutoriel précédent (plaquage de texture)]] [[BGRABitmap tutorial 12/fr|Tutoriel suivant (fonctions texte)]]
187+
188+---
189+*From the Free Pascal wiki, page "BGRABitmap tutorial 11/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