Sign in Join
Wiki copytemporary

BGRABitmap tutorial TAChart/fr: what changed

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

OldNewLine
11Vous pouvez faire de beaux graphiques avec [[BGRABitmap/fr|BGRABitmap]]. Ajoutez le paquet *TAChartBGRA* au projet depuis l'inspecteur de projet.
22
33Il se peut que le paquet n'apparaisse pas dans la liste ou ne soit pas installé. Dans ce cas, ouvrez-le manuellement avec le menu Paquet, Ouvrir un fichier paquet (.lpk). Il doit se trouver dans le composant *component\tachart*. Ensuite, cliquez sur le bouton du paquet pour l'installer.
44
55## Ajouter un graphique TAChart
66
77Les graphiques [[TAChart/fr|TAChart]] ont en fait pour nom de classe *TChart*. Pour ajouter un graphique, parcourez les onglets des composants que vous pouvez poser sur la fenêtre, et choisissez l'onglet Chart avant de cliquer sur l'icône de *TChart*. Dessinez un rectangle sur la fenêtre pour le poser.
88
99Afin de l'alimenter avec des données, cliquez sur l'icône de *TRandomChartSource* et cliquez une fois dans la fenêtre pour le poser. Dans l'inspecteur d'objet, mettez *PointsNumber* à 10, *XMax* à 10 et *YMax* à 10.
1010
1111A présent, créez une série qui utilise cette source. Pour cela, cliquez sur votre graphique et, dans l'inspecteur d'objet, allez dans la propriété *Series*. Cliquez sur les trois petits points : vous pouvez ajouter une *Bar series*. Dans les propriétés de cette série, déroulez la propriété *Source* et choisissez *RandomChartSource1*. Le graphique devrait se remplir de barres rouges.
1212
13-<figure>
14-<img src="tachartrandombars.png" title="tachartrandombars.png" />
15-<figcaption>tachartrandombars.png</figcaption>
16-</figure>
13+![](/wiki-images/3/3e/Tachartrandombars.png)
1714
1815Nous allons faire de la 3D, alors ajoutons de la profondeur. Pour cela, mettez la propriété *Depth* de la série à 10.
1916
20-<figure>
21-<img src="tachartrandombars3D.png" title="tachartrandombars3D.png" />
22-<figcaption>tachartrandombars3D.png</figcaption>
23-</figure>
17+![](/wiki-images/6/69/Tachartrandombars3D.png)
2418
2519Enfin, cliquez sur le graphique et mettez la propriété *Align* à *alClient* afin de remplir la fenêtre.
2620
2721## Décorer un graphique utilisant le rendu normal
2822
2923Allez dans la propriété *Series* de votre graphique. Choisissez une série de barres, puis dans l'inspecteur d'objet, allez dans l'onglet des événements et définissez *OnBeforeDrawBar*. Ajoutez le code suivant :
3024
3125``` pascal
3226uses TABGRAUtils;
3327
3428procedure TForm1.BeforeDrawBarHandler(ASender: TBarSeries; ACanvas: TCanvas;
3529 const ARect: TRect; APointIndex, AStackIndex: Integer;
3630 var ADoDefaultDrawing: Boolean);
3731begin
3832 ADoDefaultDrawing:= false;
3933 DrawPhong3DBar(ASender, ACanvas, ARect, APointIndex);
4034end;
4135```
4236
4337Ensuite, exécutez le programme.
4438
4539Votre graphique ressemble maintenant à cela : ![](/wiki-images/e/e5/Chartwithbgra.png)
4640
4741Vous pouvez également utiliser la fonction *DrawChocolateBar*. Mettez la propriété *PointsNumber* de l'objet *RandomChartSource1* à 5, et changez le code de l'événement *OnBeforeDrawBar* de la série à :
4842
4943``` pascal
5044uses TABGRAUtils;
5145
5246procedure TForm1.BeforeDrawBarHandler(ASender: TBarSeries; ACanvas: TCanvas;
5347 const ARect: TRect; APointIndex, AStackIndex: Integer;
5448 var ADoDefaultDrawing: Boolean);
5549begin
5650 ADoDefaultDrawing:= false;
5751 DrawChocolateBar(ASender, ACanvas, ARect, APointIndex, True);
5852end;
5953```
6054
61-<figure>
62-<img src="chartwithbgrachocolate.png" title="chartwithbgrachocolate.png" />
63-<figcaption>chartwithbgrachocolate.png</figcaption>
64-</figure>
55+![](/wiki-images/4/46/Chartwithbgrachocolate.png)
6556
6657## Utiliser BGRABitmap pour l'affichage de tout le graphique
6758
6859Les barres ne sont pas très différentes avec ou sans anticrénelage. Allez dans la propriété *Series* de votre graphique, supprimez les barres, ajoutez une *Line series*, et mettez sa *Source* à *RandomChartSource1*. Ensuite, mettez sa propriété *Depth* à 10 et sa propriété *SeriesColor* à *clRed*.
6960
70-<figure>
71-<img src="tachartlines3D.png" title="tachartlines3D.png" />
72-<figcaption>tachartlines3D.png</figcaption>
73-</figure>
61+![](/wiki-images/f/f9/Tachartlines3D.png)
7462
7563Afin de changer le moteur de rendu du graphique, cherchez le composant *TChartGUIConnectorBGRA* dans l'onglet Chart. Cliquez pour le poser sur le graphique. Ensuite, cliquez sur le fond du graphique et avec l'inspecteur d'objet, définissez la propriété *GUIConnector* en déroulant et en choisissant *ChartGUIConnectorBGRA1*. Le rendu se fait maintenant avec anticrénelage, sans avoir à lancer le programme :
7664
77-<figure>
78-<img src="tachartlines3Dbgra.png" title="tachartlines3Dbgra.png" />
79-<figcaption>tachartlines3Dbgra.png</figcaption>
80-</figure>
65+![](/wiki-images/5/50/Tachartlines3Dbgra.png)
8166
8267## Afficher sur un *Canvas* quelconque
8368
8469### Affichage simple
8570
8671Pour afficher votre graphique, vous pouvez par exemple utiliser une *PaintBox*. Dans l'événement *OnPaint*, écrivez :
8772
8873``` pascal
8974uses BGRABitmap, TADrawerBGRA;
9075
9176procedure TForm1.PaintBox1Paint(Sender: TObject);
9277var
9378 bmp: TBGRABitmap;
9479 id: IChartDrawer;
9580 rp: TChartRenderingParams;
9681begin
9782 bmp := TBGRABitmap.Create(PaintBox1.Width, PaintBox1.Height);
9883 Chart1.DisableRedrawing;
9984 try
10085 id := TBGRABitmapDrawer.Create(bmp);
10186 id.DoGetFontOrientation := @CanvasGetFontOrientationFunc;
10287 rp := Chart1.RenderingParams;
10388 Chart1.Draw(id, Rect(0, 0, PaintBox1.Width, PaintBox1.Height));
10489 Chart1.RenderingParams := rp;
10590 bmp.Draw(PaintBox1.Canvas, 0, 0);
10691 finally
10792 Chart1.EnableRedrawing;
10893 bmp.Free;
10994 end;
11095end;
11196```
11297
113-<figure>
114-<img src="chartbgra.png" title="chartbgra.png" />
115-<figcaption>chartbgra.png</figcaption>
116-</figure>
98+![](/wiki-images/3/3a/Chartbgra.png)
11799
118100Pour éviter le scintillement, pensez à utiliser *TBGRAVirtualScreen* de [[BGRAControls]].
119101
120102### Effet sur le texte
121103
122104Pour ajouter des effets sur le texte, vous aurez besoin d'au moins BGRABitmap v6.6 et de la dernière version SVN de Lazarus. Il y a une propriété *FontRenderer* pour chaque image *TBGRABitmap*, que vous pouvez définir. Vous ne devez pas libérer la mémoire de l'objet, car cela sera automatiquement fait par l'image.
123105
124106Les effets de texte sont fournis par l'unité *BGRATextFX* qui contient la classe *TBGRATextEffectFontRenderer*. Pour ajouter un contour doré aux lettres et une ombre, ajoutez les lignes suivantes :
125107
126108``` pascal
127109uses BGRATextFX, BGRAGradientScanner;
128110...
129111var
130112 ...
131113 fontRenderer: TBGRATextEffectFontRenderer;
132114 gold: TBGRAGradientScanner;
133115begin
134116 ...
135117 fontRenderer:= TBGRATextEffectFontRenderer.Create;
136118 fontRenderer.ShadowVisible := true; //ajoute une ombre
137119 fontRenderer.OutlineVisible := true; //ajoute un contour
138120 gold := TBGRAGradientScanner.Create(CSSGold,CSSGoldenrod,gtLinear,PointF(0,0),PointF(20,20),true,true);
139121 fontRenderer.OutlineTexture := gold; //définit la texture utilisée pour le contour
140122 fontRenderer.OuterOutlineOnly := true; //seulement le contour extérieur
141123 bmp.FontRenderer := fontRenderer; //transmet le FontRenderer à l'image, qui devient le propriétaire de cet objet
142124 ...
143125 gold.Free;
144126end;
145127```
146128
147-<figure>
148-<img src="chartbgrafonteffect.png" title="chartbgrafonteffect.png" />
149-<figcaption>chartbgrafonteffect.png</figcaption>
150-</figure>
129+![](/wiki-images/7/7e/Chartbgrafonteffect.png)
151130
152131---
153132*From the Free Pascal wiki, page "BGRABitmap tutorial TAChart/fr", as it stood on 2020-02-10 after a change by Trev, 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).*

Back to history