BGRABitmap tutorial TAChart/fr: what changed

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

Title: BGRABitmap tutorial TAChart/fr

New		Line
1	+	Vous pouvez faire de beaux graphiques avec [[BGRABitmap/fr\|BGRABitmap]]. Ajoutez le paquet TAChartBGRA au projet depuis l'inspecteur de projet.
2	+
3	+	Il 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.
4	+
5	+	## Ajouter un graphique TAChart
6	+
7	+	Les 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.
8	+
9	+	Afin 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.
10	+
11	+	A 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.
12	+
13	+	<figure>
14	+	<img src="tachartrandombars.png" title="tachartrandombars.png" />
15	+	<figcaption>tachartrandombars.png</figcaption>
16	+	</figure>
17	+
18	+	Nous allons faire de la 3D, alors ajoutons de la profondeur. Pour cela, mettez la propriété Depth de la série à 10.
19	+
20	+	<figure>
21	+	<img src="tachartrandombars3D.png" title="tachartrandombars3D.png" />
22	+	<figcaption>tachartrandombars3D.png</figcaption>
23	+	</figure>
24	+
25	+	Enfin, cliquez sur le graphique et mettez la propriété Align à alClient afin de remplir la fenêtre.
26	+
27	+	## Décorer un graphique utilisant le rendu normal
28	+
29	+	Allez 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 :
30	+
31	+	``` pascal
32	+	uses TABGRAUtils;
33	+
34	+	procedure TForm1.BeforeDrawBarHandler(ASender: TBarSeries; ACanvas: TCanvas;
35	+	const ARect: TRect; APointIndex, AStackIndex: Integer;
36	+	var ADoDefaultDrawing: Boolean);
37	+	begin
38	+	ADoDefaultDrawing:= false;
39	+	DrawPhong3DBar(ASender, ACanvas, ARect, APointIndex);
40	+	end;
41	+	```
42	+
43	+	Ensuite, exécutez le programme.
44	+
45	+	Votre graphique ressemble maintenant à cela : ![](/wiki-images/e/e5/Chartwithbgra.png)
46	+
47	+	Vous 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 à :
48	+
49	+	``` pascal
50	+	uses TABGRAUtils;
51	+
52	+	procedure TForm1.BeforeDrawBarHandler(ASender: TBarSeries; ACanvas: TCanvas;
53	+	const ARect: TRect; APointIndex, AStackIndex: Integer;
54	+	var ADoDefaultDrawing: Boolean);
55	+	begin
56	+	ADoDefaultDrawing:= false;
57	+	DrawChocolateBar(ASender, ACanvas, ARect, APointIndex, True);
58	+	end;
59	+	```
60	+
61	+	<figure>
62	+	<img src="chartwithbgrachocolate.png" title="chartwithbgrachocolate.png" />
63	+	<figcaption>chartwithbgrachocolate.png</figcaption>
64	+	</figure>
65	+
66	+	## Utiliser BGRABitmap pour l'affichage de tout le graphique
67	+
68	+	Les 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.
69	+
70	+	<figure>
71	+	<img src="tachartlines3D.png" title="tachartlines3D.png" />
72	+	<figcaption>tachartlines3D.png</figcaption>
73	+	</figure>
74	+
75	+	Afin 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 :
76	+
77	+	<figure>
78	+	<img src="tachartlines3Dbgra.png" title="tachartlines3Dbgra.png" />
79	+	<figcaption>tachartlines3Dbgra.png</figcaption>
80	+	</figure>
81	+
82	+	## Afficher sur un Canvas quelconque
83	+
84	+	### Affichage simple
85	+
86	+	Pour afficher votre graphique, vous pouvez par exemple utiliser une PaintBox. Dans l'événement OnPaint, écrivez :
87	+
88	+	``` pascal
89	+	uses BGRABitmap, TADrawerBGRA;
90	+
91	+	procedure TForm1.PaintBox1Paint(Sender: TObject);
92	+	var
93	+	bmp: TBGRABitmap;
94	+	id: IChartDrawer;
95	+	rp: TChartRenderingParams;
96	+	begin
97	+	bmp := TBGRABitmap.Create(PaintBox1.Width, PaintBox1.Height);
98	+	Chart1.DisableRedrawing;
99	+	try
100	+	id := TBGRABitmapDrawer.Create(bmp);
101	+	id.DoGetFontOrientation := @CanvasGetFontOrientationFunc;
102	+	rp := Chart1.RenderingParams;
103	+	Chart1.Draw(id, Rect(0, 0, PaintBox1.Width, PaintBox1.Height));
104	+	Chart1.RenderingParams := rp;
105	+	bmp.Draw(PaintBox1.Canvas, 0, 0);
106	+	finally
107	+	Chart1.EnableRedrawing;
108	+	bmp.Free;
109	+	end;
110	+	end;
111	+	```
112	+
113	+	<figure>
114	+	<img src="chartbgra.png" title="chartbgra.png" />
115	+	<figcaption>chartbgra.png</figcaption>
116	+	</figure>
117	+
118	+	Pour éviter le scintillement, pensez à utiliser TBGRAVirtualScreen de [[BGRAControls]].
119	+
120	+	### Effet sur le texte
121	+
122	+	Pour 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.
123	+
124	+	Les 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 :
125	+
126	+	``` pascal
127	+	uses BGRATextFX, BGRAGradientScanner;
128	+	...
129	+	var
130	+	...
131	+	fontRenderer: TBGRATextEffectFontRenderer;
132	+	gold: TBGRAGradientScanner;
133	+	begin
134	+	...
135	+	fontRenderer:= TBGRATextEffectFontRenderer.Create;
136	+	fontRenderer.ShadowVisible := true; //ajoute une ombre
137	+	fontRenderer.OutlineVisible := true; //ajoute un contour
138	+	gold := TBGRAGradientScanner.Create(CSSGold,CSSGoldenrod,gtLinear,PointF(0,0),PointF(20,20),true,true);
139	+	fontRenderer.OutlineTexture := gold; //définit la texture utilisée pour le contour
140	+	fontRenderer.OuterOutlineOnly := true; //seulement le contour extérieur
141	+	bmp.FontRenderer := fontRenderer; //transmet le FontRenderer à l'image, qui devient le propriétaire de cet objet
142	+	...
143	+	gold.Free;
144	+	end;
145	+	```
146	+
147	+	<figure>
148	+	<img src="chartbgrafonteffect.png" title="chartbgrafonteffect.png" />
149	+	<figcaption>chartbgrafonteffect.png</figcaption>
150	+	</figure>
151	+
152	+	---
153	+	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