BGRABitmap tutorial 4/de: what changed

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

Title: BGRABitmap tutorial 4/de

New		Line
1	+	Dieses Tutorial zeigt, wie Sie direkt auf die Pixel zugreifen 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	+	### Fügen Sie einen Zeichen-Handler hinzu
8	+
9	+	Im Objektinspektor fügen Sie einen OnPaint-Handler hinzu und schreiben Sie:
10	+
11	+	``` pascal
12	+	procedure TForm1.FormPaint(Sender: TObject);
13	+	var x,y: integer;
14	+	p: PBGRAPixel;
15	+	image: TBGRABitmap;
16	+	begin
17	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
18	+
19	+	for y := 0 to image.Height-1 do
20	+	begin
21	+	p := image.Scanline[y];
22	+	for x := 0 to image.Width-1 do
23	+	begin
24	+	p^.red := x*256 div image.Width;
25	+	p^.green := y*256 div image.Height;
26	+	p^.blue := 0;
27	+	p^.alpha := 255;
28	+	inc(p);
29	+	end;
30	+	end;
31	+	image.InvalidateBitmap; // geändert durch direkten Zugriff
32	+
33	+	image.Draw(Canvas,0,0,True);
34	+	image.free;
35	+	end;
36	+	```
37	+
38	+	Diese Prozedur erzeugt eine Bitmap von der selben Größe wie der verfügbare Clientspace. Dann greifen die Schleifen direkt auf die Pixeldaten zu und erstellen einen bidirektionalen Farbverlauf. Zuletzt wird das Bild gezeichnet und der Speicher freigegeben.
39	+
40	+	Beim Zugriff auf die Bitmapdaten verwenden Sie entweder Data (wenn es nicht auf die Reihenfolge der Zeilen ankommt) oder Scanline (greift auf eine bestimmte Zeile zu). Innerhalb einer Zeile sind die Pixel von links nach rechts angeordnet. Dadurch ist jede Komponente definiert. Zum Beispiel:
41	+
42	+	``` pascal
43	+	p^.red := x*256 div image.Width;
44	+	```
45	+
46	+	Definiert einen Rotanteil, der von 0 (links) bis 255 (rechts) reicht. Der Maximalwert von 'image.Width' wird nie durch x erreicht und somit erreicht auch der Rotanteil nie 256.
47	+
48	+	### Starten Sie das Programm
49	+
50	+	Sie sollten ein Formular mit einem Farbverlauf sehen. Die Ecken sind schwarz, rot, gelb und grün. Wenn Sie die Größe des Formulars ändern, wird auch der Gradient umgehend angepasst.
51	+
52	+	<figure>
53	+	<img src="BGRATutorial4.png" title="BGRATutorial4.png" />
54	+	<figcaption>BGRATutorial4.png</figcaption>
55	+	</figure>
56	+
57	+	### Verwendung des HSLA Farbraumes
58	+
59	+	Sie können auch die HSLA-Farbskala ansprechen (Hue=Farbton, Saturation=Sättigung, Lightness=Helligkeit). Dazu deklarieren Sie ein THSLAPixel. Seine Werte reichen von 0 bis 65535. Um es in ein Standard-RGB-Pixel zu konvertieren, verwenden Sie die Routine 'HSLAToBGRA'.
60	+
61	+	``` pascal
62	+	procedure TForm1.FormPaint(Sender: TObject);
63	+	var x,y: integer;
64	+	p: PBGRAPixel;
65	+	image: TBGRABitmap;
66	+	hsla: THSLAPixel;
67	+	begin
68	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
69	+	hsla.lightness := 32768;
70	+	hsla.alpha := 65535;
71	+	for y := 0 to image.Height-1 do
72	+	begin
73	+	p := image.Scanline[y];
74	+	hsla.saturation := y*65536 div image.Height;
75	+	for x := 0 to image.Width-1 do
76	+	begin
77	+	hsla.hue := x*65536 div image.Width;
78	+	p^:= HSLAToBGRA(hsla);
79	+	inc(p);
80	+	end;
81	+	end;
82	+	image.InvalidateBitmap; // geändert durch direkten Zugriff
83	+
84	+	image.Draw(Canvas,0,0,True);
85	+	image.free;
86	+	end;
87	+	```
88	+
89	+	<figure>
90	+	<img src="BGRATutorial4b.png" title="BGRATutorial4b.png" />
91	+	<figcaption>BGRATutorial4b.png</figcaption>
92	+	</figure>
93	+
94	+	#### Farbkorrektur
95	+
96	+	Die HSLA-Farben haben eine Gamma-Korrektur, aber es gibt auch andere mögliche Korrekturen. Beispielsweise steht H für "Hue" (= Farbton). In der klassischen Version des HSLA-Modells ist jeder Bereich zwischen den Primärfarben (rot/grün/blau) in 120 Grad unterteilt, wodurch sich 21845 Farben in THSLAPixel ergeben. Allerdings können wir die Farbunterschiede in diesen verschiedenen Bereichen nicht gleichermaßen empfinden. Die Funktionen HtoG und GtoH aaktivieren bzw. deaktivieren eine Korrektur, wodurch im G-Farbbereich die Teilbereiche nicht mehr dieselbe Größe haben. Um einen korrigierten Farbton zu erhalten, schreiben Sie:
97	+
98	+	``` pascal
99	+	hsla.hue := GtoH(x*65536 div image.Width);
100	+	```
101	+
102	+	Beachten Sie, dass der Bereich der Orangetöne breiter wird. Zuletzt entspricht im HSLA-Modell die Helligkeit L (lightness) nicht der empfundenen Helligkeit. Anstatt nur den Farbton zu korrigieren, können Sie GSBAToBGRA und BGRAToGSBA anstelle von HLSAToBGRA und BGRAToHSLA verwenden. Das G bedeutet hier, dass der Farbton automatisch korrigiert wird und das B (Brightness) steht für die empfundene Helligkeit (manchmal auch Beleuchtung genannt), die hier ebenfalls Berücksichtigung findet. So müssen Sie nicht ausdrücklich GtoH und HtoG aufrufen.
103	+
104	+	Der Code wird einfach zu:
105	+
106	+	``` pascal
107	+	procedure TForm1.FormPaint(Sender: TObject);
108	+	var x,y: integer;
109	+	p: PBGRAPixel;
110	+	image: TBGRABitmap;
111	+	hsla: THSLAPixel;
112	+	begin
113	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
114	+	hsla.lightness := 32768;
115	+	hsla.alpha := 65535;
116	+	for y := 0 to image.Height-1 do
117	+	begin
118	+	p := image.Scanline[y];
119	+	hsla.saturation := y*65536 div image.Height;
120	+	for x := 0 to image.Width-1 do
121	+	begin
122	+	hsla.hue := x*65536 div image.Width;
123	+	p^:= GSBAToBGRA(hsla);
124	+	inc(p);
125	+	end;
126	+	end;
127	+	image.InvalidateBitmap; // changed by direct access
128	+
129	+	image.Draw(Canvas,0,0,True);
130	+	image.free;
131	+	end;
132	+	```
133	+
134	+	Achten Sie darauf, den Typ THSLAPixel einzusetzen, unabhängig von der Korrektur des Farbmodells.
135	+
136	+	### Starten Sie das Programm
137	+
138	+	Mit voller Farbkorrektur ist der Farbverlauf progressiver, und ähnelt dem, den Sie mit dem Lab-Farbmodell erhalten würden.
139	+
140	+	<figure>
141	+	<img src="BGRATutorial4c.png" title="BGRATutorial4c.png" />
142	+	<figcaption>BGRATutorial4c.png</figcaption>
143	+	</figure>
144	+
145	+	[[BGRABitmap tutorial 3/de\|Voriges Tutorial (Zeichnen mit der Maus)]] \\| [[BGRABitmap tutorial 5/de\|Nächstes Tutorial (Ebenen und Masken)]]
146	+
147	+	---
148	+	From the Free Pascal wiki, page "BGRABitmap tutorial 4/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