diapositive 2

"Affichage d'informations graphiques en Delphi" Plan du sujet : Façons d'afficher des informations graphiques en Delphi. Affichage des images. Affichage de formes géométriques. Construction de graphiques et de schémas.

diapositive 3

1. Méthodes d'affichage des informations graphiques. Il existe plusieurs manières d'afficher des informations graphiques dans Delphi : Sortie d'images pré-préparées (composants Image, Shape) ; Construction de graphiques et de diagrammes (Composant graphique, etc.); Formation d'images par programmation (objet Canvas).

diapositive 4

Affichage des images. L'affichage d'images à l'aide du composant Image a été abordé dans l'une des rubriques précédentes. Ici, nous allons considérer un exemple de mise en œuvre de l'animation la plus simple en modifiant périodiquement l'image affichée dans les composants Image. Aller à l'exemple.

diapositive 5

Affichage de formes géométriques. L'affichage des formes géométriques les plus simples sur le formulaire est assuré par le composant Forme.

diapositive 6

Affichage de formes géométriques. Les principales propriétés du composant Shape :

Diapositive 7

Affichage de formes géométriques. Vous pouvez créer des dessins simples à partir de plusieurs composants Shape. En modifiant par programme la position (.Left, .Top), la taille (.Width, .Height) et la couleur (Brush.Color) des composants Shape dans le dessin, vous pouvez implémenter des éléments de l'animation la plus simple. Prenons un exemple.

Diapositive 8

Construction de graphiques et de schémas. Les diagrammes sont destinés à une représentation plus visuelle de tableaux de données numériques, à leur affichage visuel et à leur analyse. Exemple. Pour construire des graphiques dans Delphi, il existe plusieurs composants, l'un d'eux est le composant Chart (section TeeChart Std).

Diapositive 9

Construction de graphiques et de schémas. Vue du composant Chart après son installation sur le formulaire :

Diapositive 10

Construction de graphiques et de schémas. En plus de "l'inspecteur d'objets", l'accès aux propriétés du composant Chart peut être obtenu en ouvrant une boîte de dialogue spéciale (bouton droit sur le composant \Edit Chart ...) Ajouter une série de données Changer le type de graphique

diapositive 11

Construction de graphiques et de schémas. Sélection du type de graphique :

diapositive 12

Construction de graphiques et de schémas. Définition des propriétés des axes de coordonnées (Axis) :

diapositive 13

Construction de graphiques et de schémas. Les données à afficher sont généralement transmises au graphique par programme, par exemple : Series1.Clear ; (clear series) for i:=1 to N do Series1.addxy(i, A[i], '', clGreen); Valeur sur l'axe des X Valeur sur l'axe des Y Libellé sur l'axe des X Couleur des données sur le graphique Considérons un exemple de tracé de la fonction y = Sin(x)

Diapositive 14

Suivant : Laboratoire #13.1. "Afficher des images et des formes géométriques, leur animation." Tâche : 1) Développer une application pour la mise en œuvre de l'animation la plus simple en modifiant périodiquement l'image affichée dans les composants Image. (Le nombre d'images est d'au moins trois, choisissez les images vous-même).

diapositive 15

Tâche : 2) Inventez et dessinez une image à partir des composants Shape. En modifiant par programme la position, la taille ou la couleur des composants Shape dans le dessin, implémentez des éléments de l'animation la plus simple.

diapositive 16

Suivant : Laboratoire #12.2. "Construire des graphiques et des diagrammes". Devoir : Modifier l'application du laboratoire 9 (Afficher des données dans un tableau). Ajoutez la possibilité d'afficher certaines données du tableau sur un graphique à barres ou à secteurs. 2) Construire un graphe d'une fonction donnée.

Voir toutes les diapositives

Description de la présentation sur des diapositives individuelles :

1 diapositive

Description de la diapositive :

2 diapositives

Description de la diapositive :

L'environnement de programmation visuelle Delphi, comme Windows, prend en charge une interface utilisateur graphique (GDI - Graphic Delphi Interface). Il existe deux manières d'afficher des informations graphiques dans Delphi : sortie d'images pré-préparées ; dessin du programme.

3 diapositives

Description de la diapositive :

La première méthode est basée sur l'utilisation des composants Image et Shape. Vous pouvez utiliser une image prête à l'emploi (pictogramme) ou les créer vous-même à l'aide de l'éditeur d'images. La deuxième méthode consiste à générer des images par programmation à l'aide de l'objet Canvas.

4 diapositives

Description de la diapositive :

Delphi a à sa disposition un objet spécial, qui est formaté comme une propriété Canvas. Il n'est disponible que lorsque l'application est en cours d'exécution, il ne peut donc être contrôlé qu'à partir du programme en écrivant le code nécessaire dans le langage Object Pascal. Si un objet possède une propriété Canvas, vous pouvez dessiner sur sa surface. Les candidats les plus appropriés pour ce rôle sont le formulaire lui-même et le composant spécial PaintBox.

5 diapositives

Description de la diapositive :

Propriétés de l'objet Canvas : Stylo (plume) - propriété permettant de tracer des lignes et des bordures de formes géométriques. Le stylet suit les commandes du curseur graphique et, à son tour, possède ses propres propriétés imbriquées : Couleur - définit la couleur de la ligne (noir par défaut) ; Mode - style de dessin (a de nombreuses valeurs qui ne sont pas données ici); Style – style de ligne, qui peut prendre les valeurs suivantes : psSolid – solide (par défaut) ; psDosh - ligne pointillée ; psDot - ligne pointillée ; psDoshDot - tiret pointillé (et autres propriétés); Largeur - épaisseur de ligne (1 pixel par défaut) ;

6 diapositives

Description de la diapositive :

Pinceau (Pinceau) - une propriété pour remplir les formes qui ont les propriétés imbriquées suivantes : Couleur - couleur du pinceau (par défaut - blanc) ; Style - ornement de pinceau, qui peut prendre les valeurs suivantes : bsClear - coloration unie ; bsHorizontal - lignes horizontales ; bsVertical - lignes verticales ; bsFDiagonal - lignes diagonales gauches ; bsBDiagonal - lignes diagonales droites; bsCroix - cellule ; bsDiagCross - cellule oblique ;

7 diapositive

Description de la diapositive :

Police (Font) - une propriété pour afficher du texte, qui a les propriétés imbriquées suivantes : Couleur - la couleur des caractères ; Hauteur - hauteur de la police en pixels ; Nom – nom de la police ; Taille - taille de la police ; Style - style de police, qui peut prendre les valeurs suivantes : fsBold - gras ; fsItalique - italique fsUnderline - souligné fsStrikeOut - barré ;

8 diapositives

Description de la diapositive :

PenPos (position du stylo) - une propriété pour stocker la position de dessin actuelle (détermine la position du stylo dans la zone de dessin à un moment donné) ; Pixels - propriété de tableau pour écrire et lire les coordonnées de points individuels de la zone de dessin ("toile").

9 diapositive

Description de la diapositive :

Méthodes de l'objet Canvas MoveTo(x,y: integer) – déplace le stylo de la position actuelle au point avec les coordonnées x, y données sans tracer de ligne ; LineTo(х.у: integer) - déplace le stylo de la position actuelle au point avec les coordonnées x, y données, en traçant une ligne ; Arc(x1, y1, x2, y2, x3, y3, x4, y4 : entier) - dessine un arc d'ellipse inscrit dans un rectangle de coordonnées (x1, y1) et (x2, y2). L'arc est déterminé par les rayons de l'ellipse passant par les points (x3, y3) et (x4, y4) ;

10 diapositives

Description de la diapositive :

Chord(x1, y1, x2, y2, x3, y3, x4, y4: integer) – dessine une corde d'ellipse comme décrit pour la méthode Arc ; Ellipse(x1, y1, x2, y2 : nombre entier) - dessine une ellipse inscrite dans un rectangle avec le coin supérieur gauche au point (x1, y1) et le coin inférieur droit au point (x2, y2) ; FillRect (Rect (x1, y1, x2, y2: integer)) - remplit le rectangle avec la couleur spécifiée dans le pinceau actuel (Brush). Utilise la fonction Rect, qui représente un rectangle aux coordonnées données ;

11 diapositive

Description de la diapositive :

FloodFill(x,y: integer; Color: TColor; FillStyle: TFillStyle) - remplissage avec la couleur actuelle spécifiée dans la propriété Brush : with FillStyle=fsBorder - une zone fermée du point avec les coordonnées x, y à la bordure définie par le couleur de couleur; avec FillStyle=fsSurface – cette zone de la surface qui a la couleur Couleur ; Pie(x1, y1, x2, y2, x3, y3, x4, y4 : entier) - dessine un secteur d'une ellipse inscrite dans un rectangle de coordonnées (x1, y1) et (x2, y2). Le secteur est défini par deux rayons d'ellipse passant par les points (x3, y3) et (x4, y4) ;

12 diapositives

Description de la diapositive :

Polyline (Points : array of TPoint) – dessine une polyligne en connectant séquentiellement les points du tableau Points ; Polygon (Points : tableau de TPoint) - dessine des polygones en connectant séquentiellement les points du tableau Points. Elle diffère de la méthode Polyligne en ce qu'elle connecte automatiquement la fin de la polyligne à son début ; Rectangle (x1, y1, x2, y2 : entier) - dessine un rectangle avec le coin supérieur gauche au point (x1, y1) et le coin inférieur droit au point (x2, y2) ;

13 diapositive

Description de la diapositive :

Retresh - la méthode est appelée lorsque l'image doit être redessinée ; RoundRect (x1, y1, x2, y2, x3, y3 : entier) - Dessine un rectangle avec des coins arrondis. Les coins sont dessinés comme des quarts d'ellipse de largeur x3 et de hauteur y3 ; TextOut (x, y:integer, Text:String) - affiche le texte spécifié dans le paramètre Text. Le texte tient dans un rectangle dont le coin supérieur gauche a des coordonnées x, y.

TRAVAIL EN LABORATOIRE

SUJET: « Graphiques dansDelphes- construction du plus simple
formes géométriques"

Brève information de la théorie

Delphi propose au développeur trois manières d'afficher les graphiques :

tracer pendant que le programme est en cours d'exécution

utilisation de graphiques pré-créés

créer des images à l'aide de composants graphiques

Pour le traçage, des classes spéciales ont été créées qui fournissent des outils et des méthodes de dessin : les outils sont décrits dans trois classes - Tfont, Tpen, Tbrush ; la zone de dessin et les méthodes sont fournies par la classe Tcanvas.

ClasserTpolice- définit les caractéristiques de la police utilisée pour afficher le texte sur le canevas. Les propriétés de la classe sont décrites dans la section "Propriétés de base disponibles pour la plupart des composants".

Classertpen– définit les caractéristiques du stylo (crayon) avec lequel les lignes sont tracées.

Propriétés classer tpen:

Couleur:Tcolor - couleur de ligne (noir par défaut)

Largeur:integer – épaisseur de ligne en pixels ;

style = (psSolid, psDash, psDot, psdashDot, psClear) - définit le style de ligne (solide, pointillé, pointillé, tiret-point, invisible)

ClasserTbrosse– définit les caractéristiques du pinceau utilisé pour peindre sur les surfaces de l'image.

Propriétés classer Tbrosse:

Couleur:Tcolor - couleur du pinceau (la valeur par défaut est le blanc)

style- ornement pinceau, peut prendre les valeurs suivantes :

BsSolid - coloration solide

BsClear - pas de remplissage

BsVertical - lignes verticales

BsBdiagonal - lignes diagonales droites

BsDiagCross - cellule oblique

BsHorizontal - lignes horizontales

BsFdiagonal - lignes diagonales gauches

BsCross - cellule

Classertissus- définit la surface sur laquelle l'image créée est placée et les outils avec lesquels l'image est créée : police, crayon, pinceau.

Par défaut, toute la zone client du formulaire est utilisée comme zone de travail (canvas, "canvas") (sans le titre, le menu principal et les lignes de défilement du formulaire), mais vous pouvez allouer des zones de travail plus petites à l'intérieur du formulaire utilisation de composants boîte de peinture ou Image. L'origine de la toile est le coin supérieur gauche de la zone de travail, la largeur de la zone de travail est déterminée par la propriété ClientLargeur, hauteur - propriété ClientHeight.

Propriétés classer tissus:

Toile:Tcanvas - définit la zone de dessin

Brosser:Tbrush - pinceau pour peindre des formes fermées

Police de caractère:Tfont - police pour afficher le texte sur le canevas

Stylo:Tpen - crayon (stylo) pour dessiner

PenPos:Tpoint - la position actuelle du curseur invisible sur le canevas

Commentaire : Type de point T - défini comme suit :

Tapez Tpoint = enregistrement

Pixel : Tcolor - définit les couleurs des pixels du canevas, X, Y - les coordonnées des pixels. La propriété Pixels est utile pour tracer des graphiques à l'aide de points de la couleur sélectionnée.

Principales méthodes de la classe TCanvas

procédure Déménager à(x,y:entier); - déplace le stylo sans tracer de ligne vers un point de coordonnées (x, y).

procédure LigneÀ(x,y:entier); - trace une ligne du point courant au point de coordonnées (x, y).

Exemple : tracez une ligne diagonale bleue sur la forme depuis le coin supérieur gauche de la forme jusqu'au coin inférieur droit.

Pen.color:= clblue;

MoveTo(0,0); LineTo(ClientWidth, ClientHeight);

procédure Rectangle(x1,y1,x2,y2:entier); - dessine un rectangle : x1, y1 - coordonnées du coin supérieur gauche ; x2, y2 - coordonnées du coin inférieur droit.

Exemple : Dessinez un carré rempli de jaune de 60 px au milieu de la forme.

var Xc,Yc : entier ; //

Xc:=LargeurClient div 2 ;

Xy :=HauteurClient div 2 ;

Canvas.Brush.color:=cljaune;

Toile.rectangle(xc-30,Yc-30,xc+30,Yc+30);

procédure Ellipse(x1,y1,x2,y2:entier); - dessine une ellipse inscrite dans un rectangle avec les coordonnées spécifiées.

Exemple : dessine une ellipse qui est inscrite dans le composant PaintBox.

PaintBox1.Canvas.Pen.Width :=4 ; //largeur de ligne = 4 pixels

PaintBox1.Canvas.Ellipse(0,0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

procédure Polygone(); - dessine un polygone fermé, donné par un tableau de coordonnées.

Exemple : dessine un losange plein reliant les milieux des côtés de la forme

Var Xc,Yc :entier ; // formulaire espace client coordonnées du centre

Xc:=LargeurClient div 2 ;

Xy :=HauteurClient div 2 ;

Canvas.Brush.Color:=Rgb(275,140,70); // Orange Couleur ombres

Canvas.Polygon();

fin;

procédure Arc(x1,y1,x2,y2,x3,y3,x4,y4:entier); - affiche un arc d'ellipse délimité par un rectangle (x1, y1, x2, y2). L'arc est affiché d'un point de coordonnées (x3,y3) à un point de coordonnées (x4,y4) contre petite aiguille.

Exemple : dessine un arc d'ellipse reliant le milieu du côté supérieur du composant
PaintBox avec le milieu de son côté droit.

Procédure Tform1.Button1Click(Sender:Tobject);

Var X3,y3,x4,y4 : Entier ;

Avec PaintBox1 faire

Canvas.Pen.Color:= clWhite;

Canvas.Pen.Width:= 3;

Canvas.rectangle(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

X3 := ClientWidth div 2 ;

X4 :=LargeurClient ;

Y4 := ClientHeight div 2 ;

Canvas.Pen.Color:= clMaroon;

Canvas.ARC(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight, x3, y3, x4, y4);

fin;

procédure Accord(x1,y1,x2,y2,x3,y3,x4,y4:entier); - dessine une corde - une droite reliant 2 points de l'ellipse : un point de coordonnées (x3, y3) avec un point (x4, y4).

Exemple : substituer dans l'exemple donné pour la méthode ARC, la méthode Chord et obtenir ce résultat.

procédure Tarte(x1,y1,x2,y2,x3,y3,x4,y4:entier); - dessine un segment d'ellipse reliant le centre de l'ellipse de coordonnées (x3,y3) et (x4,y4).

Exemple : présent dans l'exemple donné pour la méthode ARC, la méthode PIE et obtenir ce résultat.

procédure sortie de texte(x,y:entier;Texte:chaîne); - affiche la chaîne passée dans le paramètre Texte dans un rectangle dont le coin supérieur gauche est spécifié par des coordonnées x,y. Les caractéristiques de la police sont définies par l'outil Police.

Exemple : écrivez le nom du graphe construit en bas du formulaire.

Canvas.Font.Height :=20 ; // hauteur des caractères 20 pixels

Canvas.Font.Color:=clblue;

Canvas.TextOut(10, ClientHeight-24, 'Graphe de fonction SIN(X)');

Composants graphiques

Delphi propose un certain nombre de composants prêts à l'emploi pour améliorer l'interface utilisateur. Ces composants sont placés sur la page Supplémentaire et Système palette de composants.

ComposantImage(ClasserTemps) – conçu pour afficher des images graphiques stockées dans des fichiers externes avec des extensions :

Ico(icône, pictogramme) ;

bmp (bitmap, bitmap);

Wmf, .emf (métafichier);

Jpg, .jpeg (image compressée JPEG).

Principal Propriétés :

dimensionnement automatique:boolean - si vrai, le composant ajuste sa taille à la taille de l'image chargée ; faux par défaut.

Extensible:booléen - si vrai, la valeur chargée occupe toute la surface du composant ; la valeur par défaut est fausse.

Toile:Tcanvas - Utilisé pour dessiner à l'intérieur du composant au moment de l'exécution.

image:Tpicture - Spécifie l'image placée dans le composant.

Principal méthodes classer image:

procédure ChargerDepuisFichier(nom de fichier : chaîne ); - charge une image dans le composant à partir d'un fichier nommé Filename.

procédure Enregistrer dans le fichier(nom de fichier : chaîne ); -enregistre l'image du composant dans un fichier nommé Filename.

Composantboîte de peinture - définit une zone rectangulaire à dessiner. La propriété principale est Toile, toutes les méthodes de la classe Tcanvas sont disponibles, elle n'a pas de propriétés indépendantes.

Exemple : dessine une ellipse jaune inscrite dans le composant PaintBox1.

Procédure Tform1Button1Click(sender:Tobject);

Avec PaintBox1.Canvas faire

Pinceau.Couleur :=cljaune ;

Ellipse(0,0,PaintBox1.ClientWidth, PaintBox1.ClientHeight);

fin;

ComposantBitBtn – bouton bitmap

Le bouton BitBtn, contrairement au bouton standard, peut contenir, en plus du nom (Caption), une image spécifiée par la propriété Glyphe. Il existe un ensemble de boutons BitBtn standard, avec des propriétés prédéfinies (avec une image, une légende et un objectif spécifiques) - le type de bouton standard est sélectionné via la propriété gentil. Kind=(bkCustom, bkAbort,bkCancel, bkClose...)

Tâche numéro 1

Créez une application qui contient deux composants Image et 4 boutons sur le formulaire principal (« Upload Image », « Build Geometric Shape », « Change Color », « Exit »), et vous permet de :

a) charger dans le composant Image1 une image graphique sélectionnée par l'utilisateur de manière à ce que l'image occupe toute la surface du composant Image.

b) sous le composant Image1, affichez l'inscription « Ceci est une image d'un fichier.

(pour toute mesure des dimensions et de la position du composantImage1 inscription obligatoire
être strictement en dessous du composant).

c) dessinez une forme géométrique à l'intérieur du composant Image2 : un segment plein d'une ellipse reliant le milieu du composant Image aux points médians des côtés inférieur et droit du composant Image.

(avec tout changement dans la taille et la position du composantImage2, la figure doit être construite correctement, c'est-à-dire selon l'affectation concernant le composantImage2)

d) modifier la couleur de ligne de la figure dessinée dans Image2 à la demande de l'utilisateur à l'aide du composant ColorDialog.

Tâche numéro 2

Créez une application qui vous permet de placer de manière aléatoire plusieurs étiquettes dans un composant Image (par exemple, le mot "Hourra !"). Pour implémenter, utilisez le générateur de nombres aléatoires Randomize et la fonction Random.

Les dimensions du composant Image, le mot affiché dans l'Image et le nombre de mots doivent être renseignés par l'utilisateur.

Tâche numéro 3

Créez une application qui vous permet de sélectionner le nom d'une forme géométrique dans la ListBox et de dessiner la forme sélectionnée dans le composant Image. La couleur de la forme est sélectionnée à partir du composant RadioGroup.

Tâche numéro 4

Divisez le composant PaintBox1 en 4 parties égales, peignez chaque partie avec une couleur différente, par exemple : bleu, jaune, vert, rouge.

À côté de chaque coin de PaintBox1, écrivez les coordonnées de ce coin (par rapport à l'origine de la forme sur laquelle se trouve le composant PaintBox1).

Tâche numéro 5

DE

sélectionnez le type de la figure dessinée dans le composant Radiogroup1, la couleur de remplissage dans le composant Radiogroup2 et dessinez la figure sélectionnée dans le composant Image.

Tâche numéro 6

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Divisez le composant PaintBox1 en 2 parties égales, à l'intérieur de chaque partie dessinez une ellipse remplie de la couleur sélectionnée par l'utilisateur dans le ColorDialog.

Tâche numéro 7

DE créer une application qui vous permet de :

sélectionnez le nom de la figure géométrique dans la liste ListBox et dessinez la figure sélectionnée dans le composant Image. La forme doit être remplie avec la couleur sélectionnée par l'utilisateur dans le composant ColorDialog si Oui est sélectionné dans le composant RadioGroup.

Tâche numéro 8

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Divisez le composant PaintBox1 en 4 parties égales, à l'intérieur de chaque partie dessinez une forme géométrique différente (ellipse, losange, triangle et rectangle). La couleur de chaque forme est sélectionnée par l'utilisateur dans le ColorGrid.

Tâche numéro 9

sélectionnez le nom de la géométrie dans la ListBox
formes (ellipse, losange, rectangle) et dessiner
la forme sélectionnée dans le composant Image. Emplacement
formes dans le composant Image (I quart, II quart,

III ou IV trimestre) et la couleur de remplissage de la figure est sélectionnée
des composants RadioGroup.

Tâche numéro 10

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Prévoyez que la taille du côté ne peut pas être du texte, ne peut pas être un nombre négatif et ne peut pas dépasser la plus petite taille du formulaire.

Divisez le composant PaintBox1 en 4 parties égales, à l'intérieur de chaque partie dessinez une forme géométrique sélectionnée par l'utilisateur dans la Combobox (ellipse, losange, triangle et rectangle). La couleur de la forme est sélectionnée par l'utilisateur dans la ColorBox.

Tâche numéro 11

Créez une application qui vous permet de :

sélectionnez la position du drawable dans le composant Radiogroup

dans le composant Image du triangle rectangle, définissez
la couleur de remplissage de la forme ou la couleur du contour, selon
activant les boutons Case à cocher. Sélection des couleurs via
Composant ColorGrid.

Tâche numéro 12

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Prévoyez que la taille du côté ne peut pas être du texte, ne peut pas être un nombre négatif et ne peut pas dépasser la plus petite taille du formulaire.

Divisez le composant PaintBox1 en 2 parties égales, à l'intérieur de l'une des parties dessinez une figure géométrique sélectionnée par l'utilisateur dans la Combobox (ellipse, losange, triangle et rectangle). La couleur de la forme est sélectionnée par l'utilisateur dans la ColorBox.

Par exemple, vous pouvez changer la couleur d'un formulaire comme ceci :

form1.Color:= ColorBox1.Colors ;

Tâche numéro 13

Créez une application qui vous permet de :

a) dessinez un carré au milieu de la forme (la taille du côté du carré est entrée par l'utilisateur). Prévoyez que la taille du côté ne peut pas être du texte, ne peut pas être un nombre négatif et ne peut pas dépasser la plus petite taille du formulaire.

b) diviser le carré avec une ou deux diagonales, selon l'inclusion des boutons de la case à cocher, et peindre sur chaque triangle résultant dans une couleur différente. Le choix de la couleur est fait par l'utilisateur.

Tâche numéro 14

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Prévoyez que la taille du côté ne peut pas être du texte, ne peut pas être un nombre négatif et ne peut pas dépasser la plus petite taille du formulaire.

Divisez le composant PaintBox1 en 2 parties égales, dessinez un losange à l'intérieur d'une partie et dessinez n'importe quel triangle à l'intérieur de l'autre partie. La couleur de la forme est sélectionnée par l'utilisateur dans la ColorBox.

Par exemple, vous pouvez changer la couleur d'un formulaire comme ceci :

form1.Color:= ColorBox1.Colors ;

Tâche numéro 15

Créez une application qui vous permet de :

a) définir les dimensions du composant Image horizontalement et verticalement pour qu'elles soient identiques et égales au nombre entré par l'utilisateur à partir du clavier ;

(à condition que la taille du côté ne puisse pas être du texte, ne puisse pas être un nombre négatif et ne puisse pas dépasser la plus petite taille du formulaire)

b) diviser le composant Image en 4 carrés égaux avec deux lignes bleues ;

c) à l'intérieur de chaque carré résultant, dessinez un cercle qui y est inscrit (la couleur des cercles peut être sélectionnée par l'utilisateur via la boîte de dialogue de sélection de couleur).

Tâche numéro 16

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Prévoyez que la taille du côté ne peut pas être du texte, ne peut pas être un nombre négatif et ne peut pas dépasser la plus petite taille du formulaire.

Divisez le composant PaintBox1 en 9 parties égales et peignez chaque rectangle en damier résultant. La couleur de remplissage est sélectionnée par l'utilisateur dans la ColorBox.

Par exemple, vous pouvez changer la couleur d'un formulaire comme ceci :

form1.Color:= ColorBox1.Colors ;

Tâche numéro 17

Placez deux composants Image et quatre boutons sur le formulaire : Couleur de ligne, Couleur de remplissage, OK et Quitter ; et le composant Modifier.

Lorsque vous cliquez sur le bouton OK, Image1 dessine un carré de côté X et Image2 dessine un triangle rectangle avec des jambes égales, chacune ayant une longueur X.

Le sommet du triangle coïncide avec l'origine de Image2. L'un des sommets du carré coïncide avec l'origine de Image1.

Le bouton OK devient disponible uniquement lorsque la couleur de ligne et la couleur de remplissage pour dessiner la forme sont sélectionnées.

X - sélectionne au hasard, en utilisant la fonction Random et la valeur de la valeur X doit être affichée dans le composant Edit.

Tâche numéro 18

Créez une application qui permet à l'utilisateur de définir les dimensions du composant PaintBox1 (en pixels).

Divisez le composant PaintBox1 en 4 parties égales, à l'intérieur de la partie sélectionnée par l'utilisateur, un cercle rempli doit être construit, dont la taille est définie par l'utilisateur. L'utilisateur sélectionne la couleur de remplissage dans la ColorBox.

Par exemple, vous pouvez changer la couleur d'un formulaire comme ceci :

form1.Color:= ColorBox1.Colors ;

Liste des composants pour l'affichage des informations graphiques

Pour afficher des informations graphiques, la bibliothèque Delphi fournit des composants dont la liste est donnée dans le tableau 4.1.

Tableau 4.1 Pictogramme des composants de l'affichage des informations graphiques	Composant	Page	La description
Image (image)		Utilisé pour afficher des graphiques : icônes, bitmaps et métafichiers.
PaintBox (fenêtre pour dessiner)		Utilisé pour créer une zone sur le formulaire dans laquelle vous pouvez dessiner.
DrawGrid (table de dessin)		Utilisé pour afficher des données non textuelles dans des lignes et des colonnes.
Tableau (tableaux et graphiques)		Le composant appartient à la famille de composants TChart utilisés pour créer des diagrammes et des graphiques.

Vous pouvez également afficher et saisir des informations graphiques sur la surface de n'importe quel canevas.

Toile Toile n'est pas un composant, donc, à proprement parler, il ne doit pas être considéré dans le cadre de ce livre. Mais étant donné que de nombreux composants, en particulier les formulaires, ont un canevas et que le canevas offre la possibilité d'afficher diverses informations graphiques, il est toujours conseillé de donner quelques informations initiales sur le canevas.

Un canevas est une zone d'un composant où vous pouvez dessiner ou afficher des images finies. Il contient des propriétés et des méthodes qui simplifient grandement les graphiques Delphi. Toutes les interactions complexes avec le système sont masquées pour l'utilisateur, de sorte qu'une personne qui n'est pas du tout avertie en infographie peut dessiner dans Delphi.

Chaque point de la toile a des coordonnées X et Oui. Le système de coordonnées du canevas, comme partout ailleurs dans Delphi, commence dans le coin supérieur gauche du canevas. Coordonner X augmente lors du déplacement de gauche à droite, et la coordonnée Oui- lors du déplacement de haut en bas. Les coordonnées sont mesurées en pixels. Un pixel est le plus petit élément sur la surface d'un dessin qui peut être manipulé. La propriété la plus importante d'un pixel est sa couleur.

La toile a la propriété pixels. Cette propriété est un tableau 2D qui contrôle les couleurs du canevas. Par exemple, Toile. pixels correspond à la couleur du pixel 10ème à partir de la gauche et 20ème à partir du haut. Un tableau de pixels peut être traité comme n'importe quelle propriété : changez la couleur en donnant au pixel une nouvelle valeur, ou déterminez sa couleur à partir de la valeur qui y est stockée. Par exemple, Toile. Pixel :=0 ou Toile. Pixels :=clNoir- c'est une tâche pour un pixel noir.

Propriété pixels peut être utilisé pour dessiner sur toile. Essayons de dessiner un graphique pixel par pixel d'une onde sinusoïdale sur le canevas de forme. Pour ce faire, dans le formulaire gestionnaire d'événements sur peinture(dessin) vous pouvez insérer le code suivant :

Tform1. FormPaint(Expéditeur : TObject);

var,Y : réel ; // coordonnées de la fonction,PY : entier long ; // coordonnées en pixels

commencer:=clBlanc;

pour PX :=0 à ClientLargeur fais

(X - argument de tracé,

:=PX*4*Pi/LargeurClient;:=Sin(X);

(PY - coordonnée pixel,

:=trunc(HauteurClient - (Y+1) *HauteurClient/2);

(Définit la couleur du

pixel (à propos de la luminosité) ). Pixel :=0 ;

fin;

Exécutez cette application de test et vous verrez le résultat illustré à la Figure 4.1 a. Le graphique sinusoïdal s'est avéré, bien que pas très bon, parce que. décomposé en points individuels - pixels.

Canvas - objet de classe TCanvas a de nombreuses méthodes qui vous permettent de dessiner des graphiques, des lignes, des formes en utilisant la propriété Stylo- la plume. Cette propriété est un objet, qui à son tour a un certain nombre de propriétés. L'un d'eux est une propriété que vous connaissez déjà Couleur- la couleur avec laquelle le dessin est appliqué. La deuxième propriété est Largeur(largeur de ligne). La largeur est spécifiée en pixels. La largeur par défaut est 1.

Propriété style définit le type de ligne. Cette propriété peut prendre les valeurs suivantes :

La toile a une propriété PenPos taper TPoint(cm .). Cette propriété détermine la position actuelle du stylo dans les coordonnées du canevas. Déplacer le stylo sans tracer de ligne, c'est-à-dire monnaie PenPos, produit par la méthode de la toile Déplacer vers(X,Y). Ici ( X, Y) - les coordonnées du point où le stylo se déplace. Ce point courant devient le point de départ, à partir duquel la méthode LigneVers(X,Y) vous pouvez tracer une ligne vers un point avec des coordonnées ( X, Y). Cela déplace le point actuel vers le point final de la ligne et le nouvel appel LigneÀ dessinera un point à partir de ce nouveau point courant.

Essayons de dessiner le graphique sinusoïdal de l'exemple précédent avec un stylo. Dans ce cas, le gestionnaire d'événements de formulaire sur peinture peut ressembler à :

procédure Tform1. FormPaint(Expéditeur : TObject);

var,Y : réel ; // coordonnées de la fonction,PY : entier long ; // coordonnées en pixels

commencer:=clBlanc;. MoveTo(0,ClientHeight div 2);

pour PX :=0 à ClientLargeur fais

(X - argument de tracé,

correspondant au pixel avec la coordonnée px):=PX*4*Pi/LargeurClient;:=Sin(X);

(PY - coordonnée pixel,

correspondant à la coordonnée Y):=trunc(HauteurClient - (Y+1) *HauteurClient/2);

(Une ligne est tracée sur le graphique). LigneVers(PX,PY);

Vous pouvez voir le résultat de l'application dans cette version dans la Figure 4.1 b. Comme vous pouvez le constater, la qualité du graphique s'est considérablement améliorée.

Le stylo peut dessiner non seulement des lignes droites, mais aussi des formes. Pour une liste complète des méthodes de canevas basées sur le stylet, consultez l'aide intégrée de Delphi. En attendant, à titre d'exemple, nous n'en donnerons qu'un - Ellipse A qui dessine une ellipse ou un cercle. Il est déclaré comme

procédure Ellipse(X1, Y1, X2, Y2 : Entier);

où les paramètres X1, X2, Y1, Y2 définir les coordonnées d'un rectangle décrivant une ellipse ou un cercle. Par exemple, l'opérateur

Ellipse(10, 40, 20, 50);

dessinera un cercle de diamètre 10 et de coordonnées centrales (15, 45).

Les formes ne sont généralement pas dessinées vides, mais remplies à l'aide de la propriété canvas Brosser- brosser. Propriété Brosser est un objet qui possède à son tour un certain nombre de propriétés. Propriété Couleur définit la couleur de remplissage. Propriété style définit le motif de remplissage (hachure). Valeur par défaut styleéquivaut à bsSolide, ce qui signifie une coloration solide Couleur.

Au stylo Stylo Il y a une autre propriété que nous n'avons pas encore considérée. Cette propriété est mode(mode). Valeur par défaut Mode = pmCopier. Cela signifie que les lignes sont dessinées dans la couleur spécifiée dans la propriété Couleur. Mais d'autres modes sont également possibles, dans lesquels non seulement la couleur est prise en compte Couleur, mais aussi la couleur des pixels de fond correspondants. Le plus intéressant de ces modes est le mode pmNotXor- addition au fond par OU exclusif inverse. Si ce mode est activé, dessiner à nouveau la même forme au même endroit sur le canevas supprime l'image précédemment dessinée et restaure les couleurs de pixel qui étaient avant le premier dessin de la forme.

Cette caractéristique du régime pmNotXor peut être utilisé pour créer des animations simples. Il suffit de dessiner quelque chose, puis d'effacer le dessin, de le redessiner légèrement modifié - et le dessin semblera prendre vie.

Essayez de vous créer une animation simple - un cercle en mouvement. Démarrez une nouvelle application et accédez à la section la mise en oeuvre insérer une annonce

X,Y : entier ;

Cela introduira des variables globales X et Oui- Coordonnées de l'image actuelle.

Dans un événement de formulaire sur peinture insérer des instructions

Brosser. Couleur :=clBlanc;:=clBlanc;. Stylo. Mode :=pmNotXor ;

Le premier de ces opérateurs définit la couleur du pinceau sur blanc. Brosser. Ainsi, votre cercle sera peint à l'intérieur avec du blanc. La deuxième instruction définit la couleur d'arrière-plan de la surface du formulaire sur blanc.

La troisième instruction définit le mode du stylet pmNotXor, ce qui vous permettra d'effacer l'ancienne image avant de dessiner la nouvelle.

Même l'animation la plus simple nécessite une synchronisation. Sinon, la vitesse de déplacement sera déterminée par la vitesse de l'ordinateur. Par conséquent, transférez le composant vers le formulaire minuteur- minuterie du système. Ce composant est décrit dans la section 5.7 .

Vous pouvez y voir sa description détaillée. Pour l'instant, définissez sa propriété Intervalleégal à, par exemple, 30 (il s'agit du temps d'arrêt en millisecondes, mais le temps d'arrêt réel sera plus long - voir section 5.7) et définissez la propriété Activéégal faux(cela signifie que la minuterie ne démarrera pas automatiquement au démarrage de l'application).

Dans le gestionnaire d'événements de ce composant Au chronomètre insérer des instructions

// Effacer l'ancienne image. Ellipse(X-5, Y, X+5, Y-1Q);(X);

// Dessine une nouvelle image. Ellipse (X-5, Y, X+5, Y-10) ;

// Arrête quand la fin du formulaire est atteinte

si(X >= ClientWidth-20) alors. activé :=faux ;

Le premier de ces opérateurs dessine un cercle à l'endroit où il a été dessiné précédemment, c'est-à-dire efface l'image précédente.

La dernière instruction arrête l'image au bord du formulaire.

Ajoutez maintenant un bouton au formulaire. bouton et dans le gestionnaire de clics dessus, placez les opérateurs

X : =10 ; : =100 ;. Ellipse(X-5, Y, X+5, Y-10); activé :=vrai ;

Les deux premiers opérateurs définissent les coordonnées initiales du cercle. La troisième instruction dessine le cercle à sa position de départ et la quatrième démarre le chronomètre.

Traduisez l'application, exécutez-la, cliquez sur le bouton. Vous verrez une image circulaire se déplacer sur le formulaire de gauche à droite. Et puis connectez votre imagination et transformez cette application peu intéressante en quelque chose de plus excitant.

Sur le canevas, vous pouvez afficher non seulement des images créées par programme, mais également des images stockées dans des fichiers graphiques. Seul le canevas lui-même n'a pas de méthode pour charger une image à partir d'un fichier. Par conséquent, le fichier doit être chargé dans un autre objet graphique capable de recevoir des informations à partir de fichiers graphiques. Et puis réécrivez l'image de cet objet sur le canevas en utilisant la méthode canvas Dessiner. Son descriptif :

Dessiner(X, Y : Entier ; Graphique : TGraphique) ;

Ici les paramètres X et Oui déterminer les coordonnées du coin supérieur gauche du placement de l'image sur la toile, un Graphique- un objet qui stocke des informations. Un tel objet peut être, par exemple, un objet de type TBitMap, destiné au stockage des matrices de bits. Voyons à quoi tout cela ressemble dans la pratique.

Ouvrez une nouvelle application, faites glisser un composant sur le formulaire OpenPictureDialog depuis la page Dialogues (il s'agit d'un composant du dialogue d'ouverture des fichiers graphiques - voir section 8.2 ) et un bouton bouton. Poste OpenPictureDialog n'importe où dans le formulaire, car ce composant n'est pas visuel, et placez le bouton en bas du formulaire. Saisissez le code suivant dans le gestionnaire de clic de bouton :

procédure Tform1. Button1Click(Sender : TObject);

var:TBitMap;

// Sélection d'un fichier graphique par l'utilisateur

si OpenPictureDialog1. Exécuter alors

// Crée un objet BitMap de type TBitMap:=TBitMap. créer;

// Transfert de l'image vers le canevas du formulaire. Dessine(10, 10, bitmap);

// Détruit l'objet BitMap. libre;

fin;

Ce code crée un objet temporaire de type TBitMap Avec nom bitmap. Ensuite, la boîte de dialogue d'ouverture d'un fichier graphique est appelée. OpenPictureDialog1 et, si l'utilisateur a sélectionné un fichier, alors il est chargé dans bitmap méthode ChargerDepuisFichier. Ensuite la méthode Dessiner l'image chargée est copiée sur le canevas dans la zone avec les coordonnées du coin supérieur gauche (10,10). Après cela, l'objet temporaire bitmap est détruit.

Lancez votre application et cliquez sur son bouton. Vous verrez que vous pouvez télécharger n'importe quel type de fichier graphique. bmp et il sera affiché sur le canevas du formulaire (voir Fig. 4.2 a). Les fichiers graphiques se trouvent dans le répertoire Images. Dans Delphi 5 et 4, il se trouve généralement dans un répertoire. \program files\Fichiers communs\Borland Shared. Dans Delphi 3, il se trouve dans un répertoire. \program files\Borland\Delphi 3, et en Delphi 1 - dans le répertoire Delphi 16. Le répertoire Images contient notamment le sous-répertoire \Images\Splash\16Color\, qui stocke le fichier chargé dans l'exemple de la Fig.

Vous avez créé une belle application pour visualiser des fichiers graphiques. Mais maintenant essayons de voir son inconvénient majeur. Sans fermer votre application, allez dans un autre programme, par exemple, retournez dans Delphi. Ensuite, sans rien y faire, revenez à votre application en cours d'exécution. Si la fenêtre du programme que vous avez quittée couvrait complètement la fenêtre de votre application, alors lorsque vous y reviendrez, vous verrez que l'image dans la fenêtre a disparu. Si la fenêtre de votre application ne se chevauche que partiellement, alors lorsque vous revenez à votre application, vous pouvez voir un résultat similaire à celui illustré à la Fig. 4.2 b.

Vous pouvez voir que si la fenêtre d'une autre application chevauche temporairement la fenêtre de votre application, l'image dessinée sur le canevas du formulaire est corrompue. Voyons comment nous pouvons remédier à cette lacune.

Si la fenêtre a été couverte et que l'image est corrompue, le système d'exploitation indique à l'application que quelque chose a changé dans l'environnement et que l'application doit prendre les mesures appropriées. Dès qu'une mise à jour de la fenêtre est requise, un événement est généré pour celle-ci sur peinture. Dans le gestionnaire de cet événement (dans notre cas, l'événement formulaire), nous devons redessiner l'image.

Le redessin peut être effectué de différentes manières, selon l'application. Dans notre exemple, nous pourrions faire une déclaration de variable bitmap(opérateur var BitMap : TBitMap) en dehors de la procédure ci-dessus, c'est-à-dire rendre cette variable globale en la plaçant directement dans la section la mise en oeuvre. Opérateur bitmap. Libre pourrait être déplacé vers le gestionnaire d'événements de formulaire OnDestroy qui se produit lorsque l'application se ferme. Ensuite, pendant toute la durée d'exécution de votre application, vous aurez une copie de l'image dans le composant bitmap et il vous suffit d'entrer dans le gestionnaire d'événements sur peinture forme une seule déclaration :

Dessine(10, 10, bitmap);

Faites cela et vous verrez que l'image sur le formulaire ne se détériore pas avec les chevauchements de fenêtres.

En plus de la méthode envisagée Dessiner canvas a une autre méthode de copie CopieRect:

CopyRect(Dest : TRect ; Canvas : TCanvas ; Source : TRect);

La méthode copie le paramètre spécifié La source zone d'image dans le canevas de source d'image Toile au spécifié Destination zone de cette toile. Type de TRect caractérisant des zones rectangulaires La source et Destination, déjà décrit dans la section 3.2 .

Par exemple, l'opérateur

CopyRect(MyRect2, Bitmap.Canvas, MyRect1);

copies sur le canevas du formulaire dans la zone MonRect2 image de la zone MonRect1 canevas de composant bitmap.

Méthode de copie CopieRect produit dans le mode défini par la propriété CopyMode. Par défaut, cette propriété est définie sur cmSrcCopie, ce qui signifie simplement remplacer l'image précédemment contenue dans le champ Destination, sur l'image copiée. Autres valeurs possibles CopyMode vous permettent de combiner des images, mais leur prise en compte dépasse le cadre de ce livre.

Nous nous limiterons à ces informations de base concernant la sortie des informations graphiques sur la toile. Article 3.2 des informations sur la sortie sur le canevas du texte ont été signalées. En général, le canevas est un objet complexe qui a beaucoup plus de propriétés et de méthodes. Mais cela nécessite une discussion détaillée qui dépasse le cadre de ce livre. Le prochain livre de la série All About Delphi explorera ces questions plus en détail.

Un composant de fenêtre qui a une propriété Toile- Toile.

Composants Image et PaintBox

Composants Image et boîte de peinture représentent une surface limitée avec une toile, sur laquelle des images peuvent être saisies, comme décrit dans la section 4.2 . Dans le même temps, la composante boîte de peinture, en effet, n'apporte rien de nouveau par rapport au dessin sur le canevas de formulaire. Se basant sur boîte de peinture au lieu de la forme, n'a aucun avantage, sauf peut-être un certain relief dans la disposition d'un ou plusieurs dessins dans la zone de la fenêtre.

Mais en plus de ces capacités, le composant Image il existe des propriétés qui vous permettent de travailler avec différents types de fichiers graphiques. Il prend en charge trois types de fichiers - bitmaps, icônes et métafichiers. Les trois types de fichiers stockent des images ; la différence réside uniquement dans la manière dont ils sont stockés dans les fichiers et dans les moyens d'y accéder. Bitmap (fichier avec l'extension . bmp) affiche la couleur de chaque pixel de l'image. Dans le même temps, les informations sont stockées de manière à ce que n'importe quel ordinateur puisse afficher une image avec une résolution et le nombre de couleurs correspondant à sa configuration.

Pictogrammes (fichiers avec l'extension . icône) sont des matrices de petits bits. Ils sont largement utilisés pour désigner les icônes d'application, dans les boutons rapides, dans les éléments de menu, dans diverses listes. La manière de stocker des images dans des icônes est similaire au stockage d'informations dans des bitmaps, mais il existe des différences. En particulier, l'icône ne peut pas être mise à l'échelle, elle conserve la taille dans laquelle elle a été créée.

Les métafichiers ne stockent pas la séquence de bits qui composent une image, mais des informations sur la façon dont l'image a été créée. Ils stockent des séquences de commandes de dessin qui peuvent être répétées lors de la recréation de l'image. Cela rend ces fichiers généralement plus compacts que les bitmaps.

Composant Image permet d'afficher les informations contenues dans les fichiers graphiques de tous les types spécifiés. Pour cela, sa propriété image- objet de type TImage.

Fig.4.3 Fenêtre de l'éditeur d'images

Pour vous familiariser avec cette propriété, ouvrez une nouvelle application et transférez le composant dans le formulaire Image. Étirez-le ou définissez sa propriété Alignerégal alClient pour qu'il occupe tout l'espace client du formulaire. Cliquez sur le bouton avec les points de suspension à côté de la propriété image dans la fenêtre de l'inspecteur d'objets ou double-cliquez simplement sur Image. Une fenêtre de l'éditeur d'images s'ouvrira devant vous (Fig. 4.3), vous permettant de charger dans la propriété image un fichier graphique (bouton Charger), ainsi que d'enregistrer le fichier ouvert sous un nouveau nom ou dans un nouveau répertoire. Cliquez sur Charger pour charger le fichier graphique. Vous verrez une fenêtre pour ouvrir un fichier graphique, illustrée à la figure 4.4. Lorsque vous déplacez le curseur dans la liste des fichiers graphiques, les images qu'ils contiennent sont affichées dans la fenêtre de droite, et au-dessus d'eux - des nombres caractérisant la taille du image. Vous pouvez sélectionner n'importe quel type de fichier graphique dont vous avez besoin. Rappelons que vous pouvez trouver les fichiers graphiques fournis avec Delphi dans le répertoire Images. Dans Delphi 5 et 4, il se trouve généralement dans un répertoire. \program files\Fichiers communs\Borland Shared. Dans Delphi 3, il se trouve dans un répertoire. \program files\Borland\Delphi 3, et dans Delphi 1, dans le répertoire Delphi 16. Une fois le fichier chargé, cliquez sur OK dans la fenêtre de l'éditeur d'images et dans votre composant Image l'image que vous avez sélectionnée s'affiche. Vous pouvez exécuter votre application et l'admirer. Cependant, vous voyez déjà l'image, même sans exécuter l'application.

Lorsque vous avez chargé une image à partir d'un fichier dans un composant lors de la conception Image, non seulement il l'affiche, mais il l'enregistre dans l'application. Cela vous donne la possibilité d'expédier votre application sans fichier graphique séparé. Cependant, comme nous le verrons plus loin, dans Image vous pouvez également charger des fichiers graphiques externes pendant que l'application est en cours d'exécution.

Revenons à l'examen des propriétés du composant Image.

Si vous définissez la propriété dimensionnement automatique dans vrai, alors la taille du composant Image s'adaptera automatiquement à la taille de l'image qui y est placée. Si la propriété dimensionnement automatique installé dans faux, alors l'image peut ne pas tenir dans le composant ou, à l'inverse, la zone du composant peut être beaucoup plus grande que la zone de l'image.

Une autre propriété - Extensible permet d'ajuster non pas le composant à la taille de l'image, mais l'image à la taille du composant. Installer dimensionnement automatique dans faux, étirer ou réduire la taille du composant Image et installer Extensible dans vrai. Vous verrez que le dessin occupera toute la surface du composant, mais comme il est peu probable qu'il définisse les dimensions de manière réaliste Image exactement proportionnel à la taille de l'image, l'image sera déformée. Installer Extensible dans vrai peut n'avoir de sens que pour certains motifs, mais pas pour les images. Propriété Extensible n'affecte pas les images miniatures qui ne peuvent pas être redimensionnées.

Propriété - Centre s'installer vrai, centre l'image sur la zone Image si la taille du composant est supérieure à la taille de l'image.

Considérez une autre propriété - Transparent(transparence). Si un Transparentéquivaut à vrai, alors l'image dans Image devient transparente. Cela peut être utilisé pour superposer des images les unes sur les autres. Placer le deuxième composant sur le formulaire Image et téléchargez-y une autre image. Essayez simplement de prendre une petite photo de contour remplie. Vous pouvez, par exemple, prendre une image parmi celles habituellement placées sur les boutons, par exemple une flèche (file.\program files\common files\borland shared\images\buttons\arrow1l.bmp). Bouger ton Image de sorte qu'ils se chevauchent et dans le jeu de composants supérieur Transparentégal vrai. Vous verrez que l'image du haut n'obscurcit plus celle du bas. Une des applications possibles de cette propriété est l'imposition d'inscriptions sur l'image, réalisées sous la forme d'une matrice de bits. Ces inscriptions peuvent être réalisées à l'aide du programme intégré Delphi Image Editor.

Veuillez noter que la propriété Transparent ne s'applique qu'aux matrices de bits. En même temps, la couleur du pixel inférieur gauche du bitmap est rendue transparente (c'est-à-dire remplacée par la couleur de l'image en dessous) par défaut.

Nous avons examiné le chargement d'une image à partir d'un fichier pendant le processus de conception. Mais la propriété image permet également d'organiser facilement l'échange avec des fichiers graphiques de tout type lors de l'exécution de l'application. Pour expliquer la technique d'un tel échange, il faut d'abord considérer plus en détail la propriété image.

Cette propriété est un objet, qui à son tour a des sous-propriétés pointant vers l'objet graphique stocké. Si dans image la matrice de bits est stockée, elle est pointée par la propriété image. bitmap. Si une icône est stockée, elle est pointée par la propriété image. icône. Le métafichier stocké est pointé par la propriété image. Métafichier. Enfin, un objet graphique de type arbitraire est pointé par la propriété image. Graphique.

Un objet image et ses propriétés bitmap, icône, Métafichier et Graphique avoir des méthodes de lecture et d'écriture de fichiers ChargerDepuisFichier et Enregistrer dans le fichier:

procédure ChargerDepuisFichier( constante nom de fichier: chaîne de caractères);

procédure EnregistrerDansFichier( constante nom de fichier: chaîne de caractères);

Pour les propriétés image. bitmap, image. icône et image. Métafichier le format du fichier doit correspondre à la classe de l'objet : bitmap, icône, métafichier. Lors de la lecture d'un fichier dans une propriété image. Graphique le fichier doit être au format métafichier. Et pour l'objet lui-même image les méthodes de lecture et d'écriture sont automatiquement ajustées au type de fichier. Expliquons cela avec un exemple.

Construisons une application similaire à l'exemple de visualisation de fichiers graphiques discuté dans la section 4.2. Pour changer, vous pouvez organiser son contrôle non pas avec un bouton bouton, mais le menu. Placer un composant sur le formulaire Image. Étirez-le ou définissez sa propriété Alignerégal alClient pour qu'il occupe tout l'espace client du formulaire. Faites glisser le composant de dialogue d'ouverture de fichier graphique vers le formulaire OpenPictureDialog(voir rubrique 8.2 ). Placez également le composant de menu principal sur le formulaire menu principal(voir rubrique 6.1 ) et définissez-y une section - File. Dans le gestionnaire de cette section, écrivez la déclaration

(OpenPictureDialog1.Execute) alors. image. ChargerDepuisFichier(.NomFichier);

Cet opérateur appellera la boîte de dialogue d'ouverture d'un fichier graphique (voir Figure 4.4) et chargera dans le composant Image1 une image à partir d'un fichier sélectionné par l'utilisateur (voir Fig.4.5). De plus, le fichier peut être de n'importe quel type : un bitmap, une icône ou un métafichier.

Fig.4.5 Image dans un composant Image matrice de bits (a) et pictogramme (6)

Dans cette application, la méthode ChargerDepuisFichier appliqué à Image1. image. Si seuls les fichiers bitmap sont ouverts, l'instruction de chargement de fichier peut être remplacée par

image. bitmap. ChargerDepuisFichier(.NomFichier);

Pour les pictogrammes, un opérateur pourrait être utilisé. image. icône. ChargerDepuisFichier(.NomFichier);

et pour les métafichiers, l'opérateur. image. métafichier. ChargerDepuisFichier(.NomFichier);

ou. image. graphique. ChargerDepuisFichier(.NomFichier);

Mais dans tous ces cas, si le format de fichier ne correspond pas à celui prévu, une erreur se produira. La méthode fonctionne de la même manière. Enregistrer dans le fichier avec la différence qui s'appliquait à image ou pour image. Graphique il enregistre une image de n'importe quel format dans un fichier. Par exemple, si vous ajoutez une boîte de dialogue à votre application SavePictureDialog(voir rubrique 8.2 ), entrez dans la section Enregistrer sous du menu et placez l'opérateur dans son gestionnaire

SavePictureDialog1. Exécuter alors. image. SaveToFile(SavePictureDialog1.FileName);

l'utilisateur pourra alors enregistrer l'image de n'importe quel format dans un fichier avec un nouveau nom. Seulement dans ce cas, afin d'éviter toute confusion supplémentaire, l'extension du fichier enregistré doit toujours correspondre au format de l'image enregistrée.

Le programme fonctionnera de manière absolument identique pour les images de n'importe quel format si vous remplacez l'opérateur de sauvegarde par

image. graphique. SaveToFile(.FileName);

propriété utilisant image. Graphique. Et si vous connaissez le format stocké dans le composant Image images, alors vous pouvez appliquer la méthode Enregistrer dans le fichier aux propriétés image. bitmap, image. icône et image. Métafichier.

Pour tous les objets considérés image, image. bitmap, image. icône et image. Métafichier les méthodes d'attribution des valeurs d'objet sont définies :

Attribuer (Source : TPersistent );

Cependant, pour bitmap, icône et Métafichier il est possible d'attribuer uniquement les valeurs d'objets homogènes : en conséquence, matrices de bits, pictogrammes, métafichiers. Une exception est levée lors de la tentative d'attribution de valeurs à des objets hétérogènes ÅConvertError. Un objet image- universel, on peut lui attribuer les valeurs des objets de n'importe laquelle des trois autres classes. Et le sens image ne peut être affecté qu'à un objet dont le type correspond au type de l'objet qui y est stocké.

Méthode Attribuer peut également être utilisé pour partager des images avec le tampon du Presse-papiers. Par exemple, l'opérateur

Affecter(Image1.Image);

placera dans le presse-papiers l'image stockée dans Image1. De même, l'opérateur

application d'image graphique delphi

Image1. image. Attribuer (presse-papiers);

va lire dans Image1 image dans le presse-papiers. De plus, il peut s'agir de n'importe quelle image et même de texte.

Vous devez juste vous rappeler d'insérer dans l'opérateur lorsque vous travaillez avec le presse-papiers les usages votre module une référence au module clipbrd. Delphi n'interpose pas automatiquement ce lien.

Retour aux propriétés du composant Image, nous pouvons noter un inconvénient inhérent à notre application de test illustrée à la Fig. 4.5 Lors du chargement d'images différentes, la taille de la fenêtre de l'application peut s'avérer soit trop petite, et alors vous ne verrez qu'une partie de l'image, soit trop grande, et alors l'image sera laide placée dans le coin supérieur gauche du formulaire, laissant beaucoup d'espace vide. Ce défaut peut être éliminé en utilisant les propriétés Hauteur(hauteur) et Largeur composant (largeur) Image. A la propriété dimensionnement automatiqueétabli en vrai dimensions Image automatiquement réglé sur la taille de l'image téléchargée. Et ces dimensions peuvent être utilisées pour redimensionner le formulaire en conséquence. Par exemple, le code ci-dessus pour charger une image à partir d'un fichier pourrait être remplacé par ce qui suit :

OpenPictureDialog1. Exécuter alors

commencer. image. ChargerDepuisFichier(.NomFichier);. ClientHeight := Image1. Hauteur+10 ;. Haut :=Form1. ClientRect. Haut

+ (Form1.ClientHeight - Image1.Height) div 2 ;. ClientWidth := Image1. Largeur+10 ;. Gauche :=Form1. ClientRect. La gauche

+ (Form1.ClientWidth - Image1.Width) div 2 ;

fin;

Ce code définit la taille de la zone client du formulaire légèrement supérieure à la taille du composant. Image1, qui à leur tour s'adaptent à la taille de l'image grâce à la propriété dimensionnement automatique. Appliquez ces correctifs à votre application, exécutez-la et voyez que le formulaire s'adapte automatiquement à la taille de l'image téléchargée

Composant de forme

Composant forme ne peut être attribué que conditionnellement au moyen d'affichage des informations graphiques, puisqu'il représente simplement diverses formes géométriques, convenablement ombrées. La principale propriété de ce composant est forme(forme), qui peut prendre les valeurs suivantes :

Des exemples de ces formulaires sont illustrés à la Figure 4.7.

Fig.4.7 Exemples de composants forme

Une autre propriété essentielle du composant est Brosser(brosser). Cette propriété est un objet de type TBrush, qui a un certain nombre de sous-propriétés, en particulier : color ( Brosser. Couleur) et style ( Brosser. style) pour remplir la forme. Remplir à certaines valeurs style vous pouvez voir sur la Fig.4.7 le tiers de la propriété spécifique du composant forme - Stylo(stylo) qui définit le style de ligne. Cette propriété, comme la propriété Brosser, ont déjà été discutés dans la section 4.2 . Les données de référence sur ces propriétés se trouvent au chapitre 10*.

Composant graphique

Considérons maintenant le composant graphique. Ce composant vous permet de créer divers tableaux et graphiques très impressionnants (Fig. 4.8). Composant graphique a beaucoup de propriétés, de méthodes, d'événements, donc si vous les considérez tous, vous devriez y consacrer un chapitre entier. Nous nous limitons donc à ne considérer que les principales caractéristiques graphique. Et le reste, vous pouvez le trouver dans l'aide intégrée de Delphi ou simplement les essayer en expérimentant avec des diagrammes.

Composant graphique est un conteneur d'objets Série taper TChartSeries- des séries de données caractérisées par des styles d'affichage différents. Chaque composant peut comprendre plusieurs séries. Si vous souhaitez afficher un graphique, chaque série correspondra à une courbe sur le graphique. Si vous souhaitez afficher des graphiques, pour certains types de graphiques, vous pouvez superposer plusieurs séries différentes les unes sur les autres, pour d'autres (par exemple, pour les graphiques à secteurs), cela aura probablement l'air moche. Cependant, dans ce cas, vous pouvez définir pour un composant graphique plusieurs séries des mêmes données avec un type de graphique différent. Ensuite, en rendant l'un d'eux actif à chaque instant, vous pouvez donner à l'utilisateur le choix du type de graphique qui affiche les données qui l'intéressent.

Placez un ou deux composants (si vous souhaitez reproduire la figure 4.8) graphique sur le formulaire et regardez les propriétés qui s'ouvrent dans l'inspecteur d'objets. Expliquons-en quelques-uns.

	Spécifie si l'utilisateur peut faire défiler la partie surveillée du graphique lors de l'exécution en cliquant sur le bouton droit de la souris. Valeurs possibles : pmNone - le défilement est désactivé, pmHorizontal, pmVertical ou pmBoth - respectivement, le défilement est autorisé uniquement dans le sens horizontal, uniquement dans le sens vertical ou dans les deux sens.
	Permet à l'utilisateur de modifier l'échelle de l'image lors de l'exécution en découpant des fragments d'un diagramme ou d'un graphique avec le curseur de la souris (la Fig. 4.8 b ci-dessous montre le moment de la visualisation d'un fragment du graphique, qui est entièrement présenté dans la Fig. 4.8 un).
	Spécifie le titre du graphique.
	Spécifie la légende du graphique. Aucun par défaut. Le texte de l'étiquette est défini par la sous-propriété Text.
	Définit une bordure autour du graphique.
	Légende du graphique - une liste de symboles.
Marge gauche, Marge droite, Marge supérieure, Marge inférieure	Valeurs des marges gauche, droite, supérieure et inférieure.
BottomAxis, LeftAxis, RightAxis	Ces propriétés déterminent les caractéristiques des axes inférieur, gauche et droit, respectivement. La définition de ces propriétés est logique pour les graphiques et certains types de graphiques.
Paroi gauche, Paroi inférieure, Paroi arrière	Ces propriétés déterminent respectivement les caractéristiques des bords gauche, inférieur et arrière de la zone d'affichage tridimensionnelle du graphique (voir Fig. 4.8 a, graphique inférieur).
	Liste des séries de données à afficher dans le composant.
	Active ou désactive l'affichage du graphique 3D.
	Caractéristiques de l'affichage en trois dimensions.
	Échelle tridimensionnelle (pour la Fig. 4.8, il s'agit de l'épaisseur du graphique et de la largeur des rubans graphiques).

À côté de nombreuses propriétés répertoriées dans l'inspecteur d'objets, il existe des boutons avec des points de suspension qui vous permettent d'appeler l'une ou l'autre page de l'éditeur de graphiques - une fenêtre de plusieurs pages qui vous permet de définir toutes les propriétés des graphiques. L'appel de l'éditeur de diagramme est également possible en double-cliquant sur le composant graphique ou en cliquant dessus avec le bouton droit de la souris et en sélectionnant la commande Modifier le graphique dans le menu contextuel.

Si vous voulez essayer de reproduire l'application illustrée à la figure 4.8, double-cliquez sur le composant supérieur graphique. Vous serez redirigé vers la fenêtre de l'éditeur de graphiques (Fig.4.9) sur la page Graphique, qui comporte plusieurs onglets. Tout d'abord, vous serez intéressé par l'onglet Série. Cliquez sur le bouton Ajouter - ajoutez une série. Vous serez redirigé vers une fenêtre (Fig. 4.10) où vous pourrez sélectionner le type de diagramme ou de graphique. Dans ce cas, choisissez Pie - un camembert. À l'aide de l'onglet Titres, vous pouvez définir le titre du diagramme, l'onglet Légende vous permet de définir les options d'affichage de la légende du diagramme (liste de symboles) ou de la supprimer complètement de l'écran, l'onglet Panneau détermine l'apparence du panneau sur lequel le diagramme est affiché, l'onglet 3D vous permet de changer l'apparence de votre diagramme : inclinaison, cisaillement, épaisseur, etc.

Lorsque vous travaillez avec l'éditeur de graphiques et que vous avez sélectionné un type de graphique, les composants graphique votre formulaire affiche son apparence avec les données conditionnelles saisies (voir Fig. 4.11).

Fig.4.10 Sélection d'un type de graphique dans l'éditeur de graphiques

Par conséquent, vous pouvez immédiatement observer le résultat de l'application de diverses options à votre application, ce qui est très pratique.

La page Série, qui comporte également un certain nombre d'onglets, vous permet de sélectionner des caractéristiques d'affichage supplémentaires pour la série. En particulier, pour un graphique à secteurs sur l'onglet Format, il est utile d'activer l'option Circled Pie, qui fournira n'importe quelle taille du composant graphique afficher le graphique sous forme de cercle. Dans l'onglet Marques, les boutons du groupe Style déterminent ce qui sera écrit sur les étiquettes liées aux segments de graphique individuels : Valeur - valeur, Pourcentage - pourcentages, Étiquette - noms de données, etc. Dans l'exemple de la Fig.4.8, le bouton Pourcentage est activé et le modèle de pourcentage est défini dans l'onglet Général, ce qui garantit que seules les valeurs entières sont affichées.

Vous pouvez, si vous le souhaitez, ajouter à ce composant graphique une autre série identique en cliquant sur le bouton Cloner dans l'onglet Série de la page Graphique, puis pour cette nouvelle série, cliquez sur le bouton Modifier et sélectionnez un autre type de graphique, par exemple Barre. Bien sûr, deux types de graphiques différents dans la même figure auront une mauvaise apparence. Mais vous pouvez désactiver l'indicateur de cette nouvelle série sur l'onglet Série, puis laisser l'utilisateur choisir l'un ou l'autre type d'affichage du graphique (nous montrerons comment faire ci-dessous).

Quittez l'éditeur de diagramme, sélectionnez le composant inférieur dans votre application graphique et répétez la définition de ses propriétés à l'aide de l'éditeur de diagramme. Dans ce cas, vous devrez spécifier deux séries si vous souhaitez afficher deux courbes sur le graphique et sélectionner le type de graphique en courbes. Puisque nous parlons de graphiques, vous pouvez utiliser les onglets Axes et Murs pour définir les caractéristiques des coordonnées des axes et des faces tridimensionnelles du graphique.

Ceci termine la conception de l'apparence de l'application. Il reste à écrire le code qui spécifie les données que vous souhaitez afficher. Pour une application de test, définissons simplement des données constantes dans le graphique à secteurs et des fonctions sinus et cosinus dans les graphiques.

Pour définir les valeurs affichées, utilisez les méthodes de série Série. Concentrons-nous sur trois méthodes principales.

Méthode Dégager efface la série des données saisies précédemment.

Méthode Ajouter:

(Const AValue : Double ; Const ALabel : Chaîne ; : TColor)

vous permet d'ajouter un nouveau point au graphique. Paramètre Une valeur correspond à la valeur ajoutée, paramètre Une marque- le nom qui sera affiché sur le graphe et dans la légende, Une couleur- Couleur. Paramètre Une marque- facultatif, il peut être vide : "".

Méthode AjouterXY:(Const AXValue, AYValue : Double;ALabel : Chaîne ; AColor : TColor)

permet d'ajouter un nouveau point au graphe de la fonction. Choix ValeurAX et ValeurAY faire correspondre l'argument et la fonction. Choix Une marque et Une couleur comme dans la méthode Ajouter.

Ainsi, la procédure de chargement des données dans notre exemple peut ressembler à :

155;=251;=203;=404;

var:mot;

commencer Série1 fais

commencer;(A1, "Etage 1", clJaune);(A2, "Etage 2", clBleu);(A3, "Etage 3", clRouge);(A4, "Etage 4", clViolet);

fin;. dégager. dégager;

pour je :=0 à 100 fais

commencer. AddXY(0.02*Pi*i, sin(0.02*Pi*i), "", clRed);. AddXY (0.02*Pi*i, cos (0.02*Pi*i), "", clBlue);

Si vous avez fourni, par exemple, pour les données affichées dans le graphique, deux séries Série1 et Série4 différents types - Tarte et bar, vous pouvez entrer une procédure qui modifie le type de diagramme à la demande de l'utilisateur. Cette procédure peut être saisie en cas sur clic un bouton, dans une commande de menu ou, par exemple, simplement dans le traitement d'un clic sur un composant graphique. Afin de télécharger des données sur Série4 et pour rendre ce schéma invisible au premier instant, on peut insérer à la fin de la procédure ci-dessus les énoncés

Attribuer(Série1);. actif :=faux ;

Le premier de ces opérateurs écrase les données placées dans Série1, en série Série4. Et le deuxième opérateur rend la série invisible Série4. Le changement de type de diagramme s'effectue par la procédure

actif := ne pas Série1. Actif;. actif := ne pas Série4. actif;

Dans la Fig. 4.8 b, vous pouvez voir le résultat du passage de l'utilisateur à un autre type de diagramme.

Pour afficher des informations graphiques dans la bibliothèque Delphi, des composants sont fournis, dont la liste est donnée dans le tableau. 6.

Tableau 6

Composants pour afficher des informations graphiques

Composant	Page	La description
Image (image)	Supplémentaire	Utilisé pour afficher des graphiques
PaintBox (fenêtre pour dessiner)	Système	Permet de créer une zone sur le formulaire dans laquelle vous pouvez dessiner
DrawGrid (table de dessin)	Supplémentaire	Utilisé pour afficher des données non textuelles dans des lignes et des colonnes
Tableau (tableaux et graphiques)	Supplémentaire	Le composant appartient à la famille de composants TeeChart qui sont utilisés pour créer des tableaux et des graphiques
Chartfx (tableaux et graphiques)	ActiveX	Éditeur de diagrammes et de graphiques
FIBook (pages Excel)	ActiveX	Composant de saisie et de traitement d'informations numériques
VtChart (graphiques)	ActiveX	Fenêtre de diagramme

De plus, vous pouvez afficher et entrer des informations graphiques sur la surface de n'importe quel composant de fenêtre qui a la propriété Toile- Toile.

Tables d'images - Composants DrawGrid et StringGrid

Composant Grille de dessin utilisé pour créer un tableau dans une application qui peut contenir des graphiques. Ce composant est similaire au composant Grille de cordes, puisque ce dernier est dérivé de grille de tirage. Par conséquent, dans Grille de dessin toutes les propriétés, méthodes, événements du composant sont présents Grille de cordes, autres que ceux liés au texte, c'est-à-dire en dehors des propriétés Cellules, Cols, Lignes, Objets. De ce point de vue, la composante StringGridStringGrid a beaucoup plus de potentiel que grille de tirage, car il peut stocker à la fois des images et des textes dans des cellules. Et si vous voulez saisir du texte dans certaines cellules grille de tirage, alors vous devrez utiliser des méthodes pour sortir du texte sur le canevas pour cela, ce qui n'est pas très pratique.

Composants DrawGrid et StringGrid avoir une toile Toile, où les images peuvent être placées.

Il existe une méthode cellule rect, qui renvoie la zone du canevas allouée pour la cellule donnée. Cette méthode est définie comme

fonction CellRect(ACol, ARow : Entier Long): TRect ;

où ACol et ARow- des indices de colonne et de ligne, à partir de 0, à l'intersection desquels se trouve la cellule. La zone renvoyée par cette fonction est la zone du canevas dans laquelle l'image souhaitée peut être dessinée. Par exemple, l'opérateur

DrawGridl.Canvas.CopyRect(DrawGridl.CellRect(1,1),

BitMap.Canvas,Rect(0,0,BitMap.Height,BitMap.Width));

copies par méthode CopieRectà la cellule (1,1) du tableau DrawGridl image du composant bitmap. Cette cellule est la deuxième à partir de la gauche et la deuxième à partir du haut dans le tableau car les index commencent à 0. Notez que si les dimensions de la cellule sont inférieures à la taille de l'image copiée, seule la partie supérieure gauche de l'image sera apparaissent dans la cellule.

Image de canevas de composant DrawGrid et StringGrid comme sur le canevas de tout composant, il est sujet à effacement lorsque la fenêtre de l'application est recouverte par d'autres fenêtres ou, par exemple, lorsque l'application est réduite.

Un moyen pratique d'entrer des images dans des cellules Grille de dessin est d'utiliser un gestionnaire d'événements SurDrawCell. Ces événements se produisent pour chaque cellule du tableau au moment de son redessin. L'en-tête du gestionnaire ressemble à ceci :

procédure TForml.DrawGridlDrawCell(Sender : TObject ;

ACol, ARow : nombre entier ; Rect : TRect ; État : TGridDrawState)

Paramètre État indique l'état de la cellule. C'est un ensemble qui peut contenir les éléments suivants : gdSélectionné- cellule en surbrillance gdfocalisé- la cellule qui est au point, gdFixe- une cellule dans une zone fixe du tableau. Paramètre État peut être utilisé pour afficher les cellules différemment dans différents états.

Composant de forme

Composant de forme ne peut être attribué que conditionnellement au moyen d'affichage des informations graphiques, puisqu'il représente simplement diverses formes géométriques, convenablement ombrées. La principale propriété de ce composant est forme(forme), qui peut prendre les valeurs suivantes :

StRectangle - un rectangle ;

StCarré - carré ;

StRoundRect - un rectangle aux coins arrondis ;

StRouhdSquare - carré aux coins arrondis ;

StEllipse - ellipse;

StCircle - un cercle.

Une autre propriété essentielle du composant est Brosser(brosser). Cette propriété est un objet de type brosser, ayant un certain nombre de sous-propriétés, en particulier la couleur (Pinceau.Couleur) et style (style pinceau) remplissage de forme. Vous pouvez voir le remplissage à certaines valeurs de style dans la Fig. 3.2. La troisième des propriétés spécifiques du composant forme- Stylo(stylo) qui définit le style de ligne.

Composant graphique

Considérons maintenant le composant Graphique. Ce composant vous permet de créer divers tableaux et graphiques très impressionnants. Composant graphique a beaucoup de propriétés, de méthodes, d'événements, donc si vous les considérez tous, vous devriez y consacrer un chapitre entier. Nous nous limitons donc à ne considérer que les principales caractéristiques Graphique. Et le reste, vous pouvez le trouver dans l'aide intégrée de Delphi ou simplement les essayer en expérimentant avec des diagrammes.

Composant graphique est un conteneur d'objets Série- descendants de classe TchartSeries. Chacun de ces objets représente une série de données caractérisées par un certain style d'affichage : tel ou tel graphique ou diagramme. Chaque composant graphique peut comprendre plusieurs séries. Si vous souhaitez afficher un graphique, chaque série correspondra à une courbe sur le graphique. Si vous souhaitez afficher des graphiques, pour certains types de graphiques, vous pouvez superposer plusieurs séries différentes les unes sur les autres, pour d'autres (par exemple, pour les graphiques à secteurs), cela aura probablement l'air moche. Cependant, dans ce cas, vous pouvez définir pour un composant graphique plusieurs séries des mêmes données avec un type de graphique différent. Ensuite, en rendant l'un d'eux actif à chaque instant, vous pouvez donner à l'utilisateur le choix du type de graphique qui affiche les données qui l'intéressent.

Placer un ou deux composants graphique sur le formulaire et regardez les propriétés qui s'ouvrent dans l'inspecteur d'objets. Expliquons-en quelques-uns.

AllowPanning - détermine la capacité de l'utilisateur à faire défiler la partie observée du graphique pendant l'exécution en appuyant sur le bouton droit de la souris. Valeurs possibles : pmNone - le défilement est désactivé, pmHori/ontal, pm Vertical ou pmBoth - respectivement, le défilement est autorisé uniquement dans le sens horizontal, uniquement dans le sens vertical ou dans les deux sens.

AhowZoom - permet à l'utilisateur de modifier le zoom de l'image lors de l'exécution en découpant des fragments d'un tableau ou d'un graphique avec le curseur de la souris. Si le cadre du fragment est dessiné vers la droite et vers le bas, ce fragment est étiré sur tout le champ du graphique. Et si le cadre est dressé et à gauche, l'échelle d'origine est restaurée.

Titre - définit le titre du graphique.

Pied - définit la légende sous le graphique. Aucun par défaut. Le texte de l'étiquette est défini par la sous-propriété Text.

Cadre - définit le cadre autour du graphique.

À côté de nombreuses propriétés répertoriées dans l'inspecteur d'objets, il existe des boutons avec des points de suspension qui vous permettent d'appeler l'une ou l'autre page de l'éditeur de graphiques - une fenêtre de plusieurs pages qui vous permet de définir toutes les propriétés des graphiques. L'appel de l'éditeur de diagramme est également possible en double-cliquant sur le composant graphique ou en cliquant dessus avec le bouton droit de la souris et en sélectionnant la commande Modifier le graphique dans le menu contextuel.

Double-cliquez sur le composant supérieur Graphique. Vous serez redirigé vers la fenêtre de l'éditeur de graphiques sur la page Graphique, qui comporte plusieurs onglets. Tout d'abord, vous serez intéressé par l'onglet Série. Cliquez sur le bouton Ajouter - ajoutez une série. Vous serez redirigé vers une fenêtre où vous pourrez sélectionner le type de tableau ou de graphique. Dans ce cas, choisissez Pie - un camembert. À l'aide de l'onglet Titres, vous pouvez définir le titre du diagramme, l'onglet Légende vous permet de définir les options d'affichage de la légende du diagramme (liste de symboles) ou de la supprimer complètement de l'écran, l'onglet Panneau détermine l'apparence du panneau sur lequel le diagramme est affiché, l'onglet 3D vous permet de changer l'apparence de votre diagramme : inclinaison, cisaillement, épaisseur, etc.

Lorsque vous travaillez avec l'éditeur de graphiques et que vous avez sélectionné un type de graphique, les composants graphique votre formulaire affiche son apparence avec les données conditionnelles qui y sont entrées. Par conséquent, vous pouvez immédiatement observer le résultat de l'application de diverses options à votre application, ce qui est très pratique.

La page Série, qui comporte également un certain nombre d'onglets, vous permet de sélectionner des caractéristiques d'affichage supplémentaires pour la série. En particulier, pour un graphique à secteurs dans l'onglet Format, il est utile d'activer l'option Secteur circulaire, qui garantira que le graphique s'affiche sous forme de cercle quelle que soit la taille du composant Graphique. Dans l'onglet Marques, les boutons du groupe Style déterminent ce qui sera écrit sur les étiquettes liées aux segments de graphique individuels : Valeur - valeur, Pourcentage - pourcentages, Étiquette - noms de données, etc.

Vous pouvez, si vous le souhaitez, ajouter une autre série identique à ce composant Graphique en cliquant sur le bouton Cloner de l'onglet Série de la page Graphique, puis pour cette nouvelle série, cliquez sur le bouton Modifier et sélectionnez un type de graphique différent, tel que Barre .

Quittez l'éditeur de graphiques, sélectionnez le composant graphique inférieur dans votre application et répétez la définition de ses propriétés à l'aide de l'éditeur de graphiques. Dans ce cas, vous devrez spécifier deux séries si vous souhaitez afficher deux courbes sur le graphique et sélectionner le type de graphique en courbes. Puisque nous parlons de graphiques, vous pouvez utiliser les onglets Axes et Murs pour définir les caractéristiques des coordonnées des axes et des faces tridimensionnelles du graphique.

Ceci termine la conception de l'apparence de l'application. Il reste à écrire le code qui spécifie les données que vous souhaitez afficher. Pour l'application de test, définissons simplement certaines données constantes dans le graphique à secteurs et certaines fonctions dans les graphiques.

Pour définir les valeurs affichées, utilisez les méthodes Series. Concentrons-nous sur trois méthodes principales.

Méthode Dégager efface la série des données saisies précédemment.

Méthode Ajouter:

Add(Const AValue:Double; Const ALabel:String; AColor:TColor) ,

vous permet d'ajouter un nouveau point au graphique. Paramètre Une valeur correspond à la valeur ajoutée, paramètre Une marque- un libellé qui sera affiché sur le graphique et dans la légende, Une couleur- Couleur. Paramètre Une marque- optionnel, il peut être mis vide : ‘ ’. Méthode AjouterXY :

AddXY(Const AXValue, AYValue : Double ; Const ALabel : Chaîne ; AColor : TColor)

permet d'ajouter un nouveau point au graphe de la fonction. Choix ValeurAX et ValeurAY faire correspondre l'argument et la fonction. Choix ALabel et AColor comme dans la méthode Ajouter.

Ainsi, la procédure de chargement des données dans notre exemple peut ressembler à :

constAl=155; A2=251 ; A3=203 ; A4=404 ; var je:mot; commencer

Avec Seriesl, commencez

Add(Al,"Magasin l",clJaune);

Ajouter(A2,"Motif 2",clBleu);

Add(A3,"Etage 3",clRed);

Ajouter(A4,"Design 4",clViolet); fin;

Série2.Effacer ; SérieS.Clear ; for i:=0 to 100 do begin

Série2.AddXY(0.02*Pi*i,sin(0.02*Pi*i)

SérieS.AddXY(0.02*Pi*i,cos(0.02*Pi*i) end ;

ClRouge); ,clBleu);

Les opérateurs Dégager sont nécessaires si vous allez mettre à jour les données pendant le fonctionnement de l'application.

Ceci conclut notre introduction au composant. Graphique. Certes, nous n'avons considéré qu'une petite partie de ses capacités.