Sign in Join
Wiki copytemporary

BGRABitmap tutorial 11/de: what changed

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

Title: BGRABitmap tutorial 11/de

OldNewLine
1+Dieses Tutorial zeigt, wie Sie Transformationen kombinieren können.
2+
3+### Erzeugen Sie ein neues Projekt
4+
5+Erzeugen Sie ein neues Projekt und fügen Sie eine Referenz auf [[BGRABitmap/de|BGRABitmap]] hinzu, genau so wie im [[BGRABitmap tutorial/de|ersten Tutorial]].
6+
7+### Affine Transformation eines radialen Gradienten
8+
9+Hier wird eine affine Transformation auf einen Farbverlauf angewendet, so wie wir es auch mit Texturen gemacht haben:
10+
11+``` pascal
12+uses BGRAGradientScanner, BGRATransform;
13+
14+procedure TForm1.FormPaint(Sender: TObject);
15+var image: TBGRABitmap;
16+ grad: TBGRAGradientScanner;
17+ affine: TBGRAAffineScannerTransform;
18+begin
19+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
20+
21+ grad := TBGRAGradientScanner.Create(BGRA(0,0,255),BGRAWhite,gtRadial,PointF(0,0),PointF(1,0),True,True);
22+
23+ affine := TBGRAAffineScannerTransform.Create(grad);
24+ affine.Scale(150,80);
25+ affine.RotateDeg(-30);
26+ affine.Translate(ClientWidth/2, ClientHeight/2);
27+
28+ image.Fill(affine);
29+
30+ affine.free;
31+ grad.free;
32+
33+ image.Draw(Canvas,0,0,True);
34+ image.free;
35+end;
36+```
37+
38+Der zugrundeliegende Gradient ist radial, um den Ursprung (0,0) zentriert, mit dem Radius 1.
39+
40+Die affine Transformation macht folgendes:
41+
42+- streckt den Gradienten auf eine Größe von 150x80
43+- dreht um 30° im Uhrzeigersinn
44+- zentriert das Bild auf dem Formular
45+
46+Die Fill-Anweisung zeichnet das Ergebnis in das Bild.
47+
48+### Starten Sie das Programm
49+
50+Sie sollten einen blau-weißen, elliptischen Farbverlauf erhalten.
51+
52+<figure>
53+<img src="BGRATutorial11a.png" title="BGRATutorial11a.png" />
54+<figcaption>BGRATutorial11a.png</figcaption>
55+</figure>
56+
57+### Kombinieren mit einem Wirbel
58+
59+So können wir eine weitere Transformation hinzufügen:
60+
61+``` pascal
62+var image: TBGRABitmap;
63+ grad: TBGRAGradientScanner;
64+ affine: TBGRAAffineScannerTransform;
65+ twirl: TBGRATwirlScanner;
66+begin
67+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
68+
69+ grad := TBGRAGradientScanner.Create(BGRA(0,0,255),BGRAWhite,gtRadial,PointF(0,0),PointF(1,0),True,True);
70+
71+ affine := TBGRAAffineScannerTransform.Create(grad);
72+ affine.Scale(150,80);
73+ affine.RotateDeg(-30);
74+ affine.Translate(ClientWidth/2, ClientHeight/2);
75+
76+ twirl := TBGRATwirlScanner.Create(affine,Point(ClientWidth div 2, ClientHeight div 2),100);
77+ image.Fill(twirl);
78+ twirl.Free;
79+
80+ affine.free;
81+ grad.free;
82+
83+ image.Draw(Canvas,0,0,True);
84+ image.free;
85+end;
86+```
87+
88+Hier erzeugen wir einfach eine Wirbeltransformation, die auf die vorangegangene angewendet wird, und füllen damit das Bild.
89+
90+### Starten Sie das Programm
91+
92+Jetzt ist die Mitte des Gradienten verwirbelt.
93+
94+<figure>
95+<img src="BGRATutorial11b.png" title="BGRATutorial11b.png" />
96+<figcaption>BGRATutorial11b.png</figcaption>
97+</figure>
98+
99+### Verwenden eines eigenen Scanners
100+
101+Wir wollen unseren eigenen Gradientengenerator erzeugen. Hier ist ein Beispiel für einen mehrfachen Gradienten:
102+
103+``` pascal
104+type
105+ { TBGRAMultiplyScanner }
106+
107+ TBGRAMultiplyScanner = class(TBGRACustomScanner)
108+ function ScanAt(X, Y: Single): TBGRAPixel; override;
109+ end;
110+
111+{ TBGRAMultiplyScanner }
112+
113+function TBGRAMultiplyScanner.ScanAt(X, Y: Single): TBGRAPixel;
114+ function cycle512(value: integer): integer; inline;
115+ begin
116+ result := value and 511;
117+ if result >= 256 then result := 511-result;
118+ end;
119+
120+var
121+ mul: integer;
122+begin
123+ mul := cycle512(round(x*y));
124+ result := BGRA(mul,mul,mul,255);
125+end;
126+```
127+
128+Er wurde abgeleitet von TBGRACustomScanner für das Füllen, und die Funktion 'ScanAt' wurde überschrieben. Er berechnet das Produkt beider Koordinaten und durchläuft dann einen Zyklus von 512 (von 0 bis 255 und dann von 255 abwärts bis zu 0).
129+
130+Zeichnen wir das auf den Bildschirm mit einer einfachen affinen Transformation:
131+
132+``` pascal
133+var image: TBGRABitmap;
134+ grad: TBGRAMultiplyScanner;
135+ affine: TBGRAAffineScannerTransform;
136+begin
137+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
138+
139+ grad := TBGRAMultiplyScanner.Create;
140+ affine := TBGRAAffineScannerTransform.Create(grad);
141+ affine.Scale(6,4);
142+ affine.Translate(ClientWidth/2, ClientHeight/2);
143+ image.Fill(affine);
144+ affine.free;
145+ grad.free;
146+
147+ image.Draw(Canvas,0,0,True);
148+ image.free;
149+end;
150+```
151+
152+### Starten Sie das Programm
153+
154+Es sollte so aussehen:
155+
156+<figure>
157+<img src="BGRATutorial11c.png" title="BGRATutorial11c.png" />
158+<figcaption>BGRATutorial11c.png</figcaption>
159+</figure>
160+
161+### Machen Sie es schöner
162+
163+Geben Sie etwas Farbe hinzu, indem Sie die Prozedur 'ScanAt' des mehrfachen Gradienten modifizieren:
164+
165+``` pascal
166+var
167+ mul: integer;
168+begin
169+ mul := round(x*y);
170+ result := BGRA(cycle512(round(x*10)),cycle512(mul),cycle512(round(y*10)),255);
171+end;
172+```
173+
174+Die Intensitäten von Rot und Blau werden mit einem Zyklus der x und y Positionen gefüllt.
175+
176+Und dazu kommt noch eine Drehung:
177+
178+``` pascal
179+ affine := TBGRAAffineScannerTransform.Create(grad);
180+ affine.Scale(6,4);
181+ affine.RotateDeg(-30);
182+ affine.Translate(ClientWidth/2, ClientHeight/2);
183+```
184+
185+<figure>
186+<img src="BGRATutorial11d.png" title="BGRATutorial11d.png" />
187+<figcaption>BGRATutorial11d.png</figcaption>
188+</figure>
189+
190+[[BGRABitmap tutorial 10/de|Voriges Tutorial (Textur-Transformationen)]] \| [[BGRABitmap tutorial 12/de|Nächstes Tutorial (Textfunktionen)]]
191+
192+---
193+*From the Free Pascal wiki, page "BGRABitmap tutorial 11/de", 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