BGRABitmap tutorial 11/de: what changed

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

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