BGRABitmap tutorial 13/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 beschreibt das Koordinatensystem von BGRABitmap.
2	2
3	3		### Pixelkoordinaten
4	4
5	5		Die Routinen der Standardleinwand verwenden ganzzahlige Koordinaten. Dies ist ebenfalls so bei der Eigenschaft 'CanvasBGRA', welche die Funktionen der Standardleinwand emuliert, allerdings zusätzlich mit Antialiasing (AntialiasingMode), Alphablending (Eigenschaft 'Opacity' von Pen, Brush und Font) und Gammakorrektur.
6	6
7	7		Wenn wir uns nur auf die Integerkoordinaten beschränken ohne Antialiasing, dann bestimmen die Koordinaten eine Pixelposition, d.h. ein Quadrat. Wenn wir also eine Linie zeichnen von (0,0) nach (5,5), dann ist das oberste, linke Pixel auch das erste gezeichnete Pixel. Bei der Standardleinwand wird das letzte Pixel nicht gezeichnet, die Linie endet also bei (4,4).
8	8
9		-	~~<figure>~~
10		-	~~<img src="BGRATutorial13a.png" title="BGRATutorial13a.png" />~~
11		-	~~<figcaption>BGRATutorial13a.png</figcaption>~~
12		-	~~</figure>~~
	9	+	![](/wiki-images/a/a3/BGRATutorial13a.png)
13	10
14	11		Wenn wir eine Ellipse zeichnen, legt das umgebende Rechteck die Pixel fest, die wir zur Darstellung der Ellipse verwenden. Auch hier gilt, dass bei der Standardleinwand die unteren rechten Koordinaten von der Zeichnung ausgeschlossen sind, somit sind beim Füllen des Rechtecks (0,0)-(5,5) in Wirklichkeit nur die Pixel mit den Koordinaten von 0 bis 4 betroffen.
15	12
16	13		### Fließkommakoordinaten
17	14
18	15		Wenn wir jetzt mit dezimalen Werte arbeiten, geben die Koordinaten eine Position an, die irgendwo auf den Pixeln liegen kann. Der Wert Breite des Stiftes bedeutet eine wirkliche Distanz, nicht nur eine Anzahl von Pixeln. Was stellt (0.0,0.0) also dar?
19	16
20	17		#### Fließkommakoordinaten ab der oberen, linken Ecke
21	18
22	19		Es könnte beispielsweise die Distanz von der oberen, linken Ecke sein (-dies ist bei BGRABitmap aber nicht der Fall -). Dann würde diese Koordinate die obere, linke Ecke des ersten Pixels sein. Aber wenn wir das so betrachten, ist das Verhalten zwischen ganzzahligen und Fließkommakoordinaten leicht unterschiedlich. Genau, stellen Sie sich vor, wir zeichneten eine waagrechte Linie auf den Pixeln (0,1) bis (4,1). In Pixelkoordinaten wäre das die Linie (0,1)-(5,1) und die Breite wäre 1 Pixel. Nun wollen wir aber dieses Segment mit Fließkommakoordinaten definieren. Die linke Seite wäre bei 0.0, die rechte bei 5.0, das passt. Die obere Seite wäre bei 1.0 und die untere bei 2.0. Hier liegt das Problem. Die Mitte der Linie liegt bei der vertikalen Koordinate 1.5. Um also diese Linie zu zeichnen, sollten wir die Koordinaten (0.0,1.5)-(5.0,1.5) angeben.
23	20
24		-	~~<figure>~~
25		-	~~<img src="BGRATutorial13b.png" title="BGRATutorial13b.png" />~~
26		-	~~<figcaption>BGRATutorial13b.png</figcaption>~~
27		-	~~</figure>~~
	21	+	![](/wiki-images/1/18/BGRATutorial13b.png)
28	22
29	23		Tatsächlich würde jede Linie mit der Breite 1 Pixel bei ganzzahligen Koordinaten zwischen den Pixeln gezeichnet, und dies würde mit Antialiasing zu verschwommenen Linien führen. Was bei horizontalen Koordinaten in Ordnung zu sein schien, ist in Wirklichkeit eine Illusion, denn wenn die Linie abgerundete Enden hat, sind die korrekten Koordinaten (0.5,1.5)-(4.5,1.5). Wenn wir das Problem des letzten Pixels außer Acht lassen, sehen wir, dass diese Koordinaten einfach um 0.5 größer sind.
30	24
31	25		#### Fließkommakoordinaten ab der Pixelmitte
32	26
33	27		Die Koordinaten könnten auch der Abstand von der Mitte des oberen, linken Pixels sein. Mit anderen Worten sind ganzzahlige Werte in der Mitte der Pixel. Dies ist bei den Funktionen von BGRABitmap der Fall. Nimmt man diese Koordinaten, dann ergibt die Linie, die die Pixel (0,1) bis (4,1) füllt, einfach (0.0,1.0)-(4.0,1.0).
34	28
35		-	~~<figure>~~
36		-	~~<img src="BGRATutorial13c.png" title="BGRATutorial13c.png" />~~
37		-	~~<figcaption>BGRATutorial13c.png</figcaption>~~
38		-	~~</figure>~~
	29	+	![](/wiki-images/6/6c/BGRATutorial13c.png)
39	30
40	31		Dies ist aus mathematischer Sicht seltsam, aber sehr praktisch, weil Sie ganzzahlige Koordinaten verwenden können, um normale, 1 Pixel breite Linien zu zeichnen. Auf diese Weise gibt es allerdings einen leichten Unterschied im Aufruf zwischen den Funktionen von CanvasBGRA und normalen Fließkommafunktionen von BGRABitmap.
41	32
42	33		### Erzeugen Sie ein neues Projekt
43	34
44	35		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]].
45	36
46	37		### Canvas und BGRACanvas
47	38
48	39		Versuchen wir zu zeigen, was auf Pixelebene passiert.
49	40
50	41		Zuerst verwenden wir die Standardleinwand (Canvas):
51	42
52	43		``` pascal
53	44		procedure TForm1.FormPaint(Sender: TObject);
54	45		var image: TBGRABitmap;
55	46		begin
56	47		image := TBGRABitmap.Create(10,10);
57	48		with image.Canvas do
58	49		begin
59	50		//einfach weiß
60	51		brush.color := clWhite;
61	52		FillRect(0,0,image.width,image.height);
62	53		//blaue Ellipse mit schwarzem Rand
63	54		brush.style := bsClear;
64	55		pen.color := clBlack;
65	56		Ellipse(0,0,9,9);
66	57		end;
67	58		/strecke das Bild, damit wir die Pixel sehen können
68	59		BGRAReplace(image,image.Resample(image.Width10,image.Height10,rmSimpleStretch));
69	60		image.Draw(Canvas,0,0,True);
70	61		image.free;
71	62		end;
72	63		```
73	64
74	65		Die Resample-Option 'rmSimpleStretch' bewahrt uns vor Interpolationsfiltern.
75	66
76	67		Sie sollten dies erhalten:
77	68
78		-	~~<figure>~~
79		-	~~<img src="BGRATutorial13d.png" title="BGRATutorial13d.png" />~~
80		-	~~<figcaption>BGRATutorial13d.png</figcaption>~~
81		-	~~</figure>~~
	69	+	![](/wiki-images/7/75/BGRATutorial13d.png)
82	70
83	71		Die Pixel der Koordinate 9 sind nicht gefüllt (wie bereits oben unter Umgebungsrechteck erklärt). Jetzt zeichnen wir auf die BGRACanvas. Ändern Sie einfach die 'with'-Zeile:
84	72
85	73		``` pascal
86	74		with image.CanvasBGRA do
87	75		```
88	76
89	77		Jetzt sollten Sie dies erhalten:
90	78
91		-	~~<figure>~~
92		-	~~<img src="BGRATutorial13e.png" title="BGRATutorial13e.png" />~~
93		-	~~<figcaption>BGRATutorial13e.png</figcaption>~~
94		-	~~</figure>~~
	79	+	![](/wiki-images/b/b0/BGRATutorial13e.png)
95	80
96	81		Das Ergebnis ist recht ähnlich, abgesehen vom Antialiasing.
97	82
98	83		### Tiefere Überlegungen
99	84
100	85		Angenommen, wir wollten eine gefüllte, antialiasierte Ellipse zeichnen, die genau in eine 9x9 Bitmap passt. Wir könnten diesen Code versuchen:
101	86
102	87		``` pascal
103	88		procedure TForm1.FormPaint(Sender: TObject);
104	89		var image: TBGRABitmap;
105	90		begin
106	91		image := TBGRABitmap.Create(9,9,BGRAWhite);
107	92		image.FillEllipseAntialias(4,4, 4,4, BGRABlack);
108	93		BGRAReplace(image,image.Resample(image.Width10,image.Height10,rmSimpleStretch));
109	94		image.Draw(Canvas,0,0,True);
110	95		image.free;
111	96		end;
112	97		```
113	98
114	99		Wir erhalten:
115	100
116		-	~~<figure>~~
117		-	~~<img src="BGRATutorial13f.png" title="BGRATutorial13f.png" />~~
118		-	~~<figcaption>BGRATutorial13f.png</figcaption>~~
119		-	~~</figure>~~
	101	+	![](/wiki-images/2/25/BGRATutorial13f.png)
120	102
121	103		Wie Sie sehen, ist der Rand nicht vollständig gefüllt. Die Ellipse ist kleiner als erwartet. Tatsächlich liegt der Mittelpunkt der Ellipse bei (4,4) und der linke Rand bei (0,4). Aber aufgepasst, das ist die Mitte des Pixels. Wenn wir also wollen, dass die Ellipse bis zum Rand des Pixels reicht, müssen wir den Radius um 0.5 vergrößern:
122	104
123	105		``` pascal
124	106		image.FillEllipseAntialias(4,4, 4.5,4.5, BGRABlack);
125	107		```
126	108
127		-	~~<figure>~~
128		-	~~<img src="BGRATutorial13g.png" title="BGRATutorial13g.png" />~~
129		-	~~<figcaption>BGRATutorial13g.png</figcaption>~~
130		-	~~</figure>~~
	109	+	![](/wiki-images/4/46/BGRATutorial13g.png)
131	110
132	111		#### Gefüllte Formen mit Canvas
133	112
134	113		Beachten Sie, dass mit der Standardleinwand das Ergebnis sehr überraschend ausfällt. Angenommen, wir wollten das selbe wie oben machen. Wir könnten folgendes versuchen:
135	114
136	115		``` pascal
137	116		brush.color := clWhite;
138	117		FillRect(0,0,image.width,image.height);
139	118		brush.color := clBlue;
140	119		pen.style := psClear;
141	120		Ellipse(0,0,9,9);
142	121		```
143	122
144	123		Wir erhalten dies:
145	124
146		-	~~<figure>~~
147		-	~~<img src="BGRATutorial13h.png" title="BGRATutorial13h.png" />~~
148		-	~~<figcaption>BGRATutorial13h.png</figcaption>~~
149		-	~~</figure>~~
	125	+	![](/wiki-images/e/eb/BGRATutorial13h.png)
150	126
151	127		In diesem Fall wurde noch ein weiteres Pixel abgezogen. Die Ellipse ist 8 Pixel breit, wohingegen das bereitgestellte Rechteck 9 Pixel breit ist.
152	128
153	129		[[BGRABitmap tutorial 12/de\|Voriges Tutorial (Textfunktionen)]] \\| [[BGRABitmap tutorial 14/de\|Nächstes Tutorial (Canvas2D)]]
154	130
155	131		---
156	132		From the Free Pascal wiki, page "BGRABitmap tutorial 13/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