BGRABitmap tutorial Font rendering: what changed

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

Old	New		Line
1	1		Basic text functions are available in [[TBGRABitmap class\|TBGRABitmap]] objects. You can find explanations about this in [[BGRABitmap tutorial 12\|tutorial 12]].
2	2
3	3		Here are more advanced features.
4	4
5	5		### FontRenderer property
6	6
7	7		TBGRABitmap images has a FontRenderer property. By default, the renderer uses LCL drawing functions, eventually by drawing it bigger and applying antialiasing. This is done un TLCLFontRenderer class of BGRAText unit. However, this drawing does not allow to draw shadows or apply an outline to the text. Moreover, it is rather slow when drawing text in a rectangle (TextRect function).
8	8
9	9		You can replace the renderer by creating an object derived from TBGRACustomFontRenderer and by applying it to FontRenderer property. Note that an instance can be used for one image only, which became the owner. So you don't have to free the renderer yourself.
10	10
11	11		#### Adding effects
12	12
13	13		To improve speed and add effects, you will need TBGRATextEffectFontRenderer class, which is in BGRATextFX unit. For this, simply write:
14	14
15	15		``` pascal
16	16		Uses BGRABitmap, BGRATextFX;
17	17
18	18		var Bitmap: TBGRABitmap;
19	19		Renderer: TBGRATextEffectFontRenderer;
20	20
21	21		begin
22	22		...
23	23		Renderer := TBGRATextEffectFontRenderer.Create;
24	24		Bitmap.FontRenderer := Renderer;
25	25		```
26	26
27	27		Note that you could directly assign the object without using an intermediary variable Renderer, but it will be useful to choose applied effects.
28	28
29	29		- For a shadow, use the following properties: ShadowVisible, ShadowColor, ShadowOffset and ShadowRadius. A shadow is visible if ShadowVisible is True and ShadowColor is not transparent.
30	30		- For an outline, use OutlineVisible, OuterOutlineOnly, OutlineColor or OutlineTexture and OutlineWidth. An outline is visible if OutlineVisible is True and a texture, otherwise a non transparent color is defined. Moreover OutlineWidth must be non zero.
31	31
32	32		For example, you can define an OnPaint event by double-clicking in the object inspector of a window and write:
33	33
34	34		``` pascal
35	35		Uses BGRABitmap, BGRABitmapTypes, BGRATextFX;
36	36
37	37		procedure TForm1.FormPaint(Sender: TObject);
38	38		var
39	39		bmp: TBGRABitmap;
40	40		renderer: TBGRATextEffectFontRenderer;
41	41		begin
42	42		bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
43	43		renderer := TBGRATextEffectFontRenderer.Create;
44	44		bmp.FontRenderer := renderer;
45	45		renderer.ShadowVisible := True;
46	46		renderer.OutlineVisible := True;
47	47		renderer.OutlineColor := BGRABlack;
48	48		renderer.OuterOutlineOnly := True;
49	49		bmp.FontFullHeight := 50;
50	50		bmp.TextOut(5,5,'Hello world',CSSRed);
51	51		bmp.Draw(Canvas,0,0);
52	52		bmp.Free;
53	53		end;
54	54		```
55	55
56		-	~~<figure>~~
57		-	~~<img src="bgratexteffectfontrendering.png" title="bgratexteffectfontrendering.png" />~~
58		-	~~<figcaption>bgratexteffectfontrendering.png</figcaption>~~
59		-	~~</figure>~~
	56	+	![](/wiki-images/6/68/Bgratexteffectfontrendering.png)
60	57
61	58		Note that antialiasing is not activated. To draw with antialiasing:
62	59
63	60		``` pascal
64	61		bmp.FontQuality:= fqFineAntialiasing;
65	62		```
66	63
67		-	~~<figure>~~
68		-	~~<img src="bgratexteffectfontrendering_aa.png" title="bgratexteffectfontrendering_aa.png" />~~
69		-	~~<figcaption>bgratexteffectfontrendering_aa.png</figcaption>~~
70		-	~~</figure>~~
	64	+	![](/wiki-images/9/90/Bgratexteffectfontrendering_aa.png)
71	65
72	66		##### Using phong shading
73	67
74	68		To have a phong shading, you will need shader. To create it:
75	69
76	70		``` pascal
77	71		uses BGRAGradients;
78	72		var
79	73		shader: TPhongShading;
80	74		renderer: TBGRATextEffectFontRenderer;
81	75		begin
82	76		shader := TPhongShading.Create;
83	77		renderer := TBGRATextEffectFontRenderer.Create(shader, True); //the second parameter indicates that the shader is owned by the font renderer
84	78		```
85	79
86	80		The full example, using shading, becomes:
87	81
88	82		``` pascal
89	83		uses BGRABitmap, BGRABitmapTypes, BGRATextFX, BGRAGradients;
90	84
91	85		procedure TForm1.FormPaint(Sender: TObject);
92	86		var bmp: TBGRABitmap;
93	87		shader: TPhongShading;
94	88		renderer: TBGRATextEffectFontRenderer;
95	89		begin
96	90		bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
97	91		shader := TPhongShading.Create;
98	92		renderer := TBGRATextEffectFontRenderer.Create(shader,True);
99	93		bmp.FontRenderer := renderer;
100	94		renderer.ShadowVisible := True;
101	95		bmp.FontFullHeight := 50;
102	96		bmp.FontQuality:= fqFineAntialiasing;
103	97		bmp.TextOut(5,5,'Hello world',CSSRed);
104	98		```
105	99
106		-	~~<figure>~~
107		-	~~<img src="bgratexteffectfontrendering_shader.png" title="bgratexteffectfontrendering_shader.png" />~~
108		-	~~<figcaption>bgratexteffectfontrendering_shader.png</figcaption>~~
109		-	~~</figure>~~
	100	+	![](/wiki-images/1/1e/Bgratexteffectfontrendering_shader.png)
110	101
111	102		#### Using fonts with LazFreeType integrated in Lazarus
112	103
113	104		Since version 1.0, Lazarus has a FreeType font engine. Note that you must supply yourself files or streams that contain the fonts you want to draw. System directories and installed fonts are ignored, unless of course you explicitely add those files. Note that in the current implementation, it is necessary to provide Arial font even if you are not using it.
114	105
115	106		In order to define fonts, write this when creating your application:
116	107
117	108		``` pascal
118	109		uses LazFreeTypeFontCollection;
119	110
120	111		var FFontCollection: TFreeTypeFontCollection;
121	112
122	113		procedure TForm1.FormCreate(Sender: TObject);
123	114		begin
124	115		FFontCollection := TFreeTypeFontCollection.Create;
125	116		FFontCollection.AddFile('Arial.ttf'); //supposing the file is next to the application
126	117		SetDefaultFreeTypeFontCollection(FFontCollection);
127	118		end;
128	119
129	120		procedure TForm1.FormDestroy(Sender: TObject);
130	121		begin
131	122		SetDefaultFreeTypeFontCollection(nil);
132	123		FreeAndNil(FFontCollection);
133	124		end;
134	125		```
135	126
136	127		Now, to use those fonts, defined the FontRenderer property:
137	128
138	129		``` pascal
139	130		uses BGRABitmap, BGRABitmapTypes, BGRAFreeType;
140	131
141	132		procedure TForm1.FormPaint(Sender: TObject);
142	133		var
143	134		bmp: TBGRABitmap;
144	135		renderer: TBGRAFreeTypeFontRenderer;
145	136		begin
146	137		bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
147	138		renderer := TBGRAFreeTypeFontRenderer.Create;
148	139		bmp.FontRenderer := renderer;
149	140		bmp.FontName := 'Arial';
150	141		bmp.FontFullHeight:= 50;
151	142		bmp.FontQuality := fqFineClearTypeRGB;
152	143		bmp.TextOut(10,10,'Hello world',BGRABlack);
153	144		bmp.Draw(Canvas,0,0);
154	145		bmp.Free;
155	146		end;
156	147		```
157	148
158		-	~~<figure>~~
159		-	~~<img src="bgrafreetyperenderer.png" title="bgrafreetyperenderer.png" />~~
160		-	~~<figcaption>bgrafreetyperenderer.png</figcaption>~~
161		-	~~</figure>~~
	149	+	![](/wiki-images/d/d8/Bgrafreetyperenderer.png)
162	150
163	151		You can add a shadow with Shadow properties:
164	152
165	153		``` pascal
166	154		renderer.ShadowVisible := True;
167	155		```
168	156
169		-	~~<figure>~~
170		-	~~<img src="bgrafreetyperenderer_shadow.png" title="bgrafreetyperenderer_shadow.png" />~~
171		-	~~<figcaption>bgrafreetyperenderer_shadow.png</figcaption>~~
172		-	~~</figure>~~
	157	+	![](/wiki-images/a/a6/Bgrafreetyperenderer_shadow.png)
173	158
174	159		To add an outline:
175	160
176	161		``` pascal
177	162		renderer.OutlineVisible := True;
178	163		renderer.OutlineColor := CSSBlack;
179	164		renderer.OuterOutlineOnly := True;
180	165		```
181	166
182		-	~~<figure>~~
183		-	~~<img src="bgrafreetyperenderer_outline.png" title="bgrafreetyperenderer_outline.png" />~~
184		-	~~<figcaption>bgrafreetyperenderer_outline.png</figcaption>~~
185		-	~~</figure>~~
	167	+	![](/wiki-images/0/0f/Bgrafreetyperenderer_outline.png)
186	168
187	169		##### Phong shading
188	170
189	171		To add phong shading, you will need a shader:
190	172
191	173		``` pascal
192	174		uses BGRAGradients;
193	175		var
194	176		shader: TPhongShading;
195	177		renderer: TBGRAFreeTypeFontRenderer;
196	178		begin
197	179		shader := TPhongShading.Create;
198	180		renderer := TBGRAFreeTypeFontRenderer.Create(shader, True); //shader owned by the font renderer
199	181		```
200	182
201		-	~~<figure>~~
202		-	~~<img src="bgrafreetyperenderer_shader.png" title="bgrafreetyperenderer_shader.png" />~~
203		-	~~<figcaption>bgrafreetyperenderer_shader.png</figcaption>~~
204		-	~~</figure>~~
	183	+	![](/wiki-images/0/0d/Bgrafreetyperenderer_shader.png)
205	184
206	185		---
207	186		From the Free Pascal wiki, page "BGRABitmap tutorial Font rendering", as it stood on 2020-04-11 after a change by Circular, 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).
208	187		Category: BGRABitmap
209	188		Category: Tutorials

Back to history