Sign in Join
Wiki copytemporary

BGRABitmap tutorial 5/de: what changed

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

OldNewLine
11Dieses Tutorial zeigt, wie Sie mit Ebenen arbeiten können.
22
33### Erzeugen Sie ein neues Projekt
44
55Erzeugen Sie ein neues Projekt und fügen Sie eine Referenz auf [[BGRABitmap/de|BGRABitmap]] hinzu, genau so wie im [[BGRABitmap tutorial/de|ersten Tutorial]].
66
77### Über Masken
88
99Eine 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.
1010
11-<figure>
12-<img src="BGRATutorial5d.png" title="BGRATutorial5d.png" />
13-<figcaption>BGRATutorial5d.png</figcaption>
14-</figure>
11+![](/wiki-images/0/05/BGRATutorial5d.png)
1512
1613In diesem Beispiel ist das Bild links oben, die Maske rechts oben und das Ergebnis nach Anwendung der Maske links unten.
1714
1815Der Code in OnPaint :
1916
2017``` pascal
2118var temp,tex,mask: TBGRABitmap;
2219begin
2320 temp:= TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
2421
2522 //Laden und Skalieren der Textur
2623 tex := TBGRABitmap.Create('texture.png');
2724 BGRAReplace(tex,tex.Resample(128,80));
2825
2926 //zeige das Bild in der linken, oberen Ecke
3027 temp.PutImage(10,10,tex,dmDrawWithTransparency);
3128
3229 //erzeuge eine Maske mit einer Ellipse und einem Rechteck
3330 mask := TBGRABitmap.Create(128,80,BGRABlack);
3431 mask.FillEllipseAntialias(40,40,30,30,BGRAWhite);
3532 mask.FillRectAntialias(60,40,100,70,BGRAWhite);
3633
3734 //zeige die Maske in der rechten, oberen Ecke
3835 temp.PutImage(150,10,mask,dmDrawWithTransparency);
3936
4037 //wende die Maske auf das Bild an
4138 tex.ApplyMask(mask);
4239
4340 //zeige das Ergebnisbild in der linken, unteren Ecke
4441 temp.PutImage(10,100,tex,dmDrawWithTransparency);
4542
4643 mask.Free;
4744 tex.Free;
4845
4946 //zeige alles auf dem Bildschirm an
5047 image.Draw(Canvas,0,0,True);
5148 image.Free;
5249end;
5350```
5451
5552### Entfernen von Teilen des Bildes
5653
5754Einige 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.
5855
59-<figure>
60-<img src="BGRATutorial5e.png" title="BGRATutorial5e.png" />
61-<figcaption>BGRATutorial5e.png</figcaption>
62-</figure>
56+![](/wiki-images/6/62/BGRATutorial5e.png)
6357
6458Hier wird links eine Ellipse entfernt mit einem Alpha-Parameter von 255. Rechts wird eine weitere Ellipse entfernt mit einem Alpha-Parameter von 128.
6559
6660Der Code in OnPaint :
6761
6862``` pascal
6963var image,tex: TBGRABitmap;
7064begin
7165 image := TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
7266
7367 //Laden und Skalieren der Textur
7468 tex := TBGRABitmap.Create('texture.png');
7569 BGRAReplace(tex,tex.Resample(128,80));
7670
7771 //zeige das Bild
7872 image.PutImage(10,10,tex,dmDrawWithTransparency);
7973
8074 //entferne die Teile
8175 tex.EraseEllipseAntialias(40,40,30,30,255);
8276 tex.EraseEllipseAntialias(80,40,30,30,128);
8377
8478 //zeige das Ergebnis
8579 image.PutImage(10,100,tex,dmDrawWithTransparency);
8680
8781 tex.Free;
8882
8983 //zeige alles auf dem Bildschirm an
9084 image.Draw(Canvas,0,0,True);
9185 image.Free;
9286end;
9387```
9488
9589### Fügen Sie einen Zeichen-Handler hinzu
9690
9791Im Objektinspektor fügen Sie einen OnPaint-Handler hinzu und schreiben Sie:
9892
9993``` pascal
10094procedure TForm1.FormPaint(Sender: TObject);
10195var image: TBGRABitmap;
10296 size: single;
10397
10498 procedure DrawMoon;
10599 var layer: TBGRABitmap;
106100 begin
107101 layer := TBGRABitmap.Create(image.Width,image.Height);
108102 layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
109103 layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
110104 image.PutImage(0,0,layer,dmDrawWithTransparency);
111105 layer.Free;
112106 end;
113107
114108begin
115109 image := TBGRABitmap.Create(ClientWidth,ClientHeight);
116110
117111 //Berechne den verfügbaren Platz in beide Richtungen
118112 if image.Height < image.Width then
119113 size := image.Height
120114 else
121115 size := image.Width;
122116
123117 image.GradientFill(0,0,image.Width,image.Height,
124118 BGRA(128,192,255),BGRA(0,0,255),
125119 gtLinear,PointF(0,0),PointF(0,image.Height),
126120 dmSet);
127121
128122 DrawMoon;
129123
130124 image.Draw(Canvas,0,0,True);
131125 image.free;
132126end;
133127```
134128
135129Die Prozedur erzeugt ein Bild und füllt es mit einem blauen Farbverlauf. Dies ist die Hintergrundebene.
136130
137131Die 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.
138132
139133### Starten Sie das Programm
140134
141135Sie sollten einen Mond vor einem blauen Himmel sehen. Wenn Sie die Größe des Formulars ändern, wird auch der Gradient umgehend angepasst.
142136
143-<figure>
144-<img src="Tutorial5a.png" title="Tutorial5a.png" />
145-<figcaption>Tutorial5a.png</figcaption>
146-</figure>
137+![](/wiki-images/1/15/Tutorial5a.png)
147138
148139### Fügen Sie eine weitere Ebene hinzu mit einer Sonne
149140
150141Im OnPaint-Ereignis fügen Sie folgende Unterprozedur ein:
151142
152143``` pascal
153144 procedure DrawSun;
154145 var layer,mask: TBGRABitmap;
155146 begin
156147 layer := TBGRABitmap.Create(image.Width,image.Height);
157148 layer.GradientFill(0,0,layer.Width,layer.Height,
158149 BGRA(255,255,0),BGRA(255,0,0),
159150 gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
160151 dmSet);
161152 mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
162153 mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
163154 layer.ApplyMask(mask);
164155 mask.Free;
165156 image.PutImage(0,0,layer,dmDrawWithTransparency);
166157 layer.Free;
167158 end;
168159```
169160
170161Diese 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.
171162
172163Rufen Sie diese Prozedur so auf, dass die Sonne nach dem Mond gezeichnet wird.
173164
174165### Starten Sie das Programm
175166
176167Sie 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.
177168
178-<figure>
179-<img src="BGRATutorial5b.png" title="BGRATutorial5b.png" />
180-<figcaption>BGRATutorial5b.png</figcaption>
181-</figure>
169+![](/wiki-images/9/9b/BGRATutorial5b.png)
182170
183171### Fügen Sie eine Beleuchtungsebene hinzu
184172
185173Ergänzen Sie die folgende Unterprozedur im OnPaint-Ereignis:
186174
187175``` pascal
188176 procedure ApplyLight;
189177 var layer: TBGRABitmap;
190178 begin
191179 layer := TBGRABitmap.Create(image.Width,image.Height);
192180 layer.GradientFill(0,0,layer.Width,layer.Height,
193181 BGRA(255,255,255),BGRA(64,64,64),
194182 gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
195183 dmSet);
196184 image.BlendImage(0,0,layer,boMultiply);
197185 layer.Free;
198186 end;
199187```
200188
201189Diese Prozedur zeichnet eine Ebene mit einem weißen, radialen Farbverlauf. Sie wird mit dem Bild multipliziert.
202190
203191### Resultierender Code
204192
205193``` pascal
206194procedure TForm1.FormPaint(Sender: TObject);
207195var image: TBGRABitmap;
208196 size: single;
209197
210198 procedure DrawMoon;
211199 var layer: TBGRABitmap;
212200 begin
213201 layer := TBGRABitmap.Create(image.Width,image.Height);
214202 layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
215203 layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
216204 image.PutImage(0,0,layer,dmDrawWithTransparency);
217205 layer.Free;
218206 end;
219207
220208 procedure DrawSun;
221209 var layer,mask: TBGRABitmap;
222210 begin
223211 layer := TBGRABitmap.Create(image.Width,image.Height);
224212 layer.GradientFill(0,0,layer.Width,layer.Height,
225213 BGRA(255,255,0),BGRA(255,0,0),
226214 gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
227215 dmSet);
228216 mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
229217 mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
230218 layer.ApplyMask(mask);
231219 mask.Free;
232220 image.PutImage(0,0,layer,dmDrawWithTransparency);
233221 layer.Free;
234222 end;
235223
236224 procedure ApplyLight;
237225 var layer: TBGRABitmap;
238226 begin
239227 layer := TBGRABitmap.Create(image.Width,image.Height);
240228 layer.GradientFill(0,0,layer.Width,layer.Height,
241229 BGRA(255,255,255),BGRA(64,64,64),
242230 gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
243231 dmSet);
244232 image.BlendImage(0,0,layer,boMultiply);
245233 layer.Free;
246234 end;
247235
248236begin
249237 image := TBGRABitmap.Create(ClientWidth,ClientHeight);
250238
251239 if image.Height < image.Width then
252240 size := image.Height
253241 else
254242 size := image.Width;
255243
256244 image.GradientFill(0,0,image.Width,image.Height,
257245 BGRA(128,192,255),BGRA(0,0,255),
258246 gtLinear,PointF(0,0),PointF(0,image.Height),
259247 dmSet);
260248
261249 DrawMoon;
262250 DrawSun;
263251 ApplyLight;
264252
265253 image.Draw(Canvas,0,0,True);
266254 image.free;
267255end;
268256```
269257
270258### Starten Sie das Programm
271259
272260Sie 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.
273261
274-<figure>
275-<img src="Tutorial5c.png" title="Tutorial5c.png" />
276-<figcaption>Tutorial5c.png</figcaption>
277-</figure>
262+![](/wiki-images/f/f3/Tutorial5c.png)
278263
279264[[BGRABitmap tutorial 4/de|Voriges Tutorial (Direkter Zugriff auf die Pixel)]] \| [[BGRABitmap tutorial 6/de|Nächstes Tutorial (Linienarten)]]
280265
281266---
282267*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