BGRABitmap tutorial 12/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 Textfunktionen einsetzen 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		### Einfacher Text
8	8
9	9		So zeichnen Sie einen einfachen Text:
10	10
11	11		``` pascal
12	12		procedure TForm1.FormPaint(Sender: TObject);
13	13		var
14	14		image: TBGRABitmap;
15	15		c: TBGRAPixel;
16	16		begin
17	17		image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
18	18		c := ColorToBGRA(ColorToRGB(clBtnText)); //retrieve default text color
19	19
20	20		image.FontHeight := 30;
21	21		image.FontAntialias := true;
22	22		image.FontStyle := [fsBold];
23	23		image.TextOut(5,5,'Hello world',c);
24	24		image.SetPixel(5,5,c);
25	25
26	26		image.Draw(Canvas,0,0,True);
27	27		image.free;
28	28		end;
29	29		```
30	30
31	31		Hier ist die Schriftgröße auf 30 Pixels eingestellt, mit Antialiasing. Die Verwendung des Font-Antialiasing ist langsamer, aber schöner.
32	32
33	33		Die obere, linke Ecke des Textes liegt bei (5,5). Dieser Ursprung wird mittels 'SetPixel' angezeigt.
34	34
35		-	~~<figure>~~
36		-	~~<img src="BGRATutorial12a.png" title="BGRATutorial12a.png" />~~
37		-	~~<figcaption>BGRATutorial12a.png</figcaption>~~
38		-	~~</figure>~~
	35	+	![](/wiki-images/4/40/BGRATutorial12a.png)
39	36
40	37		#### Verwenden von Textausrichtungen
41	38
42	39		Ersetzen Sie einfach die Zeilen mit 'TextOut' und 'SetPixel' durch:
43	40
44	41		``` pascal
45	42		image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);
46	43		image.SetPixel(ClientWidth-5,5,c);
47	44		```
48	45
49	46		Jetzt ist der Ursprung an der rechten Seite des Formulars und der Text ist rechtbündig ausgerichtet.
50	47
51		-	~~<figure>~~
52		-	~~<img src="BGRATutorial12b.png" title="BGRATutorial12b.png" />~~
53		-	~~<figcaption>BGRATutorial12b.png</figcaption>~~
54		-	~~</figure>~~
	48	+	![](/wiki-images/6/61/BGRATutorial12b.png)
55	49
56	50		### Rotated text
57	51
58	52		Ebenso einfach ist es, gedrehten Text zu zeichnen. Dazu nehmen Sie 'TextOutAngle' oder legen Sie die Eigenschaft 'FontOrientation' fest:
59	53
60	54		``` pascal
61	55		image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);
62	56		image.SetPixel(30,5,c);
63	57		```
64	58
65	59		Der Winkel wird in Zehntelgraden angegeben; ein positiver Wert bedeutet 'im Gegenzeigersinn'.
66	60
67		-	~~<figure>~~
68		-	~~<img src="BGRATutorial12c.png" title="BGRATutorial12c.png" />~~
69		-	~~<figcaption>BGRATutorial12c.png</figcaption>~~
70		-	~~</figure>~~
	61	+	![](/wiki-images/b/b5/BGRATutorial12c.png)
71	62
72	63		Beachten Sie wo der Textursprung liegt (das hinzugefügte Pixel).
73	64
74	65		### Zeilenumbruch eines Textes
75	66
76	67		Dazu gibt es eine einfach verwendbare Version von 'TextRect':
77	68
78	69		``` pascal
79	70		image.TextRect(rect(5,5,ClientWidth-5,ClientHeight-5),'This is a text that should be word wrapped',taCenter,tlCenter,c);
80	71		image.Rectangle(rect(5,5,ClientWidth-5,ClientHeight-5),c,dmSet);
81	72		```
82	73
83	74		Die Parameter sind:
84	75
85	76		- das umgebende Rechteck
86	77		- der Text
87	78		- die horizontale Ausrichtung
88	79		- die vertikale Ausrichtung
89	80		- die Farbe
90	81
91		-	~~<figure>~~
92		-	~~<img src="BGRATutorial12d.png" title="BGRATutorial12d.png" />~~
93		-	~~<figcaption>BGRATutorial12d.png</figcaption>~~
94		-	~~</figure>~~
	82	+	![](/wiki-images/c/ce/BGRATutorial12d.png)
95	83
96	84		### Text mit Schatten
97	85
98	86		Sie erzielen einen Textschatten mit dem Blur-Effekt (=Weichzeichner):
99	87
100	88		``` pascal
101	89		var
102	90		image,txt: TBGRABitmap;
103	91		grad: TBGRAGradientScanner;
104	92		c: TBGRAPixel;
105	93		begin
106	94		image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
107	95		c := ColorToBGRA(ColorToRGB(clBtnText));
108	96
109	97		txt := TextShadow(ClientWidth,ClientHeight,'Hello world',30,c,BGRABlack,5,5,5);
110	98		image.PutImage(0,0,txt,dmDrawWithTransparency);
111	99		txt.Free;
112	100
113	101		image.Draw(Canvas,0,0,True);
114	102		image.free;
115	103		end;
116	104		```
117	105
118	106		Die Prozedur TextShadow erzeugt eine Bitmap, die den Text mit dem Schatten enthält. Die Parameter sind:
119	107
120	108		- die Größe der Bitmap
121	109		- der Text
122	110		- die Schrifthöhe
123	111		- die Schriftfarbe
124	112		- die Schattenfarbe
125	113		- der Versatz des Schattens und die Größe des Blur
126	114
127	115		Vergessen Sie nicht, die Bitmap nach der Verwendung wieder freizugeben.
128	116
129		-	~~<figure>~~
130		-	~~<img src="BGRATutorial12e.png" title="BGRATutorial12e.png" />~~
131		-	~~<figcaption>BGRATutorial12e.png</figcaption>~~
132		-	~~</figure>~~
	117	+	![](/wiki-images/b/b7/BGRATutorial12e.png)
133	118
134	119		### Text mit Gradienten
135	120
136	121		Wie bei den übrigen Zeichenfunktionen, können Sie einen Gradienten oder eine Textur zum Füllen des Textes angeben. Hier ist ein Beispiel:
137	122
138	123		``` pascal
139	124		uses BGRAGradientScanner;
140	125
141	126		var
142	127		image: TBGRABitmap;
143	128		grad: TBGRAGradientScanner;
144	129		begin
145	130		image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
146	131
147	132		grad := TBGRAGradientScanner.Create(BGRA(255,255,0),BGRA(255,0,0),gtLinear,PointF(0,0),PointF(0,35),True,True);
148	133		image.FontHeight := 30;
149	134		image.FontAntialias := true;
150	135		image.FontStyle := [fsBold];
151	136		image.TextOut(6,6,'Hello world',BGRABlack); //zeichne einen schwarzen Rahmen
152	137		image.TextOut(5,5,'Hello world',grad); //zeichne den Text mit Farbverlauf
153	138		grad.free;
154	139
155	140		image.Draw(Canvas,0,0,True);
156	141		image.free;
157	142		end;
158	143		```
159	144
160	145		Zuerst wird ein horizontaler Sinusgradient erzeugt (in den Farben gelb und rot). Diesen verwenden wir dann als Textur.
161	146
162		-	~~<figure>~~
163		-	~~<img src="BGRATutorial12f.png" title="BGRATutorial12f.png" />~~
164		-	~~<figcaption>BGRATutorial12f.png</figcaption>~~
165		-	~~</figure>~~
	147	+	![](/wiki-images/7/7e/BGRATutorial12f.png)
166	148
167	149		[[BGRABitmap tutorial 11/de\|Voriges Tutorial (Kombinieren von Transformationen)]] \\| [[BGRABitmap tutorial 13/de\|Nächstes Tutorial (Koordinatensystem)]]
168	150
169	151		---
170	152		From the Free Pascal wiki, page "BGRABitmap tutorial 12/de", as it stood on 2022-10-23 after a change by VamLykTan, 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