BGRABitmap tutorial 5/de: what changed

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

Title: BGRABitmap tutorial 5/de

New		Line
1	+	Dieses Tutorial zeigt, wie Sie mit Ebenen arbeiten 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	+	### Über Masken
8	+
9	+	Eine Maske ist ein Graustufenbild. Wenn diese Maske auf ein Bild angewendet wird, werden diejenigen Teile des Bildes, die sich mit den schwarzen Teilen der Maske überschneiden entfernt und werden transparent. Teile des Bildes, die sich mit den weißen Teilen der Maske überschneiden, bleiben hingegen erhalten. Mit anderen Worten: die Maske ist wie ein Alphakanal der die Opazität bestimmt. Ist der Maskenwert null wird das Bild transparent und bei einem Maskenwert von 255 wird es undurchsichtig.
10	+
11	+	<figure>
12	+	<img src="BGRATutorial5d.png" title="BGRATutorial5d.png" />
13	+	<figcaption>BGRATutorial5d.png</figcaption>
14	+	</figure>
15	+
16	+	In diesem Beispiel ist das Bild links oben, die Maske rechts oben und das Ergebnis nach Anwendung der Maske links unten.
17	+
18	+	Der Code in OnPaint :
19	+
20	+	``` pascal
21	+	var temp,tex,mask: TBGRABitmap;
22	+	begin
23	+	temp:= TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
24	+
25	+	//Laden und Skalieren der Textur
26	+	tex := TBGRABitmap.Create('texture.png');
27	+	BGRAReplace(tex,tex.Resample(128,80));
28	+
29	+	//zeige das Bild in der linken, oberen Ecke
30	+	temp.PutImage(10,10,tex,dmDrawWithTransparency);
31	+
32	+	//erzeuge eine Maske mit einer Ellipse und einem Rechteck
33	+	mask := TBGRABitmap.Create(128,80,BGRABlack);
34	+	mask.FillEllipseAntialias(40,40,30,30,BGRAWhite);
35	+	mask.FillRectAntialias(60,40,100,70,BGRAWhite);
36	+
37	+	//zeige die Maske in der rechten, oberen Ecke
38	+	temp.PutImage(150,10,mask,dmDrawWithTransparency);
39	+
40	+	//wende die Maske auf das Bild an
41	+	tex.ApplyMask(mask);
42	+
43	+	//zeige das Ergebnisbild in der linken, unteren Ecke
44	+	temp.PutImage(10,100,tex,dmDrawWithTransparency);
45	+
46	+	mask.Free;
47	+	tex.Free;
48	+
49	+	//zeige alles auf dem Bildschirm an
50	+	image.Draw(Canvas,0,0,True);
51	+	image.Free;
52	+	end;
53	+	```
54	+
55	+	### Entfernen von Teilen des Bildes
56	+
57	+	Einige Funktionen erlauben es, eine Ellipse zu entfernen, ein Rechteck, etc. Das bedeutet, dass der Teil des Bildes transparent wird. So ist es möglich, ein Loch in ein Bild zu zeichnen. Ist der Alpha-Parameter 255, wird das Loch vollständig transparent. Wenn nicht, dann ist das Loch semi-transparent.
58	+
59	+	<figure>
60	+	<img src="BGRATutorial5e.png" title="BGRATutorial5e.png" />
61	+	<figcaption>BGRATutorial5e.png</figcaption>
62	+	</figure>
63	+
64	+	Hier wird links eine Ellipse entfernt mit einem Alpha-Parameter von 255. Rechts wird eine weitere Ellipse entfernt mit einem Alpha-Parameter von 128.
65	+
66	+	Der Code in OnPaint :
67	+
68	+	``` pascal
69	+	var image,tex: TBGRABitmap;
70	+	begin
71	+	image := TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
72	+
73	+	//Laden und Skalieren der Textur
74	+	tex := TBGRABitmap.Create('texture.png');
75	+	BGRAReplace(tex,tex.Resample(128,80));
76	+
77	+	//zeige das Bild
78	+	image.PutImage(10,10,tex,dmDrawWithTransparency);
79	+
80	+	//entferne die Teile
81	+	tex.EraseEllipseAntialias(40,40,30,30,255);
82	+	tex.EraseEllipseAntialias(80,40,30,30,128);
83	+
84	+	//zeige das Ergebnis
85	+	image.PutImage(10,100,tex,dmDrawWithTransparency);
86	+
87	+	tex.Free;
88	+
89	+	//zeige alles auf dem Bildschirm an
90	+	image.Draw(Canvas,0,0,True);
91	+	image.Free;
92	+	end;
93	+	```
94	+
95	+	### Fügen Sie einen Zeichen-Handler hinzu
96	+
97	+	Im Objektinspektor fügen Sie einen OnPaint-Handler hinzu und schreiben Sie:
98	+
99	+	``` pascal
100	+	procedure TForm1.FormPaint(Sender: TObject);
101	+	var image: TBGRABitmap;
102	+	size: single;
103	+
104	+	procedure DrawMoon;
105	+	var layer: TBGRABitmap;
106	+	begin
107	+	layer := TBGRABitmap.Create(image.Width,image.Height);
108	+	layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size0.4,size0.4,BGRA(224,224,224,128));
109	+	layer.EraseEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.3,size*0.3,255);
110	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
111	+	layer.Free;
112	+	end;
113	+
114	+	begin
115	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
116	+
117	+	//Berechne den verfügbaren Platz in beide Richtungen
118	+	if image.Height < image.Width then
119	+	size := image.Height
120	+	else
121	+	size := image.Width;
122	+
123	+	image.GradientFill(0,0,image.Width,image.Height,
124	+	BGRA(128,192,255),BGRA(0,0,255),
125	+	gtLinear,PointF(0,0),PointF(0,image.Height),
126	+	dmSet);
127	+
128	+	DrawMoon;
129	+
130	+	image.Draw(Canvas,0,0,True);
131	+	image.free;
132	+	end;
133	+	```
134	+
135	+	Die Prozedur erzeugt ein Bild und füllt es mit einem blauen Farbverlauf. Dies ist die Hintergrundebene.
136	+
137	+	Die Prozedur 'DrawMoon' erzeugt eine Ebene und zeichnet einen Mond darauf. Zuerst wird eine weiße Scheibe gezeichnet, dann eine kleinere Scheibe subtrahiert. Zuletzt wird diese Ebene mit dem Hintergrund verschmolzen.
138	+
139	+	### Starten Sie das Programm
140	+
141	+	Sie sollten einen Mond vor einem blauen Himmel sehen. Wenn Sie die Größe des Formulars ändern, wird auch der Gradient umgehend angepasst.
142	+
143	+	<figure>
144	+	<img src="Tutorial5a.png" title="Tutorial5a.png" />
145	+	<figcaption>Tutorial5a.png</figcaption>
146	+	</figure>
147	+
148	+	### Fügen Sie eine weitere Ebene hinzu mit einer Sonne
149	+
150	+	Im OnPaint-Ereignis fügen Sie folgende Unterprozedur ein:
151	+
152	+	``` pascal
153	+	procedure DrawSun;
154	+	var layer,mask: TBGRABitmap;
155	+	begin
156	+	layer := TBGRABitmap.Create(image.Width,image.Height);
157	+	layer.GradientFill(0,0,layer.Width,layer.Height,
158	+	BGRA(255,255,0),BGRA(255,0,0),
159	+	gtRadial,PointF(layer.Width/2,layer.Height/2-size0.15),PointF(layer.Width/2+size0.45,layer.Height/2-size*0.15),
160	+	dmSet);
161	+	mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
162	+	mask.FillEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.25,size*0.25,BGRAWhite);
163	+	layer.ApplyMask(mask);
164	+	mask.Free;
165	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
166	+	layer.Free;
167	+	end;
168	+	```
169	+
170	+	Diese Prozedur erzeugt einen radialen Farbverlauf von rot zu orange und wendet darauf eine kreisförmige Maske an. Dies ergibt die farbige Scheibe. Zuletzt wird diese Ebene mit dem Hintergrund verschmolzen.
171	+
172	+	Rufen Sie diese Prozedur so auf, dass die Sonne nach dem Mond gezeichnet wird.
173	+
174	+	### Starten Sie das Programm
175	+
176	+	Sie sollten eine Sonne und einen Mond vor einem blauen Himmel sehen. Wenn Sie die Größe des Formulars ändern, wird auch der Gradient umgehend angepasst.
177	+
178	+	<figure>
179	+	<img src="BGRATutorial5b.png" title="BGRATutorial5b.png" />
180	+	<figcaption>BGRATutorial5b.png</figcaption>
181	+	</figure>
182	+
183	+	### Fügen Sie eine Beleuchtungsebene hinzu
184	+
185	+	Ergänzen Sie die folgende Unterprozedur im OnPaint-Ereignis:
186	+
187	+	``` pascal
188	+	procedure ApplyLight;
189	+	var layer: TBGRABitmap;
190	+	begin
191	+	layer := TBGRABitmap.Create(image.Width,image.Height);
192	+	layer.GradientFill(0,0,layer.Width,layer.Height,
193	+	BGRA(255,255,255),BGRA(64,64,64),
194	+	gtRadial,PointF(layer.Width5/6,layer.Height/2),PointF(layer.Width1/3,layer.Height/4),
195	+	dmSet);
196	+	image.BlendImage(0,0,layer,boMultiply);
197	+	layer.Free;
198	+	end;
199	+	```
200	+
201	+	Diese Prozedur zeichnet eine Ebene mit einem weißen, radialen Farbverlauf. Sie wird mit dem Bild multipliziert.
202	+
203	+	### Resultierender Code
204	+
205	+	``` pascal
206	+	procedure TForm1.FormPaint(Sender: TObject);
207	+	var image: TBGRABitmap;
208	+	size: single;
209	+
210	+	procedure DrawMoon;
211	+	var layer: TBGRABitmap;
212	+	begin
213	+	layer := TBGRABitmap.Create(image.Width,image.Height);
214	+	layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size0.4,size0.4,BGRA(224,224,224,128));
215	+	layer.EraseEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.3,size*0.3,255);
216	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
217	+	layer.Free;
218	+	end;
219	+
220	+	procedure DrawSun;
221	+	var layer,mask: TBGRABitmap;
222	+	begin
223	+	layer := TBGRABitmap.Create(image.Width,image.Height);
224	+	layer.GradientFill(0,0,layer.Width,layer.Height,
225	+	BGRA(255,255,0),BGRA(255,0,0),
226	+	gtRadial,PointF(layer.Width/2,layer.Height/2-size0.15),PointF(layer.Width/2+size0.45,layer.Height/2-size*0.15),
227	+	dmSet);
228	+	mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
229	+	mask.FillEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.25,size*0.25,BGRAWhite);
230	+	layer.ApplyMask(mask);
231	+	mask.Free;
232	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
233	+	layer.Free;
234	+	end;
235	+
236	+	procedure ApplyLight;
237	+	var layer: TBGRABitmap;
238	+	begin
239	+	layer := TBGRABitmap.Create(image.Width,image.Height);
240	+	layer.GradientFill(0,0,layer.Width,layer.Height,
241	+	BGRA(255,255,255),BGRA(64,64,64),
242	+	gtRadial,PointF(layer.Width5/6,layer.Height/2),PointF(layer.Width1/3,layer.Height/4),
243	+	dmSet);
244	+	image.BlendImage(0,0,layer,boMultiply);
245	+	layer.Free;
246	+	end;
247	+
248	+	begin
249	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
250	+
251	+	if image.Height < image.Width then
252	+	size := image.Height
253	+	else
254	+	size := image.Width;
255	+
256	+	image.GradientFill(0,0,image.Width,image.Height,
257	+	BGRA(128,192,255),BGRA(0,0,255),
258	+	gtLinear,PointF(0,0),PointF(0,image.Height),
259	+	dmSet);
260	+
261	+	DrawMoon;
262	+	DrawSun;
263	+	ApplyLight;
264	+
265	+	image.Draw(Canvas,0,0,True);
266	+	image.free;
267	+	end;
268	+	```
269	+
270	+	### Starten Sie das Programm
271	+
272	+	Sie sollten eine Sonne und einen Mond vor einem blauen Himmel und mit einem Lichteffekt sehen. Wenn Sie die Größe des Formulars ändern, wird auch der Gradient umgehend angepasst.
273	+
274	+	<figure>
275	+	<img src="Tutorial5c.png" title="Tutorial5c.png" />
276	+	<figcaption>Tutorial5c.png</figcaption>
277	+	</figure>
278	+
279	+	[[BGRABitmap tutorial 4/de\|Voriges Tutorial (Direkter Zugriff auf die Pixel)]] \\| [[BGRABitmap tutorial 6/de\|Nächstes Tutorial (Linienarten)]]
280	+
281	+	---
282	+	From the Free Pascal wiki, page "BGRABitmap tutorial 5/de", as it stood on 2020-02-10 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