Sign in Join
Wiki copytemporary

BGRABitmap tutorial Font rendering: what changed

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

Title: BGRABitmap tutorial Font rendering

OldNewLine
1+Basic text functions are available in [[TBGRABitmap class|TBGRABitmap]] objects. You can find explanations about this in [[BGRABitmap tutorial 12|tutorial 12]].
2+
3+Here are more advanced features.
4+
5+### FontRenderer property
6+
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+
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+
11+#### Adding effects
12+
13+To improve speed and add effects, you will need TBGRATextEffectFontRenderer class, which is in BGRATextFX unit. For this, simply write:
14+
15+``` pascal
16+Uses BGRABitmap, BGRATextFX;
17+
18+var Bitmap: TBGRABitmap;
19+ Renderer: TBGRATextEffectFontRenderer;
20+
21+begin
22+ ...
23+ Renderer := TBGRATextEffectFontRenderer.Create;
24+ Bitmap.FontRenderer := Renderer;
25+```
26+
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.
31+
32+For example, you can define an OnPaint event by double-clicking in the object inspector of a window and write:
33+
34+``` pascal
35+Uses 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;
54+```
55+
56+<figure>
57+<img src="bgratexteffectfontrendering.png" title="bgratexteffectfontrendering.png" />
58+<figcaption>bgratexteffectfontrendering.png</figcaption>
59+</figure>
60+
61+Note that antialiasing is not activated. To draw with antialiasing:
62+
63+``` pascal
64+ bmp.FontQuality:= fqFineAntialiasing;
65+```
66+
67+<figure>
68+<img src="bgratexteffectfontrendering_aa.png" title="bgratexteffectfontrendering_aa.png" />
69+<figcaption>bgratexteffectfontrendering_aa.png</figcaption>
70+</figure>
71+
72+##### Using phong shading
73+
74+To have a phong shading, you will need shader. To create it:
75+
76+``` pascal
77+uses BGRAGradients;
78+var
79+ shader: TPhongShading;
80+ renderer: TBGRATextEffectFontRenderer;
81+begin
82+ shader := TPhongShading.Create;
83+ renderer := TBGRATextEffectFontRenderer.Create(shader, True); //the second parameter indicates that the shader is owned by the font renderer
84+```
85+
86+The full example, using shading, becomes:
87+
88+``` pascal
89+uses BGRABitmap, BGRABitmapTypes, BGRATextFX, BGRAGradients;
90+
91+procedure TForm1.FormPaint(Sender: TObject);
92+var bmp: TBGRABitmap;
93+ shader: TPhongShading;
94+ renderer: TBGRATextEffectFontRenderer;
95+begin
96+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
97+ shader := TPhongShading.Create;
98+ renderer := TBGRATextEffectFontRenderer.Create(shader,True);
99+ bmp.FontRenderer := renderer;
100+ renderer.ShadowVisible := True;
101+ bmp.FontFullHeight := 50;
102+ bmp.FontQuality:= fqFineAntialiasing;
103+ bmp.TextOut(5,5,'Hello world',CSSRed);
104+```
105+
106+<figure>
107+<img src="bgratexteffectfontrendering_shader.png" title="bgratexteffectfontrendering_shader.png" />
108+<figcaption>bgratexteffectfontrendering_shader.png</figcaption>
109+</figure>
110+
111+#### Using fonts with LazFreeType integrated in Lazarus
112+
113+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+
115+In order to define fonts, write this when creating your application:
116+
117+``` pascal
118+uses LazFreeTypeFontCollection;
119+
120+var FFontCollection: TFreeTypeFontCollection;
121+
122+procedure TForm1.FormCreate(Sender: TObject);
123+begin
124+ FFontCollection := TFreeTypeFontCollection.Create;
125+ FFontCollection.AddFile('Arial.ttf'); //supposing the file is next to the application
126+ SetDefaultFreeTypeFontCollection(FFontCollection);
127+end;
128+
129+procedure TForm1.FormDestroy(Sender: TObject);
130+begin
131+ SetDefaultFreeTypeFontCollection(nil);
132+ FreeAndNil(FFontCollection);
133+end;
134+```
135+
136+Now, to use those fonts, defined the FontRenderer property:
137+
138+``` pascal
139+uses BGRABitmap, BGRABitmapTypes, BGRAFreeType;
140+
141+procedure TForm1.FormPaint(Sender: TObject);
142+var
143+ bmp: TBGRABitmap;
144+ renderer: TBGRAFreeTypeFontRenderer;
145+begin
146+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));
147+ renderer := TBGRAFreeTypeFontRenderer.Create;
148+ bmp.FontRenderer := renderer;
149+ bmp.FontName := 'Arial';
150+ bmp.FontFullHeight:= 50;
151+ bmp.FontQuality := fqFineClearTypeRGB;
152+ bmp.TextOut(10,10,'Hello world',BGRABlack);
153+ bmp.Draw(Canvas,0,0);
154+ bmp.Free;
155+end;
156+```
157+
158+<figure>
159+<img src="bgrafreetyperenderer.png" title="bgrafreetyperenderer.png" />
160+<figcaption>bgrafreetyperenderer.png</figcaption>
161+</figure>
162+
163+You can add a shadow with Shadow properties:
164+
165+``` pascal
166+ renderer.ShadowVisible := True;
167+```
168+
169+<figure>
170+<img src="bgrafreetyperenderer_shadow.png" title="bgrafreetyperenderer_shadow.png" />
171+<figcaption>bgrafreetyperenderer_shadow.png</figcaption>
172+</figure>
173+
174+To add an outline:
175+
176+``` pascal
177+ renderer.OutlineVisible := True;
178+ renderer.OutlineColor := CSSBlack;
179+ renderer.OuterOutlineOnly := True;
180+```
181+
182+<figure>
183+<img src="bgrafreetyperenderer_outline.png" title="bgrafreetyperenderer_outline.png" />
184+<figcaption>bgrafreetyperenderer_outline.png</figcaption>
185+</figure>
186+
187+##### Phong shading
188+
189+To add phong shading, you will need a shader:
190+
191+``` pascal
192+uses BGRAGradients;
193+var
194+ shader: TPhongShading;
195+ renderer: TBGRAFreeTypeFontRenderer;
196+begin
197+ shader := TPhongShading.Create;
198+ renderer := TBGRAFreeTypeFontRenderer.Create(shader, True); //shader owned by the font renderer
199+```
200+
201+<figure>
202+<img src="bgrafreetyperenderer_shader.png" title="bgrafreetyperenderer_shader.png" />
203+<figcaption>bgrafreetyperenderer_shader.png</figcaption>
204+</figure>
205+
206+---
207+*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+Category: BGRABitmap
209+Category: Tutorials

Back to history