Sign in Join
Wiki copytemporary

BGRABitmap tutorial TAChart: what changed

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

Title: BGRABitmap tutorial TAChart

OldNewLine
1+You can make beautiful charts using [[BGRABitmap]]. Add TAChartBGRA package with the project inspector.
2+
3+Maybe the package will not appear in the list or will not be installed. In this case, open it manually with the menu Package, Open package file (.lpk). It must be in *component\tachart*. Then click on the button to install the package.
4+
5+## Add a TAChart
6+
7+[[TAChart]] in fact has the classname TChart. To add a chart, browse the components, choose Chart tab and click on TChart icon. Click and draw a rectangle on the window to drop it.
8+
9+In order to supply data, click on TRandomChartSource component icon and click once in the window to drop it. In the Object Inspector, define PointsNumber to 10, XMax to 10 and YMax to 10.
10+
11+Now let's create a series that uses this source. To do that, click on your chart and in the Object Inspector, go to Series property. Click on the three dots, and add a *Bar series*. In its properties, go to Source property and choose RandomChartSource1. The chart should be filled with red bars.
12+
13+<figure>
14+<img src="tachartrandombars.png" title="tachartrandombars.png" />
15+<figcaption>tachartrandombars.png</figcaption>
16+</figure>
17+
18+As we are going to do some 3D, we need some depth. So set the Depth property of the series to 10.
19+
20+<figure>
21+<img src="tachartrandombars3D.png" title="tachartrandombars3D.png" />
22+<figcaption>tachartrandombars3D.png</figcaption>
23+</figure>
24+
25+Finally, click on the chart and set the Align property to alClient in order to fill the window.
26+
27+## Decorate in normal rendering mode
28+
29+Go to the `Series` property of your chart. Choose the bar series, and in the Object Inspector, go to the events and define a handler for the event `OnCustomDrawBar`. Add the following code:
30+
31+``` pascal
32+uses
33+ TADrawUtils, TADrawerCanvas, TABGRAUtils;
34+
35+procedure TForm1.Chart1BarSeries1CustomDrawBar(ASeries: TBarSeries;
36+ ADrawer: IChartDrawer; const ARect: TRect; APointIndex, AStackIndex: Integer);
37+var
38+ ic: IChartTCanvasDrawer;
39+begin
40+ if not Supports(ADrawer, IChartTCanvasDrawer, ic) then
41+ raise Exception.Create('This program requires a canvas drawer.');
42+
43+ DrawPhong3DBar(ASeries, ic.Canvas, ARect, APointIndex);
44+end;
45+```
46+
47+> **Note:** This code is valid for Lazarus v2.2+. In older versions, the event `TBarSeries.OnBeforeDrawBar` had to be used instead:
48+>
49+> ``` pascal
50+> uses
51+> TABGRAUtils;
52+>
53+> procedure TForm1.BeforeDrawBarHandler(ASender: TBarSeries; ACanvas: TCanvas;
54+> const ARect: TRect; APointIndex, AStackIndex: Integer; var ADoDefaultDrawing: Boolean);
55+> begin
56+> ADoDefaultDrawing:= false;
57+> DrawPhong3DBar(ASender, ACanvas, ARect, APointIndex);
58+> end;
59+> ```
60+
61+Then run the program. Your chart should look like this:
62+
63+<figure>
64+<img src="chartwithbgra.png" title="chartwithbgra.png" />
65+<figcaption>chartwithbgra.png</figcaption>
66+</figure>
67+
68+You can also use the `DrawChocolateBar` function. Set `PointsNumber` property of the `RandomChartSource1` to 5. Change the code of the `OnCustomDrawBar` (for Laz 2.2+, or `OnBeforeDrawBar` for older versions) to:
69+
70+``` pascal
71+uses
72+ TADrawUtils, TADrawerCanvas, TABGRAUtils;
73+
74+procedure TForm1.Chart1BarSeries1CustomDrawBar(ASeries: TBarSeries;
75+ ADrawer: IChartDrawer; const ARect: TRect; APointIndex, AStackIndex: Integer);
76+var
77+ ic: IChartTCanvasDrawer;
78+begin
79+ if not Supports(ADrawer, IChartTCanvasDrawer, ic) then
80+ raise Exception.Create('This program requires a canvas drawer.');
81+
82+ DrawChocolateBar(ASeries, icCanvas, ARect, APointIndex, True);
83+end;
84+
85+{ or for Lazarus before v2.2:
86+
87+procedure TForm1.BeforeDrawBarHandler(ASender: TBarSeries; ACanvas: TCanvas;
88+ const ARect: TRect; APointIndex, AStackIndex: Integer;
89+ var ADoDefaultDrawing: Boolean);
90+begin
91+ ADoDefaultDrawing:= false;
92+ DrawChocolateBar(ASender, ACanvas, ARect, APointIndex, True);
93+end;}
94+```
95+
96+<figure>
97+<img src="chartwithbgrachocolate.png" title="chartwithbgrachocolate.png" />
98+<figcaption>chartwithbgrachocolate.png</figcaption>
99+</figure>
100+
101+## Using BGRABitmap to render the whole chart
102+
103+Bars are not very different with or without antialiasing. Go to the Series property and remove the bars, add a *Line series*, and set its Source to RandomChartSource1. Then, set its property Depth to 10 and its SeriesColor property to clRed.
104+
105+<figure>
106+<img src="tachartlines3D.png" title="tachartlines3D.png" />
107+<figcaption>tachartlines3D.png</figcaption>
108+</figure>
109+
110+In order to change the rendering engine, look for the TChartGUIConnectorBGRA component in the Chart tab. Click to drop it on the chart. Then, click on the chart background and with the object inspector, set the GUIConnector property by choosing ChartGUIConnectorBGRA1. The rendering is now done with antialiasing, no need to start the program to see:
111+
112+<figure>
113+<img src="tachartlines3Dbgra.png" title="tachartlines3Dbgra.png" />
114+<figcaption>tachartlines3Dbgra.png</figcaption>
115+</figure>
116+
117+## Drawing a chart on any Canvas
118+
119+### Simple drawing
120+
121+First add the TAChartBGRA package. To render your chart, you can for example use a PaintBox. In the OnPaint event, write:
122+
123+``` pascal
124+uses BGRABitmap, TADrawerBGRA;
125+
126+procedure TForm1.PaintBox1Paint(Sender: TObject);
127+var
128+ bmp: TBGRABitmap;
129+ id: IChartDrawer;
130+ rp: TChartRenderingParams;
131+begin
132+ bmp := TBGRABitmap.Create(PaintBox1.Width, PaintBox1.Height);
133+ Chart1.DisableRedrawing;
134+ try
135+ id := TBGRABitmapDrawer.Create(bmp);
136+ id.DoGetFontOrientation := @CanvasGetFontOrientationFunc;
137+ rp := Chart1.RenderingParams;
138+ Chart1.Draw(id, Rect(0, 0, PaintBox1.Width, PaintBox1.Height));
139+ Chart1.RenderingParams := rp;
140+ bmp.Draw(PaintBox1.Canvas, 0, 0);
141+ finally
142+ Chart1.EnableRedrawing;
143+ bmp.Free;
144+ end;
145+end;
146+```
147+
148+<figure>
149+<img src="chartbgra.png" title="chartbgra.png" />
150+<figcaption>chartbgra.png</figcaption>
151+</figure>
152+
153+To avoid flickering, consider using TBGRAVirtualScreen from [[BGRAControls]].
154+
155+### Text effects
156+
157+To add text effects, you need the latest version of BGRABitmap, and the latest SVN of Lazarus. There is a FontRenderer property in each TBGRABitmap image, that you can define. You must not free the renderer, as it is automatically freed by the image.
158+
159+The text effects are provided by the BGRATextFX unit that contains the TBGRATextEffectFontRenderer class. To add a golden contour to the letters and a shadow, add the following lines:
160+
161+``` pascal
162+uses BGRATextFX, BGRAGradientScanner;
163+...
164+var
165+ ...
166+ fontRenderer: TBGRATextEffectFontRenderer;
167+ gold: TBGRAGradientScanner;
168+begin
169+ ...
170+ fontRenderer:= TBGRATextEffectFontRenderer.Create;
171+ fontRenderer.ShadowVisible := true; //adds a shadow
172+ fontRenderer.OutlineVisible := true; //show the outline
173+ gold := TBGRAGradientScanner.Create(CSSGold,CSSGoldenrod,gtLinear,PointF(0,0),PointF(20,20),true,true);
174+ fontRenderer.OutlineTexture := gold; //define the texture used for the outline
175+ fontRenderer.OuterOutlineOnly := true; //just the outer pixels of the text
176+ bmp.FontRenderer := fontRenderer; //gives the FontRenderer to the image (which becomes the owner of the renderer)
177+ ...
178+ gold.Free;
179+end;
180+```
181+
182+<figure>
183+<img src="chartbgrafonteffect.png" title="chartbgrafonteffect.png" />
184+<figcaption>chartbgrafonteffect.png</figcaption>
185+</figure>
186+
187+---
188+*From the Free Pascal wiki, page "BGRABitmap tutorial TAChart", as it stood on 2022-01-09 after a change by Wp, 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).*
189+Category: BGRABitmap
190+Category: Lazarus
191+Category: TAChart
192+Category: Tutorials

Back to history