Sign in Join
Wiki copytemporary

BGRABitmap tutorial Font rendering: what changed

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

OldNewLine
1-Basic text functions are available in [[TBGRABitmap class|TBGRABitmap]] objects. You can find explanations about this in [[BGRABitmap tutorial 12|tutorial 12]].
1+Basic text functions are available in [[TBGRABitmap class|TBGRABitmap]] objects. You can find explanations about this in [[BGRABitmap tutorial 12|tutorial 12]].
22
3-Here are more advanced features.
3+Here are more advanced features.
44
55### FontRenderer property
66
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).
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).
88
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.
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.
1010
1111#### Adding effects
1212
13-To improve speed and add effects, you will need TBGRATextEffectFontRenderer class, which is in BGRATextFX unit. For this, simply write:
14-
15-``` pascal
13+To improve speed and add effects, you will need TBGRATextEffectFontRenderer class, which is in BGRATextFX unit. For this, simply write:
14+```
1615Uses BGRABitmap, BGRATextFX;
17-
18-var Bitmap: TBGRABitmap;
19- Renderer: TBGRATextEffectFontRenderer;
20-
21-begin
22- ...
23- Renderer := TBGRATextEffectFontRenderer.Create;
24- Bitmap.FontRenderer := Renderer;
16+
17+ var Bitmap: TBGRABitmap;
18+ Renderer: TBGRATextEffectFontRenderer;
19+
20+ begin
21+ ...
22+ Renderer := TBGRATextEffectFontRenderer.Create;
23+ Bitmap.FontRenderer := Renderer;
2524```
2625
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-
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-- 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.
26+Note that you could directly assign the object without using an intermediary variable Renderer, but it will be useful to choose applied effects.
3127
32-For example, you can define an OnPaint event by double-clicking in the object inspector of a window and write:
28+ * 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.
29+ * 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.
3330
34-``` pascal
31+For example, you can define an OnPaint event by double-clicking in the object inspector of a window and write:
32+```
3533Uses BGRABitmap, BGRABitmapTypes, BGRATextFX;
36-
37-procedure TForm1.FormPaint(Sender: TObject);
38-var
39- bmp: TBGRABitmap;
40- renderer: TBGRATextEffectFontRenderer;
41-begin
42- bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
43- renderer := TBGRATextEffectFontRenderer.Create;
44- bmp.FontRenderer := renderer;
45- renderer.ShadowVisible := True;
46- renderer.OutlineVisible := True;
47- renderer.OutlineColor := BGRABlack;
48- renderer.OuterOutlineOnly := True;
49- bmp.FontFullHeight := 50;
50- bmp.TextOut(5,5,'Hello world',CSSRed);
51- bmp.Draw(Canvas,0,0);
52- bmp.Free;
53-end;
34+
35+ procedure TForm1.FormPaint(Sender: TObject);
36+ var
37+ bmp: TBGRABitmap;
38+ renderer: TBGRATextEffectFontRenderer;
39+ begin
40+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
41+ renderer := TBGRATextEffectFontRenderer.Create;
42+ bmp.FontRenderer := renderer;
43+ renderer.ShadowVisible := True;
44+ renderer.OutlineVisible := True;
45+ renderer.OutlineColor := BGRABlack;
46+ renderer.OuterOutlineOnly := True;
47+ bmp.FontFullHeight := 50;
48+ bmp.TextOut(5,5,'Hello world',CSSRed);
49+ bmp.Draw(Canvas,0,0);
50+ bmp.Free;
51+ end;
5452```
5553
56-![](/wiki-images/6/68/Bgratexteffectfontrendering.png)
57-
58-Note that antialiasing is not activated. To draw with antialiasing:
54+[![bgratexteffectfontrendering.png](/wiki-images/f/fa/bgratexteffectfontrendering.png)](</File:bgratexteffectfontrendering.png>)
5955
60-``` pascal
61- bmp.FontQuality:= fqFineAntialiasing;
56+Note that antialiasing is not activated. To draw with antialiasing:
6257```
58+bmp.FontQuality:= fqFineAntialiasing;
59+```
6360
64-![](/wiki-images/9/90/Bgratexteffectfontrendering_aa.png)
61+[![bgratexteffectfontrendering aa.png](/wiki-images/3/3d/bgratexteffectfontrendering_aa.png)](</File:bgratexteffectfontrendering_aa.png>)
6562
6663##### Using phong shading
6764
68-To have a phong shading, you will need shader. To create it:
69-
70-``` pascal
65+To have a phong shading, you will need shader. To create it:
66+```
7167uses BGRAGradients;
72-var
73- shader: TPhongShading;
74- renderer: TBGRATextEffectFontRenderer;
75-begin
76- shader := TPhongShading.Create;
77- renderer := TBGRATextEffectFontRenderer.Create(shader, True); //the second parameter indicates that the shader is owned by the font renderer
68+ var
69+ shader: TPhongShading;
70+ renderer: TBGRATextEffectFontRenderer;
71+ begin
72+ shader := TPhongShading.Create;
73+ renderer := TBGRATextEffectFontRenderer.Create(shader, True); //the second parameter indicates that the shader is owned by the font renderer
7874```
7975
80-The full example, using shading, becomes:
81-
82-``` pascal
76+The full example, using shading, becomes:
77+```
8378uses BGRABitmap, BGRABitmapTypes, BGRATextFX, BGRAGradients;
84-
85-procedure TForm1.FormPaint(Sender: TObject);
86-var bmp: TBGRABitmap;
87- shader: TPhongShading;
88- renderer: TBGRATextEffectFontRenderer;
89-begin
90- bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
91- shader := TPhongShading.Create;
92- renderer := TBGRATextEffectFontRenderer.Create(shader,True);
93- bmp.FontRenderer := renderer;
94- renderer.ShadowVisible := True;
95- bmp.FontFullHeight := 50;
96- bmp.FontQuality:= fqFineAntialiasing;
97- bmp.TextOut(5,5,'Hello world',CSSRed);
79+
80+ procedure TForm1.FormPaint(Sender: TObject);
81+ var bmp: TBGRABitmap;
82+ shader: TPhongShading;
83+ renderer: TBGRATextEffectFontRenderer;
84+ begin
85+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
86+ shader := TPhongShading.Create;
87+ renderer := TBGRATextEffectFontRenderer.Create(shader,True);
88+ bmp.FontRenderer := renderer;
89+ renderer.ShadowVisible := True;
90+ bmp.FontFullHeight := 50;
91+ bmp.FontQuality:= fqFineAntialiasing;
92+ bmp.TextOut(5,5,'Hello world',CSSRed);
9893```
9994
100-![](/wiki-images/1/1e/Bgratexteffectfontrendering_shader.png)
95+[![bgratexteffectfontrendering shader.png](/wiki-images/2/2c/bgratexteffectfontrendering_shader.png)](</File:bgratexteffectfontrendering_shader.png>)
10196
10297#### Using fonts with LazFreeType integrated in Lazarus
10398
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.
99+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.
105100
106-In order to define fonts, write this when creating your application:
101+If not specified, the default font will default to one of the following families: Helvetica, Helvetica Neue, Arial, Nimbus Sans L, Microsoft Sans Serif, FreeSans, Liberation Sans, DejaVu Sans Condensed, Tahoma.
107102
108-``` pascal
103+In order to define fonts, write this when creating your application:
104+```
109105uses LazFreeTypeFontCollection;
110-
111-var FFontCollection: TFreeTypeFontCollection;
112-
113-procedure TForm1.FormCreate(Sender: TObject);
114-begin
115- FFontCollection := TFreeTypeFontCollection.Create;
116- FFontCollection.AddFile('Arial.ttf'); //supposing the file is next to the application
117- SetDefaultFreeTypeFontCollection(FFontCollection);
118-end;
119-
120-procedure TForm1.FormDestroy(Sender: TObject);
121-begin
122- SetDefaultFreeTypeFontCollection(nil);
123- FreeAndNil(FFontCollection);
124-end;
106+
107+ var FFontCollection: TFreeTypeFontCollection;
108+
109+ procedure TForm1.FormCreate(Sender: TObject);
110+ begin
111+ FFontCollection := TFreeTypeFontCollection.Create;
112+ FFontCollection.AddFile('Arial.ttf'); //supposing the file is next to the application
113+ SetDefaultFreeTypeFontCollection(FFontCollection);
114+ end;
115+
116+ procedure TForm1.FormDestroy(Sender: TObject);
117+ begin
118+ SetDefaultFreeTypeFontCollection(nil);
119+ FreeAndNil(FFontCollection);
120+ end;
125121```
126122
127-Now, to use those fonts, defined the FontRenderer property:
128-
129-``` pascal
123+Now, to use those fonts, defined the FontRenderer property:
124+```
130125uses BGRABitmap, BGRABitmapTypes, BGRAFreeType;
131-
132-procedure TForm1.FormPaint(Sender: TObject);
133-var
134- bmp: TBGRABitmap;
135- renderer: TBGRAFreeTypeFontRenderer;
136-begin
137- bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
138- renderer := TBGRAFreeTypeFontRenderer.Create;
139- bmp.FontRenderer := renderer;
140- bmp.FontName := 'Arial';
141- bmp.FontFullHeight:= 50;
142- bmp.FontQuality := fqFineClearTypeRGB;
143- bmp.TextOut(10,10,'Hello world',BGRABlack);
144- bmp.Draw(Canvas,0,0);
145- bmp.Free;
146-end;
126+
127+ procedure TForm1.FormPaint(Sender: TObject);
128+ var
129+ bmp: TBGRABitmap;
130+ renderer: TBGRAFreeTypeFontRenderer;
131+ begin
132+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
133+ renderer := TBGRAFreeTypeFontRenderer.Create;
134+ bmp.FontRenderer := renderer;
135+ bmp.FontName := 'Arial';
136+ bmp.FontFullHeight:= 50;
137+ bmp.FontQuality := fqFineClearTypeRGB;
138+ bmp.TextOut(10,10,'Hello world',BGRABlack);
139+ bmp.Draw(Canvas,0,0);
140+ bmp.Free;
141+ end;
147142```
148143
149-![](/wiki-images/d/d8/Bgrafreetyperenderer.png)
150-
151-You can add a shadow with Shadow properties:
144+[![bgrafreetyperenderer.png](/wiki-images/5/54/bgrafreetyperenderer.png)](</File:bgrafreetyperenderer.png>)
152145
153-``` pascal
154- renderer.ShadowVisible := True;
146+You can add a shadow with Shadow properties:
155147```
156-
157-![](/wiki-images/a/a6/Bgrafreetyperenderer_shadow.png)
148+renderer.ShadowVisible := True;
149+```
158150
159-To add an outline:
151+[![bgrafreetyperenderer shadow.png](/wiki-images/7/70/bgrafreetyperenderer_shadow.png)](</File:bgrafreetyperenderer_shadow.png>)
160152
161-``` pascal
162- renderer.OutlineVisible := True;
163- renderer.OutlineColor := CSSBlack;
164- renderer.OuterOutlineOnly := True;
153+To add an outline:
165154```
155+renderer.OutlineVisible := True;
156+ renderer.OutlineColor := CSSBlack;
157+ renderer.OuterOutlineOnly := True;
158+```
166159
167-![](/wiki-images/0/0f/Bgrafreetyperenderer_outline.png)
160+[![bgrafreetyperenderer outline.png](/wiki-images/4/44/bgrafreetyperenderer_outline.png)](</File:bgrafreetyperenderer_outline.png>)
168161
169162##### Phong shading
170163
171-To add phong shading, you will need a shader:
172-
173-``` pascal
164+To add phong shading, you will need a shader:
165+```
174166uses BGRAGradients;
175-var
176- shader: TPhongShading;
177- renderer: TBGRAFreeTypeFontRenderer;
178-begin
179- shader := TPhongShading.Create;
180- renderer := TBGRAFreeTypeFontRenderer.Create(shader, True); //shader owned by the font renderer
167+ var
168+ shader: TPhongShading;
169+ renderer: TBGRAFreeTypeFontRenderer;
170+ begin
171+ shader := TPhongShading.Create;
172+ renderer := TBGRAFreeTypeFontRenderer.Create(shader, True); //shader owned by the font renderer
181173```
182174
183-![](/wiki-images/0/0d/Bgrafreetyperenderer_shader.png)
175+[![bgrafreetyperenderer shader.png](/wiki-images/9/91/bgrafreetyperenderer_shader.png)](</File:bgrafreetyperenderer_shader.png>)
184176
185177---
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).*
187-Category: BGRABitmap
188-Category: Tutorials
178+*From the Free Pascal wiki, page "BGRABitmap tutorial Font rendering", as the Internet Archive kept it on 2025-01-17, last changed on 2024-10-22. 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