BGRABitmap tutorial 12: what changed

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

Title: BGRABitmap tutorial 12

New		Line
1	+	This tutorial shows how to use the text functions. For advanced features, see [[BGRABitmap tutorial Font rendering\|font renderers]].
2	+
3	+	### Create a new project
4	+
5	+	Create a new project and add a reference to [[BGRABitmap]], the same way as in [[BGRABitmap tutorial\|the first tutorial]].
6	+
7	+	### Simple text
8	+
9	+	You can draw a simple text like this:
10	+
11	+	``` pascal
12	+	procedure TForm1.FormPaint(Sender: TObject);
13	+	var
14	+	image: TBGRABitmap;
15	+	c: TBGRAPixel;
16	+	begin
17	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
18	+	c := ColorToBGRA(ColorToRGB(clBtnText)); //retrieve default text color
19	+
20	+	image.FontHeight := 30;
21	+	image.FontAntialias := true;
22	+	image.FontStyle := [fsBold];
23	+	image.TextOut (5, 5, 'Hello world', c);
24	+	image.SetPixel (5, 5, c);
25	+
26	+	image.free;
27	+	end;
28	+	```
29	+
30	+	Here the font size is set to 30 pixels, with antialiasing. Using font antialiasing is slower but more beautiful.
31	+
32	+	The upper-left corner of the text is at (5,5). This origin is shown with a SetPixel.
33	+
34	+	<figure>
35	+	<img src="BGRATutorial12a.png" title="BGRATutorial12a.png" />
36	+	<figcaption>BGRATutorial12a.png</figcaption>
37	+	</figure>
38	+
39	+	#### Using alignment
40	+
41	+	Just replace the TextOut and SetPixel lines by:
42	+
43	+	``` pascal
44	+	image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);
45	+	image.SetPixel(ClientWidth-5,5,c);
46	+	```
47	+
48	+	Now the origin is on the right side of the form, and the text is aligned to the right.
49	+
50	+	<figure>
51	+	<img src="BGRATutorial12b.png" title="BGRATutorial12b.png" />
52	+	<figcaption>BGRATutorial12b.png</figcaption>
53	+	</figure>
54	+
55	+	### Rotated text
56	+
57	+	It is also simple to draw rotated text. To do this use TextOutAngle or set FontOrientation property:
58	+
59	+	``` pascal
60	+	image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);
61	+	image.SetPixel(30,5,c);
62	+	```
63	+
64	+	The angle is in tenth of degrees and positive value means counter clock wise.
65	+
66	+	<figure>
67	+	<img src="BGRATutorial12c.png" title="BGRATutorial12c.png" />
68	+	<figcaption>BGRATutorial12c.png</figcaption>
69	+	</figure>
70	+
71	+	Notice where the text origin is (the added pixel).
72	+
73	+	### Word wrapped text
74	+
75	+	There is an easy to use version of TextRect:
76	+
77	+	``` pascal
78	+	image.TextRect(rect(5,5,ClientWidth-5,ClientHeight-5),'This is a text that should be word wrapped',taCenter,tlCenter,c);
79	+	image.Rectangle(rect(5,5,ClientWidth-5,ClientHeight-5),c,dmSet);
80	+	```
81	+
82	+	Parameters are:
83	+
84	+	- the bounding rectangle
85	+	- the text
86	+	- horizontal alignment
87	+	- vertical alignment
88	+	- color
89	+
90	+	<figure>
91	+	<img src="BGRATutorial12d.png" title="BGRATutorial12d.png" />
92	+	<figcaption>BGRATutorial12d.png</figcaption>
93	+	</figure>
94	+
95	+	### Text with shadow
96	+
97	+	You can make a text shadow with a blur effect:
98	+
99	+	``` pascal
100	+	var
101	+	image,txt: TBGRABitmap;
102	+	grad: TBGRAGradientScanner;
103	+	c: TBGRAPixel;
104	+	begin
105	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
106	+	c := ColorToBGRA(ColorToRGB(clBtnText));
107	+
108	+	txt := TextShadow(ClientWidth,ClientHeight,'Hello world',30,c,BGRABlack,5,5,5);
109	+	image.PutImage(0,0,txt,dmDrawWithTransparency);
110	+	txt.Free;
111	+
112	+	image.Draw(Canvas,0,0,True);
113	+	image.free;
114	+	end;
115	+	```
116	+
117	+	The procedure TextShadow creates a bitmap that contains the text with a shadow. The parameters are:
118	+
119	+	- The size of the bitmap
120	+	- The text
121	+	- Font height
122	+	- Font color
123	+	- Shadow color
124	+	- Shadow offset and blur size
125	+
126	+	Do not forget to free the bitmap after using it.
127	+
128	+	<figure>
129	+	<img src="BGRATutorial12e.png" title="BGRATutorial12e.png" />
130	+	<figcaption>BGRATutorial12e.png</figcaption>
131	+	</figure>
132	+
133	+	### Text with gradient
134	+
135	+	Like other drawing functions, you can supply a gradient or a texture to fill the text with. Here is an example:
136	+
137	+	``` pascal
138	+	uses BGRAGradientScanner;
139	+
140	+	var
141	+	image: TBGRABitmap;
142	+	grad: TBGRAGradientScanner;
143	+	begin
144	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
145	+
146	+	grad := TBGRAGradientScanner.Create(BGRA(255,255,0),BGRA(255,0,0),gtLinear,PointF(0,0),PointF(0,35),True,True);
147	+	image.FontHeight := 30;
148	+	image.FontAntialias := true;
149	+	image.FontStyle := [fsBold];
150	+	image.TextOut(6,6,'Hello world',BGRABlack); //draw a black border
151	+	image.TextOut(5,5,'Hello world',grad); //draw gradient text
152	+	grad.free;
153	+
154	+	image.Draw(Canvas,0,0,True);
155	+	image.free;
156	+	end;
157	+	```
158	+
159	+	First a horizontal sine gradient is created, with color yellow and red. It is then used as a texture.
160	+
161	+	<figure>
162	+	<img src="BGRATutorial12f.png" title="BGRATutorial12f.png" />
163	+	<figcaption>BGRATutorial12f.png</figcaption>
164	+	</figure>
165	+
166	+	[[BGRABitmap tutorial 11\|Previous tutorial (combining transformations)]] [[BGRABitmap tutorial 13\|Next tutorial (coordinate system)]]
167	+
168	+	---
169	+	From the Free Pascal wiki, page "BGRABitmap tutorial 12", as it stood on 2023-01-22 after a change by Crore, 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).
170	+	Category: BGRABitmap
171	+	Category: Graphics

Back to history