BGRABitmap tutorial 4/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 direkt auf die Pixel zugreifen 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		### Fügen Sie einen Zeichen-Handler hinzu
8	8
9	9		Im Objektinspektor fügen Sie einen OnPaint-Handler hinzu und schreiben Sie:
10	10
11	11		``` pascal
12	12		procedure TForm1.FormPaint(Sender: TObject);
13	13		var x,y: integer;
14	14		p: PBGRAPixel;
15	15		image: TBGRABitmap;
16	16		begin
17	17		image := TBGRABitmap.Create(ClientWidth,ClientHeight);
18	18
19	19		for y := 0 to image.Height-1 do
20	20		begin
21	21		p := image.Scanline[y];
22	22		for x := 0 to image.Width-1 do
23	23		begin
24	24		p^.red := x*256 div image.Width;
25	25		p^.green := y*256 div image.Height;
26	26		p^.blue := 0;
27	27		p^.alpha := 255;
28	28		inc(p);
29	29		end;
30	30		end;
31	31		image.InvalidateBitmap; // geändert durch direkten Zugriff
32	32
33	33		image.Draw(Canvas,0,0,True);
34	34		image.free;
35	35		end;
36	36		```
37	37
38	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	39
40	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	41
42	42		``` pascal
43	43		p^.red := x*256 div image.Width;
44	44		```
45	45
46	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	47
48	48		### Starten Sie das Programm
49	49
50	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	51
52		-	~~<figure>~~
53		-	~~<img src="BGRATutorial4.png" title="BGRATutorial4.png" />~~
54		-	~~<figcaption>BGRATutorial4.png</figcaption>~~
55		-	~~</figure>~~
	52	+	![](/wiki-images/8/8b/BGRATutorial4.png)
56	53
57	54		### Verwendung des HSLA Farbraumes
58	55
59	56		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	57
61	58		``` pascal
62	59		procedure TForm1.FormPaint(Sender: TObject);
63	60		var x,y: integer;
64	61		p: PBGRAPixel;
65	62		image: TBGRABitmap;
66	63		hsla: THSLAPixel;
67	64		begin
68	65		image := TBGRABitmap.Create(ClientWidth,ClientHeight);
69	66		hsla.lightness := 32768;
70	67		hsla.alpha := 65535;
71	68		for y := 0 to image.Height-1 do
72	69		begin
73	70		p := image.Scanline[y];
74	71		hsla.saturation := y*65536 div image.Height;
75	72		for x := 0 to image.Width-1 do
76	73		begin
77	74		hsla.hue := x*65536 div image.Width;
78	75		p^:= HSLAToBGRA(hsla);
79	76		inc(p);
80	77		end;
81	78		end;
82	79		image.InvalidateBitmap; // geändert durch direkten Zugriff
83	80
84	81		image.Draw(Canvas,0,0,True);
85	82		image.free;
86	83		end;
87	84		```
88	85
89		-	~~<figure>~~
90		-	~~<img src="BGRATutorial4b.png" title="BGRATutorial4b.png" />~~
91		-	~~<figcaption>BGRATutorial4b.png</figcaption>~~
92		-	~~</figure>~~
	86	+	![](/wiki-images/1/1b/BGRATutorial4b.png)
93	87
94	88		#### Farbkorrektur
95	89
96	90		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	91
98	92		``` pascal
99	93		hsla.hue := GtoH(x*65536 div image.Width);
100	94		```
101	95
102	96		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	97
104	98		Der Code wird einfach zu:
105	99
106	100		``` pascal
107	101		procedure TForm1.FormPaint(Sender: TObject);
108	102		var x,y: integer;
109	103		p: PBGRAPixel;
110	104		image: TBGRABitmap;
111	105		hsla: THSLAPixel;
112	106		begin
113	107		image := TBGRABitmap.Create(ClientWidth,ClientHeight);
114	108		hsla.lightness := 32768;
115	109		hsla.alpha := 65535;
116	110		for y := 0 to image.Height-1 do
117	111		begin
118	112		p := image.Scanline[y];
119	113		hsla.saturation := y*65536 div image.Height;
120	114		for x := 0 to image.Width-1 do
121	115		begin
122	116		hsla.hue := x*65536 div image.Width;
123	117		p^:= GSBAToBGRA(hsla);
124	118		inc(p);
125	119		end;
126	120		end;
127	121		image.InvalidateBitmap; // changed by direct access
128	122
129	123		image.Draw(Canvas,0,0,True);
130	124		image.free;
131	125		end;
132	126		```
133	127
134	128		Achten Sie darauf, den Typ THSLAPixel einzusetzen, unabhängig von der Korrektur des Farbmodells.
135	129
136	130		### Starten Sie das Programm
137	131
138	132		Mit voller Farbkorrektur ist der Farbverlauf progressiver, und ähnelt dem, den Sie mit dem Lab-Farbmodell erhalten würden.
139	133
140		-	~~<figure>~~
141		-	~~<img src="BGRATutorial4c.png" title="BGRATutorial4c.png" />~~
142		-	~~<figcaption>BGRATutorial4c.png</figcaption>~~
143		-	~~</figure>~~
	134	+	![](/wiki-images/a/a6/BGRATutorial4c.png)
144	135
145	136		[[BGRABitmap tutorial 3/de\|Voriges Tutorial (Zeichnen mit der Maus)]] \\| [[BGRABitmap tutorial 5/de\|Nächstes Tutorial (Ebenen und Masken)]]
146	137
147	138		---
148	139		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