Möglichkeiten, grafische Informationen in Delphi anzuzeigen. Vortrag zum Thema "Darstellung grafischer Informationen in Delphi"

Folie 2

„Darstellung von grafischen Informationen in Delphi“ Themenplan: Möglichkeiten zur Darstellung von grafischen Informationen in Delphi. Anzeigen von Bildern. Darstellung geometrischer Formen. Erstellung von Grafiken und Diagrammen.

Folie 3

1. Verfahren zum Anzeigen von grafischen Informationen. Es gibt mehrere Möglichkeiten, grafische Informationen in Delphi anzuzeigen: Ausgabe von vorgefertigten Bildern (Image-, Shape-Komponenten); Erstellung von Grafiken und Diagrammen (Chart-Komponente usw.); Bilderzeugung programmgesteuert (Canvas-Objekt).

Folie 4

Anzeigen von Bildern. Das Anzeigen von Bildern mit der Image-Komponente wurde in einem der vorherigen Themen behandelt. Hier betrachten wir ein Beispiel für die Implementierung der einfachsten Animation durch periodisches Ändern des angezeigten Bildes in den Bildkomponenten. Gehen Sie zum Beispiel.

Folie 5

Darstellung geometrischer Formen. Die Darstellung der einfachsten geometrischen Formen auf dem Formular erfolgt durch die Shape-Komponente.

Folie 6

Darstellung geometrischer Formen. Die Haupteigenschaften der Shape-Komponente:

Folie 7

Darstellung geometrischer Formen. Sie können einfache Zeichnungen aus mehreren Shape-Komponenten erstellen. Durch programmgesteuertes Ändern der Position (.Left, .Top), Größe (.Width, .Height) und Farbe (Brush.Color) der Shape-Komponenten in der Zeichnung können Sie Elemente einfachster Animation implementieren. Betrachten Sie ein Beispiel.

Folie 8

Erstellung von Grafiken und Diagrammen. Diagramme sind für eine visuellere Darstellung von Arrays numerischer Daten, ihre visuelle Anzeige und Analyse gedacht. Beispiel. Um Diagramme in Delphi zu erstellen, gibt es mehrere Komponenten, eine davon ist die Diagrammkomponente (Abschnitt TeeChart Std).

Folie 9

Erstellung von Grafiken und Diagrammen. Ansicht der Diagrammkomponente, nachdem sie auf dem Formular installiert wurde:

Folie 10

Erstellung von Grafiken und Diagrammen. Zusätzlich zum "Object Inspector" kann man Zugriff auf die Eigenschaften der Chart-Komponente erhalten, indem man ein spezielles Dialogfeld öffnet (rechte Maustaste auf der Komponente \ Chart bearbeiten ...) Datenreihe hinzufügen Chart-Typ ändern

Folie 11

Erstellung von Grafiken und Diagrammen. Auswahl Diagrammtyp:

Folie 12

Erstellung von Grafiken und Diagrammen. Einstellungseigenschaften für Koordinatenachsen (Axis):

Folie 13

Erstellung von Grafiken und Diagrammen. Die anzuzeigenden Daten werden normalerweise programmgesteuert an das Diagramm übergeben, zum Beispiel: Series1.Clear; (Reihe löschen) für i:=1 bis N do Series1.addxy(i, A[i], ‘’, clGreen); Wert auf der X-Achse Wert auf der Y-Achse Beschriftung auf der X-Achse Datenfarbe im Diagramm Betrachten Sie ein Beispiel für die Darstellung der Funktion y = Sin(x)

Folie 14

Weiter: Labor Nr. 13.1. "Anzeigen von Bildern und geometrischen Formen, deren Animation." Aufgabe: 1) Entwickeln Sie eine Anwendung zur Implementierung der einfachsten Animation durch periodisches Ändern des angezeigten Bildes in den Bildkomponenten. (Die Anzahl der Bilder beträgt mindestens drei, wählen Sie die Bilder selbst aus).

Folie 15

Aufgabe: 2) Erfinde und zeichne ein Bild aus den Shape-Komponenten. Implementieren Sie Elemente der einfachsten Animation, indem Sie die Position, Größe oder Farbe der Shape-Komponenten in der Zeichnung programmgesteuert ändern.

Folie 16

Weiter: Labor Nr. 12.2. "Erstellen von Grafiken und Diagrammen". Aufgabe: Ändern Sie die Anwendung aus Übung 9 (Anzeigen von Daten in einer Tabelle). Fügen Sie die Möglichkeit hinzu, einige Daten aus der Tabelle in einem Balken- oder Tortendiagramm anzuzeigen. 2) Erstellen Sie einen Graphen einer gegebenen Funktion.

Alle Folien anzeigen

Beschreibung der Präsentation auf einzelnen Folien:

1 Folie

Beschreibung der Folie:

2 Folie

Beschreibung der Folie:

Die visuelle Programmierumgebung von Delphi unterstützt wie Windows eine grafische Benutzeroberfläche (GDI - Graphic Delphi Interface). Es gibt zwei Möglichkeiten, grafische Informationen in Delphi anzuzeigen: Ausgabe von vorgefertigten Bildern; Zeichnung aus dem Programm.

3 Folie

Beschreibung der Folie:

Die erste Methode basiert auf der Verwendung der Image- und Shape-Komponenten. Sie können ein vorgefertigtes Bild (Piktogramm) verwenden oder mit dem Bildeditor selbst erstellen. Die zweite Möglichkeit besteht darin, Bilder programmgesteuert mit dem Canvas-Objekt zu generieren.

4 Folie

Beschreibung der Folie:

Delphi verfügt über ein spezielles Objekt, das als Canvas-Eigenschaft formatiert ist. Es ist nur verfügbar, während die Anwendung ausgeführt wird, und kann daher nur vom Programm aus gesteuert werden, indem der erforderliche Code in der Sprache Object Pascal geschrieben wird. Wenn ein Objekt eine Canvas-Eigenschaft hat, können Sie auf seiner Oberfläche zeichnen. Die am besten geeigneten Kandidaten für diese Rolle sind das Formular selbst und die spezielle PaintBox-Komponente.

5 Folie

Beschreibung der Folie:

Canvas-Objekteigenschaften: Stift (Feder) - Eigenschaft zum Zeichnen von Linien und Umrandungen geometrischer Formen. Der Stift folgt den Befehlen des grafischen Cursors und hat wiederum seine eigenen verschachtelten Eigenschaften: Farbe - definiert die Farbe der Linie (standardmäßig schwarz); Modus - Zeichenstil (hat viele Werte, die hier nicht angegeben sind); Style – Linienstil, der die folgenden Werte annehmen kann: psSolid – solid (standardmäßig); psDosh - gestrichelte Linie; psDot - gepunktete Linie; psDoshDot - gepunkteter Strich (und andere Eigenschaften); Breite - Linienstärke (Standard 1 Pixel);

6 Folie

Beschreibung der Folie:

Pinsel (Pinsel) - eine Eigenschaft zum Füllen von Formen mit den folgenden verschachtelten Eigenschaften: Farbe - Pinselfarbe (Standard - Weiß); Style - Pinselornament, das die folgenden Werte annehmen kann: bsClear - solide Färbung; bsHorizontal - horizontale Linien; bsVertical - vertikale Linien; bsFDiagonal - linke diagonale Linien; bsBDiagonal - rechte diagonale Linien; bsCross - Zelle; bsDiagCross - schräge Zelle;

7 Folie

Beschreibung der Folie:

Schriftart (Font) – eine Eigenschaft zum Anzeigen von Text, die die folgenden verschachtelten Eigenschaften hat: Farbe – die Farbe der Zeichen; Höhe - Schrifthöhe in Pixel; Name – Schriftname; Größe - Schriftgröße; Style - Schriftstil, der die folgenden Werte annehmen kann: fsBold - fett; fsItalic - kursiv fsUnderline - unterstrichen fsStrikeOut - durchgestrichen;

8 Folie

Beschreibung der Folie:

PenPos (Stiftposition) – eine Eigenschaft zum Speichern der aktuellen Zeichenposition (bestimmt die Position des Stifts im Zeichenbereich zu einem bestimmten Zeitpunkt); Pixels - Array-Eigenschaft zum Schreiben und Lesen der Koordinaten einzelner Punkte der Zeichenfläche ("Leinwand").

9 Folie

Beschreibung der Folie:

Methoden des Canvas-Objekts MoveTo(x,y: integer) – bewegt den Stift von der aktuellen Position zum Punkt mit den angegebenen x-, y-Koordinaten, ohne eine Linie zu zeichnen; LineTo(х.у: integer) - bewegt den Stift von der aktuellen Position zu dem Punkt mit den angegebenen x-, y-Koordinaten und zeichnet eine Linie; Bogen(x1, y1, x2, y2, x3, y3, x4, y4: Ganzzahl) - zeichnet einen Bogen einer Ellipse, die in ein Rechteck mit den Koordinaten (x1, y1) und (x2, y2) eingeschrieben ist. Der Bogen wird durch die Radien der Ellipse bestimmt, die durch die Punkte (x3, y3) und (x4, y4) verläuft;

10 Folie

Beschreibung der Folie:

Chord(x1, y1, x2, y2, x3, y3, x4, y4: integer) – zeichnet einen Ellipsen-Akkord wie für die Arc-Methode beschrieben; Ellipse(x1, y1, x2, y2: integer) - zeichnet eine Ellipse in einem Rechteck mit der oberen linken Ecke am Punkt (x1, y1) und der unteren rechten Ecke am Punkt (x2, y2); FillRect (Rect (x1, y1, x2, y2: integer)) – füllt das Rechteck mit der im aktuellen Pinsel (Brush) angegebenen Farbe. Verwendet die Rect-Funktion, die ein Rechteck an den angegebenen Koordinaten darstellt;

11 Folie

Beschreibung der Folie:

FloodFill(x,y: integer; Color: TColor; FillStyle: TFillStyle) – Füllen mit der aktuellen Farbe, die in der Brush-Eigenschaft angegeben ist: with FillStyle=fsBorder – ein geschlossener Bereich von dem Punkt mit den x-, y-Koordinaten bis zum Rand, der durch definiert wird Farbe Farbe; mit FillStyle=fsSurface – der Bereich der Oberfläche, der die Farbe Color hat; Pie(x1, y1, x2, y2, x3, y3, x4, y4: ganze Zahl) - zeichnet einen Ellipsensektor, der in ein Rechteck mit den Koordinaten (x1, y1) und (x2, y2) eingeschrieben ist. Der Sektor wird durch zwei Ellipsenradien definiert, die durch die Punkte (x3, y3) und (x4, y4) verlaufen;

12 Folie

Beschreibung der Folie:

Polyline (Points: array of TPoint) – zeichnet eine Polylinie, indem die Punkte des Points-Arrays nacheinander verbunden werden; Polygon (Points: Array of TPoint) – zeichnet Polygone durch sequentielles Verbinden der Punkte des Points-Arrays. Sie unterscheidet sich von der Polyline-Methode dadurch, dass sie das Ende der Polylinie automatisch mit ihrem Anfang verbindet; Rechteck (x1, y1, x2, y2: Ganzzahl) - zeichnet ein Rechteck mit der oberen linken Ecke am Punkt (x1, y1) und der unteren rechten Ecke am Punkt (x2, y2);

13 Folie

Beschreibung der Folie:

Retresh – die Methode wird aufgerufen, wenn das Bild neu gezeichnet werden muss; RoundRect (x1, y1, x2, y2, x3, y3: Ganzzahl) – Zeichnet ein Rechteck mit abgerundeten Ecken. Die Ecken werden als Viertel einer Ellipse mit x3 Breite und y3 Höhe gezeichnet; TextOut (x, y:integer, Text:String) - gibt den Text aus, der im Parameter Text angegeben ist. Der Text passt in ein Rechteck, dessen obere linke Ecke x-, y-Koordinaten hat.

LABOR ARBEIT

THEMA: « Grafiken einDelphi- Bau der einfachsten
geometrische Formen"

Kurze Informationen aus der Theorie

Delphi bietet dem Entwickler drei Möglichkeiten, Grafiken anzuzeigen:

    Plotten während das Programm läuft

    Verwendung vorgefertigter Grafiken

    Erstellen von Bildern mit grafischen Komponenten

Für das Plotten wurden spezielle Klassen erstellt, die Werkzeuge und Methoden zum Zeichnen bereitstellen: Werkzeuge werden in drei Klassen beschrieben – Tfont, Tpen, Tbrush; Der Zeichenbereich und die Methoden werden von der Tcanvas-Klasse bereitgestellt.

KlasseTfont- legt die Eigenschaften der Schriftart fest, die zum Anzeigen des Textes auf der Leinwand verwendet wird. Die Eigenschaften der Klasse werden im Abschnitt „Grundlegende Eigenschaften, die für die meisten Komponenten verfügbar sind“ beschrieben.

Klassetpen– legt die Eigenschaften des Stifts (Bleistifts) fest, mit dem Linien gezeichnet werden.

Eigenschaften Klasse tpen:

Farbe:Tcolor - Linienfarbe (standardmäßig schwarz)

Breite:integer – Linienstärke in Pixel;

Stil = (psSolid, psDash, psDot, psdashDot, psClear) - definiert den Linienstil (durchgehend, gestrichelt, gepunktet, Strich-Punkt, unsichtbar)

KlasseBürste– legt die Eigenschaften des Pinsels fest, der zum Übermalen der Bildoberflächen verwendet wird.

Eigenschaften Klasse Bürste:

Farbe:Tcolor - Pinselfarbe (Standard ist Weiß)

Stil- Pinselornament, kann folgende Werte annehmen:

BsSolid - feste Färbung

BsClear - keine Füllung

BsVertical - vertikale Linien

BsBdiagonal - rechte diagonale Linien

BsDiagCross - schräge Zelle

BsHorisontal - horizontale Linien

BsFdiagonal - linke diagonale Linien

BsCross - Zelle

KlasseStoffe- definiert die Oberfläche, auf der das erstellte Bild platziert wird, und die Werkzeuge, mit denen das Bild erstellt wird: Schriftart, Bleistift, Pinsel.

Standardmäßig wird der gesamte Client-Bereich des Formulars als Arbeitsbereich (Leinwand, „Leinwand“) verwendet (ohne Titel, Hauptmenü und Bildlaufzeilen des Formulars), Sie können jedoch kleinere Arbeitsbereiche innerhalb des Formulars zuweisen Komponenten verwenden Malkasten oder Bild. Der Ursprung der Leinwand ist die obere linke Ecke des Arbeitsbereichs, die Breite des Arbeitsbereichs wird durch die Eigenschaft bestimmt ClientBreite, Höhe - Eigenschaft ClientHöhe.

Eigenschaften Klasse Stoffe:

Leinwand:Tcanvas - definiert den Zeichenbereich

Bürste:Tbrush - Pinsel zum Malen geschlossener Formen

Schriftart:Tfont - Schriftart zum Anzeigen von Text auf der Leinwand

Stift:Tpen - Bleistift (Stift) zum Zeichnen

PenPos:Tpoint - die aktuelle Position des unsichtbaren Cursors auf der Leinwand

Kommentar : Typ Tpoint - wie folgt definiert:

Geben Sie Tpoint = record ein

Pixel: Tcolor - legt die Farben der Leinwandpixel fest, X, Y - Pixelkoordinaten. Die Eigenschaft „Pixel“ ist nützlich, um Diagramme mit Punkten der ausgewählten Farbe zu zeichnen.

Hauptmethoden der Klasse TCanvas

    Verfahren Ziehen nach(x,y:Ganzzahl); - bewegt den Stift ohne eine Linie zu zeichnen zu einem Punkt mit Koordinaten (x, y).

    Verfahren LineTo(x,y:Ganzzahl); - zeichnet eine Linie vom aktuellen Punkt zum Punkt mit den Koordinaten (x, y).

Beispiel : Zeichnen Sie eine blaue diagonale Linie auf der Form von der oberen linken Ecke der Form zur unteren rechten Ecke.

Stift.farbe:= clblue;

MoveTo(0,0); LineTo (ClientBreite, ClientHöhe);

    Verfahren Rechteck(x1,y1,x2,y2: ganze Zahl); - zeichnet ein Rechteck: x1, y1 - Koordinaten der oberen linken Ecke; x2, y2 - Koordinaten der unteren rechten Ecke.

Beispiel : Zeichnen Sie ein gelb gefülltes 60-Pixel-Quadrat in die Mitte der Form.

Var Xc,Yc: Ganzzahl; //

Xc:=ClientWidth div 2;

Xy:=ClientHeight div 2;

Canvas.Brush.color:=clyellow;

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

    Verfahren Ellipse(x1,y1,x2,y2: ganze Zahl); - zeichnet eine Ellipse, die in ein Rechteck mit den angegebenen Koordinaten eingeschrieben ist.

Beispiel : Zeichnen Sie eine Ellipse, die in die PaintBox-Komponente eingeschrieben ist.

PaintBox1.Canvas.Stift.Breite:=4; // Linienbreite = 4 Pixel

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

    Verfahren Vieleck(); - zeichnet ein geschlossenes Polygon, gegeben durch ein Array von Koordinaten.

Beispiel : Zeichnen Sie eine gefüllte Raute, die die Mittelpunkte der Seiten der Form verbindet

Var Xc,Yc:ganze Zahl; // Koordinaten des Kundenbereichszentrums bilden

Xc:=ClientWidth div 2;

Xy:=ClientHeight div 2;

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

Leinwand.Polygon();

Ende;

    Verfahren Bogen(x1,y1,x2,y2,x3,y3,x4,y4: ganze Zahl); - zeigt einen Ellipsenbogen an, der durch ein Rechteck (x1, y1, x2, y2) begrenzt ist. Der Bogen wird von einem Punkt mit Koordinaten (x3,y3) zu einem Punkt mit Koordinaten (x4,y4) angezeigt. gegen Stunden Zeiger.

Beispiel : Zeichnen Sie einen Ellipsenbogen, der die Mitte der Oberseite des Bauteils verbindet
PaintBox mit der Mitte seiner rechten Seite.

Prozedur Tform1.Button1Click(Sender:Toobject);

Var X3,y3,x4,y4: Ganzzahl;

Mit PaintBox1 tun

Leinwand.Stift.Farbe: = clWhite;

Leinwand.Stift.Breite:= 3;

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

X3:= ClientWidth div 2;

X4:=ClientBreite;

Y4:= ClientHeight div 2;

Canvas.Pen.Color:= clMaroon;

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

Ende;

    Verfahren Akkord(x1,y1,x2,y2,x3,y3,x4,y4: ganze Zahl); - zeichnet eine Sehne - eine gerade Linie, die 2 Punkte der Ellipse verbindet: einen Punkt mit Koordinaten (x3, y3) mit einem Punkt (x4, y4).

Beispiel : Ersetzen Sie in dem angegebenen Beispiel die ARC-Methode durch die Chord-Methode und erhalten Sie dieses Ergebnis.

    Verfahren Kuchen(x1,y1,x2,y2,x3,y3,x4,y4: ganze Zahl); - zeichnet ein Ellipsensegment, das den Mittelpunkt der Ellipse mit den Koordinaten (x3,y3) und (x4,y4) verbindet.

Beispiel : Präsentieren Sie in dem für die ARC-Methode angegebenen Beispiel die PIE-Methode und erhalten Sie dieses Ergebnis.

    Verfahren Textausgabe(x,y:Ganzzahl;Text:String); - zeigt die im Parameter Text übergebene Zeichenfolge in einem Rechteck an, dessen obere linke Ecke durch x-, y-Koordinaten angegeben wird. Schriftmerkmale werden vom Schriftwerkzeug festgelegt.

Beispiel : Schreiben Sie den Namen des konstruierten Diagramms an das Ende des Formulars.

Canvas.Font.Höhe: = 20 ; // Zeichenhöhe 20 Pixel

Canvas.Font.Color:=clblue;

Canvas.TextOut(10, ClientHeight-24, 'SIN(X) Funktionsgraph');

Grafische Komponenten

Delphi bietet eine Reihe von sofort einsatzbereiten Komponenten zur Verbesserung der Benutzeroberfläche. Diese Komponenten werden auf der Seite platziert Zusätzlich und System Komponentenpalette.

KomponenteBild(KlasseZeit) – entworfen, um grafische Bilder anzuzeigen, die in externen Dateien mit Erweiterungen gespeichert sind:

    Ico(Icon, Piktogramm);

    bmp (Bitmap, Bitmap);

    Wmf, .emf (Metadatei);

    Jpg, .jpeg (JPEG-komprimiertes Bild).

Hauptsächlich Eigenschaften :

Automatische skalierung:boolean - wenn wahr, passt die Komponente ihre Größe an die Größe des geladenen Bildes an; standardmäßig falsch.

Strecken:boolean - wenn wahr, belegt der geladene Wert die gesamte Fläche der Komponente; Standard ist falsch.

Leinwand:Tcanvas - Wird verwendet, um zur Laufzeit in die Komponente zu zeichnen.

Bild:Tpicture - Gibt das in der Komponente platzierte Bild an.

Hauptsächlich Methoden Klasse Bild:

Verfahren Lade von der Datei(Dateiname:Zeichenfolge); - lädt ein Bild aus einer Datei namens Dateiname in die Komponente.

Verfahren Speichern unter(Dateiname:Zeichenfolge); -speichert das Bild aus der Komponente in einer Datei namens Filename.

KomponenteMalkasten - definiert einen zu zeichnenden rechteckigen Bereich. Das Haupteigentum ist Leinwand, stehen alle Methoden der Klasse Tcanvas zur Verfügung, sie hat keine eigenständigen Eigenschaften.

Beispiel : Zeichnen Sie eine gelbe Ellipse, die in die PaintBox1-Komponente eingeschrieben ist.

Prozedur Tform1Button1Click(sender:Toobject);

Mit PaintBox1.Canvas tun

Brush.Color:=clyellow;

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

Ende;

KomponenteBitBtn Bitmap-Schaltfläche

Die BitBtn-Schaltfläche kann im Gegensatz zur Standardschaltfläche zusätzlich zum Namen (Caption) ein durch die Eigenschaft angegebenes Bild enthalten Glyphe. Es gibt eine Reihe von Standard-BitBtn-Schaltflächen mit vordefinierten Eigenschaften (mit einem bestimmten Bild, einer Beschriftung und einem bestimmten Zweck) - der Typ der Standardschaltfläche wird über die Eigenschaft ausgewählt nett. Kind=(bkCustom, bkAbort,bkCancel, bkClose...)

Aufgabe Nummer 1

Erstellen Sie eine Anwendung, die zwei Bildkomponenten und 4 Schaltflächen im Hauptformular enthält („Bild hochladen“, „Geometrische Form erstellen“, „Farbe ändern“, „Beenden“) und Ihnen Folgendes ermöglicht:

a) Laden Sie in die Image1-Komponente ein vom Benutzer ausgewähltes grafisches Bild so, dass das Bild die gesamte Fläche der Image-Komponente einnimmt.

b) Zeigen Sie unter der Komponente Image1 die Aufschrift „Dies ist ein Bild aus einer Datei.

(für jede Messung der Abmessungen und Position des BauteilsBild1 Inschrift muss
strikt unterhalb der Komponente liegen).

c) Zeichnen Sie eine geometrische Form in die Image2-Komponente: ein gefülltes Segment einer Ellipse, die die Mitte der Image-Komponente mit den Mittelpunkten der unteren und rechten Seite der Image-Komponente verbindet.

(bei jeder Änderung der Größe und Position des BauteilsBild2 muss die Figur korrekt gebaut werden, d.h. entsprechend der Zuordnung zum BauteilBild2)

d) die Linienfarbe der in Image2 gezeichneten Figur auf Wunsch des Benutzers mit der ColorDialog-Komponente ändern.

Aufgabe Nummer 2

Erstellen Sie eine Anwendung, mit der Sie mehrere Beschriftungen zufällig in einer Bildkomponente platzieren können (z. B. das Wort „Hurra!“). Verwenden Sie zur Implementierung den Zufallszahlengenerator Randomize und die Random-Funktion.

Die Abmessungen der Bildkomponente, das im Bild angezeigte Wort und die Anzahl der Wörter müssen vom Benutzer eingegeben werden.

Aufgabe Nummer 3

Erstellen Sie eine Anwendung, mit der Sie den Namen einer geometrischen Form aus der ListBox auswählen und die ausgewählte Form in der Image-Komponente zeichnen können. Die Farbe der Form wird aus der RadioGroup-Komponente ausgewählt.

Aufgabe Nummer 4

Teilen Sie die PaintBox1-Komponente in 4 gleiche Teile, malen Sie jeden Teil mit einer anderen Farbe, zum Beispiel: blau, gelb, grün, rot.

Schreiben Sie neben jede Ecke von PaintBox1 die Koordinaten dieser Ecke (relativ zum Ursprung der Form, auf der sich die PaintBox1-Komponente befindet).

Aufgabe Nummer 5

AUS

Wählen Sie den Typ der gezeichneten Figur aus der Komponente Radiogroup1, die Füllfarbe aus der Komponente Radiogroup2 und zeichnen Sie die ausgewählte Figur in der Komponente Image.

Aufgabe Nummer 6

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Teilen Sie die PaintBox1-Komponente in 2 gleiche Teile, zeichnen Sie in jedem Teil eine Ellipse, die mit der Farbe gefüllt ist, die der Benutzer im ColorDialog ausgewählt hat.

Aufgabe Nummer 7

AUS Erstellen Sie eine Anwendung, mit der Sie:

Wählen Sie den Namen der geometrischen Figur aus der ListBox-Liste aus und zeichnen Sie die ausgewählte Figur in die Image-Komponente. Die Form sollte mit der vom Benutzer in der ColorDialog-Komponente ausgewählten Farbe gefüllt werden, wenn Ja in der RadioGroup-Komponente ausgewählt ist.

Aufgabe Nummer 8

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Teilen Sie die PaintBox1-Komponente in 4 gleiche Teile, zeichnen Sie in jedem Teil eine andere geometrische Form (Ellipse, Raute, Dreieck und Rechteck). Die Farbe jeder Form wird vom Benutzer im ColorGrid ausgewählt.

Aufgabe Nummer 9

Wählen Sie den Namen der Geometrie aus der ListBox aus
Formen (Ellipse, Raute, Rechteck) und zeichnen
die ausgewählte Form in der Bildkomponente. Ort
Formen in der Bildkomponente (I-Viertel, II-Viertel,

III oder IV Viertel) und die Füllfarbe der Figur wird ausgewählt
aus RadioGroup-Komponenten.

Aufgabe Nummer 10

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Stellen Sie sicher, dass die Größe der Seite kein Text sein darf, keine negative Zahl sein darf und die kleinere Größe des Formulars nicht überschreiten darf.

Teilen Sie die PaintBox1-Komponente in 4 gleiche Teile, zeichnen Sie in jedem Teil eine geometrische Form, die vom Benutzer in der Combobox ausgewählt wurde (Ellipse, Raute, Dreieck und Rechteck). Die Farbe der Form wird vom Benutzer in der ColorBox ausgewählt.

Aufgabe Nummer 11

Erstellen Sie eine Anwendung, mit der Sie:

Wählen Sie die Position des Drawables aus der Radiogroup-Komponente aus

in der Bildkomponente des rechtwinkligen Dreiecks festgelegt
die Füllfarbe der Form oder die Farbe des Umrisses, je nachdem
Aktivieren der Checkbox-Schaltflächen. Farbauswahl über
ColorGrid-Komponente.

Aufgabe Nummer 12

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Stellen Sie sicher, dass die Größe der Seite kein Text sein darf, keine negative Zahl sein darf und die kleinere Größe des Formulars nicht überschreiten darf.

Teilen Sie die PaintBox1-Komponente in 2 gleiche Teile, zeichnen Sie in einem der Teile eine vom Benutzer in der Combobox ausgewählte geometrische Figur (Ellipse, Raute, Dreieck und Rechteck). Die Farbe der Form wird vom Benutzer in der ColorBox ausgewählt.

Sie können beispielsweise die Farbe eines Formulars wie folgt ändern:

form1.Color:= ColorBox1.Colors;

Aufgabe Nummer 13

Erstellen Sie eine Anwendung, mit der Sie:

a) Zeichnen Sie ein Quadrat in der Mitte der Form (die Größe der Seite des Quadrats wird vom Benutzer eingegeben). Stellen Sie sicher, dass die Größe der Seite kein Text sein darf, keine negative Zahl sein darf und die kleinere Größe des Formulars nicht überschreiten darf.

b) Teilen Sie das Quadrat mit einer oder zwei Diagonalen, je nach Einbeziehung der Checkbox-Buttons, und übermalen Sie jedes entstehende Dreieck in einer anderen Farbe. Die Farbwahl erfolgt durch den Benutzer.

Aufgabe Nummer 14

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Stellen Sie sicher, dass die Größe der Seite kein Text sein darf, keine negative Zahl sein darf und die kleinere Größe des Formulars nicht überschreiten darf.

Teilen Sie die PaintBox1-Komponente in zwei gleiche Teile, zeichnen Sie eine Raute in einen Teil und zeichnen Sie ein beliebiges Dreieck in den anderen Teil. Die Farbe der Form wird vom Benutzer in der ColorBox ausgewählt.

Sie können beispielsweise die Farbe eines Formulars wie folgt ändern:

form1.Color:= ColorBox1.Colors;

Aufgabe Nummer 15

Erstellen Sie eine Anwendung, mit der Sie:

a) die Abmessungen der Bildkomponente horizontal und vertikal so einstellen, dass sie gleich und gleich der vom Benutzer über die Tastatur eingegebenen Zahl sind;

(vorausgesetzt, dass die Größe der Seite kein Text sein darf, keine negative Zahl sein darf und die kleinere Größe des Formulars nicht überschreiten darf)

b) Teilen Sie die Bildkomponente in 4 gleiche Quadrate mit zwei blauen Linien;

c) Zeichnen Sie innerhalb jedes resultierenden Quadrats einen darin eingeschriebenen Kreis (die Farbe der Kreise kann vom Benutzer über das Farbauswahldialogfeld ausgewählt werden).

Aufgabe Nummer 16

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Stellen Sie sicher, dass die Größe der Seite kein Text sein darf, keine negative Zahl sein darf und die kleinere Größe des Formulars nicht überschreiten darf.

Teilen Sie die PaintBox1-Komponente in 9 gleiche Teile und malen Sie jedes resultierende Schachbrettrechteck. Die Füllfarbe wird vom Benutzer in der ColorBox ausgewählt.

Sie können beispielsweise die Farbe eines Formulars wie folgt ändern:

form1.Color:= ColorBox1.Colors;

Aufgabe Nummer 17

Platzieren Sie zwei Bildkomponenten und vier Schaltflächen auf dem Formular: Linienfarbe, Füllfarbe, Ok und Beenden; und die Edit-Komponente.

Wenn Sie auf die Schaltfläche OK klicken, zeichnet Bild1 ein Quadrat mit der Seite X und Bild2 ein rechtwinkliges Dreieck mit gleichen Schenkeln, die jeweils die Länge X haben.

Der Scheitelpunkt des Dreiecks fällt mit dem Ursprung von Bild2 zusammen. Einer der Eckpunkte des Quadrats fällt mit dem Ursprung von Bild1 zusammen.

Die Schaltfläche OK wird nur verfügbar, wenn die Linienfarbe und die Füllfarbe zum Zeichnen der Form ausgewählt sind.

X - wählt zufällig mit der Zufallsfunktion aus und der Wert des X-Werts sollte in der Bearbeitungskomponente angezeigt werden.

Aufgabe Nummer 18

Erstellen Sie eine Anwendung, mit der der Benutzer die Abmessungen der PaintBox1-Komponente (in Pixel) festlegen kann.

Teilen Sie die PaintBox1-Komponente in 4 gleiche Teile, innerhalb des vom Benutzer ausgewählten Teils sollte ein gefüllter Kreis gebaut werden, dessen Größe vom Benutzer festgelegt wird. Der Benutzer wählt die Füllfarbe in der ColorBox aus.

Sie können beispielsweise die Farbe eines Formulars wie folgt ändern:

form1.Color:= ColorBox1.Colors;

Liste der Komponenten zur Anzeige von grafischen Informationen

Um grafische Informationen anzuzeigen, stellt die Delphi-Bibliothek Komponenten zur Verfügung, deren Liste in Tabelle 4.1 aufgeführt ist.

Tabelle 4.1 Piktogramm der Komponenten der grafischen Informationsanzeige

Komponente

Buchseite

Beschreibung

Bild (Bild)

Wird verwendet, um Grafiken anzuzeigen: Symbole, Bitmaps und Metadateien.


PaintBox (Fenster zum Zeichnen)

Wird verwendet, um einen Bereich auf dem Formular zu erstellen, in dem Sie zeichnen können.


DrawGrid (Zeichentisch)

Wird verwendet, um Nicht-Text-Daten in Zeilen und Spalten anzuzeigen.


Diagramm (Diagramme und Grafiken)

Die Komponente gehört zur TChart-Familie von Komponenten, die zum Erstellen von Diagrammen und Grafiken verwendet werden.


Sie können auch grafische Informationen auf der Oberfläche eines beliebigen Canvas anzeigen und eingeben.

Leinwand Leinwand ist keine Komponente, sollte also streng genommen nicht im Rahmen dieses Buches betrachtet werden. Da aber viele Komponenten, insbesondere Formulare, über einen Canvas verfügen und der Canvas die Möglichkeit bietet, verschiedene grafische Informationen darzustellen, ist es dennoch ratsam, erste Informationen zum Canvas zu geben.

Eine Leinwand ist ein Bereich einer Komponente, auf dem Sie fertige Bilder zeichnen oder anzeigen können. Es enthält Eigenschaften und Methoden, die Delphi-Grafiken stark vereinfachen. Alle komplexen Interaktionen mit dem System sind für den Benutzer verborgen, sodass eine Person, die in Computergrafik völlig unerfahren ist, in Delphi zeichnen kann.

Jeder Punkt der Leinwand hat Koordinaten X und Y. Das Canvas-Koordinatensystem beginnt, wie überall in Delphi, in der oberen linken Ecke des Canvas. Koordinate X erhöht sich beim Bewegen von links nach rechts, und die Koordinate Y- beim Bewegen von oben nach unten. Koordinaten werden in Pixel gemessen. Ein Pixel ist das kleinste Element auf der Oberfläche einer Zeichnung, das manipuliert werden kann. Die wichtigste Eigenschaft eines Pixels ist seine Farbe.

Canvas hat die Eigenschaft Pixel. Diese Eigenschaft ist ein 2D-Array, das die Farben der Leinwand steuert. Zum Beispiel, Leinwand. Pixel entspricht der Farbe des Pixels 10 von links und 20 von oben. Ein Array von Pixeln kann wie jede Eigenschaft behandelt werden: Ändern Sie die Farbe, indem Sie dem Pixel einen neuen Wert zuweisen, oder bestimmen Sie seine Farbe aus dem darin gespeicherten Wert. Zum Beispiel, Leinwand. Pixel:=0 oder Leinwand. Pixel :=clBlack- Dies ist eine Aufgabe für ein schwarzes Pixel.

Eigentum Pixel kann zum Zeichnen auf Leinwand verwendet werden. Lassen Sie uns versuchen, ein Pixel-für-Pixel-Diagramm einer Sinuswelle auf der Formleinwand zu zeichnen. Dazu im Formular Eventhandler OnPaint(Zeichnung) Sie können den folgenden Code einfügen:

Tform1. FormPaint(Sender: TObject);

Var,Y: real; // Funktionskoordinaten,PY: Lange Ganzzahl; // Pixelkoordinaten

Start:=clWeiß;

zum PX:=0 zu ClientBreite tun

(X - Diagrammargument,

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

(PY - Pixelkoordinate,

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

(Legt die Farbe der ausgewählten fest

Pixel (Über Helligkeit) ). Pixel:=0;

Ende;

Führen Sie diese Testanwendung aus und Sie sehen das in Abbildung 4.1 a gezeigte Ergebnis. Die Sinuskurve stellte sich heraus, wenn auch nicht sehr gut, weil. zerlegt in einzelne Punkte - Pixel.

Canvas - Klassenobjekt TLeinwand verfügt über viele Methoden, mit denen Sie mithilfe der Eigenschaft Diagramme, Linien und Formen zeichnen können Stift- Feder. Diese Eigenschaft ist ein Objekt, das wiederum mehrere Eigenschaften hat. Eine davon ist eine Eigenschaft, die Sie bereits kennen Farbe- die Farbe, mit der die Zeichnung aufgetragen wird. Die zweite Eigenschaft ist Breite(Linienbreite). Die Breite wird in Pixel angegeben. Die Standardbreite ist 1.

Eigentum Stil definiert die Art der Linie. Diese Eigenschaft kann die folgenden Werte annehmen:

Die Leinwand hat eine Eigenschaft PenPos Typ TPunkt(cm .). Diese Eigenschaft bestimmt die aktuelle Position des Stifts in Leinwandkoordinaten. Bewegen des Stifts ohne Zeichnen einer Linie, d. h. Rückgeld PenPos, hergestellt im Canvas-Verfahren MoveTo(X,Y). Hier ( X, Y) - die Koordinaten des Punktes, an dem sich der Stift bewegt. Dieser aktuelle Punkt wird zum Ausgangspunkt, von dem aus die Methode erfolgt LineTo(X,Y) Sie können eine Linie zu einem Punkt mit Koordinaten ( X, Y). Dadurch wird der aktuelle Punkt zum Endpunkt der Linie und des neuen Anrufs verschoben LineTo zeichnet einen Punkt von diesem neuen aktuellen Punkt.

Versuchen wir, die Sinuskurve aus dem vorherigen Beispiel mit einem Stift zu zeichnen. In diesem Fall der Form-Event-Handler OnPaint kann so aussehen:

Verfahren Tform1. FormPaint(Sender: TObject);

Var,Y: real; // Funktionskoordinaten,PY: Lange Ganzzahl; // Pixelkoordinaten

Start:=clWeiß;. MoveTo(0,ClientHeight div 2);

zum PX:=0 zu ClientBreite tun

(X - Diagrammargument,

entsprechend dem Pixel mit der px-Koordinate):=PX*4*Pi/ClientBreite;:=Sin(X);

(PY - Pixelkoordinate,

entsprechend der Y-Koordinate):=trunc(ClientHeight - (Y+1) *ClientHeight/2);

(Eine Linie wird auf dem Diagramm gezeichnet). LineTo(PX,PY);

Das Ergebnis der Anwendung in dieser Version sehen Sie in Abbildung 4.1 b. Wie Sie sehen können, hat sich die Qualität des Diagramms erheblich verbessert.

Der Stift kann nicht nur gerade Linien zeichnen, sondern auch Formen. Eine vollständige Liste der stiftbasierten Canvas-Methoden finden Sie in der integrierten Hilfe von Delphi. In der Zwischenzeit geben wir als Beispiel nur einen von ihnen an - Ellipse A, das eine Ellipse oder einen Kreis zeichnet. Es wird als deklariert

Verfahren Ellipse (X1, Y1, X2, Y2: Ganzzahl);

wo Parameter X1, X2, Y1, Y2 Definieren Sie die Koordinaten eines Rechtecks, das eine Ellipse oder einen Kreis beschreibt. Zum Beispiel der Betreiber

Ellipse (10, 40, 20, 50);

zeichnet einen Kreis mit Durchmesser 10 und Mittelpunktkoordinaten (15, 45).

Formen werden im Allgemeinen nicht leer gezeichnet, sondern mithilfe der Canvas-Eigenschaft ausgefüllt Bürste- Bürste. Eigentum Bürste ist ein Objekt, das wiederum eine Reihe von Eigenschaften hat. Eigentum Farbe definiert die Füllfarbe. Eigentum Stil definiert das Füllmuster (Schraffur). Standardwert Stil gleich bsFest, was eine feste Färbung bedeutet Farbe.

Am Stift Stift Es gibt noch eine weitere Eigenschaft, die wir noch nicht berücksichtigt haben. Diese Eigenschaft ist Modus(Modus). Standardwert Modus = pmCopy. Das bedeutet, dass die Linien in der in der Eigenschaft angegebenen Farbe gezeichnet werden Farbe. Aber auch andere Modi sind möglich, bei denen nicht nur Farbe berücksichtigt wird Farbe, sondern auch die Farbe der entsprechenden Hintergrundpixel. Der interessanteste dieser Modi ist der Modus pmNotXor- Addition mit dem Hintergrund durch inverses exklusives ODER. Wenn dieser Modus aktiviert ist, wird beim erneuten Zeichnen derselben Form an derselben Stelle auf der Leinwand das zuvor gezeichnete Bild entfernt und die Pixelfarben wiederhergestellt, die vor dem ersten Zeichnen der Form vorhanden waren.

Dieses Merkmal des Regimes pmNotXor kann verwendet werden, um einfache Animationen zu erstellen. Es reicht aus, etwas zu zeichnen, dann die Zeichnung zu löschen, leicht verändert neu zu zeichnen - und die Zeichnung scheint lebendig zu werden.

Versuchen Sie, sich eine einfache Animation zu machen - einen sich bewegenden Kreis. Starten Sie eine neue App und gehen Sie zum Abschnitt Implementierung Anzeige einfügen

X,Y: Ganzzahl;

Dadurch werden globale Variablen eingeführt X und Y- aktuelle Bildkoordinaten.

In einem Form-Event OnPaint Anweisungen einfügen

Bürste. Farbe:=clWeiß;:=clWeiß;. Stift. Modus: = pmNotXor;

Der erste dieser Operatoren setzt die Farbe des Pinsels auf Weiß. Bürste. Ihr Kreis wird also innen mit Weiß bemalt. Die zweite Anweisung setzt die Hintergrundfarbe der Formularoberfläche auf Weiß.

Die dritte Anweisung legt den Stiftmodus fest pmNotXor, mit dem Sie das alte Bild löschen können, bevor Sie das neue zeichnen.

Selbst die einfachste Animation muss synchronisiert werden. Andernfalls wird die Bewegungsgeschwindigkeit durch die Geschwindigkeit des Computers bestimmt. Übertragen Sie daher die Komponente in das Formular Timer- Timer vom System. Diese Komponente wird in Abschnitt 5.7 beschrieben .

Dort können Sie die detaillierte Beschreibung einsehen. Legen Sie vorerst seine Eigenschaft fest Intervall gleich zum Beispiel 30 (das ist die Verweilzeit in Millisekunden, aber die tatsächliche Verweilzeit ist länger - siehe Abschnitt 5.7) und legen Sie die Eigenschaft fest Ermöglicht gleich FALSCH(das bedeutet, dass der Timer nicht automatisch startet, wenn die Anwendung startet).

Im Ereignishandler dieser Komponente OnTimer Anweisungen einfügen

// Altes Bild löschen. Ellipse(X-5, Y, X+5, Y-1Q);(X);

// Zeichne ein neues Bild. Ellipse (X-5, Y, X+5, Y-10);

// Anhalten, wenn das Ende des Formulars erreicht ist

wenn(X >= ClientWidth-20) dann. aktiviert:=false;

Der erste dieser Operatoren zeichnet einen Kreis an der Stelle, an der er zuvor gezeichnet wurde, d.h. löscht das vorherige Bild.

Die letzte Anweisung stoppt das Bild am Rand des Formulars.

Fügen Sie dem Formular nun eine Schaltfläche hinzu. Taste und platzieren Sie im Click-Handler darauf die Operatoren

X: =10;: =100;. Ellipse (X-5, Y, X+5, Y-10); aktiviert:=true;

Die ersten beiden Operatoren legen die Anfangskoordinaten des Kreises fest. Die dritte Anweisung zeichnet den Kreis an seiner Startposition und die vierte startet den Timer.

Übersetzen Sie die Anwendung, führen Sie sie aus und klicken Sie auf die Schaltfläche. Sie sehen ein kreisförmiges Bild, das sich von links nach rechts über das Formular bewegt. Und dann verbinden Sie Ihre Vorstellungskraft und verwandeln Sie diese nicht sehr interessante Anwendung in etwas Aufregenderes.

Auf der Leinwand können Sie nicht nur programmgesteuert erstellte Bilder anzeigen, sondern auch Bilder, die in Grafikdateien gespeichert sind. Nur der Canvas selbst hat keine Methode zum Laden eines Bildes aus einer Datei. Daher muss die Datei in ein anderes Grafikobjekt geladen werden, das Informationen von Grafikdateien empfangen kann. Schreiben Sie dann das Bild von diesem Objekt mit der Canvas-Methode auf die Leinwand Zeichnen. Seine Beschreibung:

Draw(X, Y: Integer; Grafik: TGraphic);

Hier Parameter X und Y Bestimmen Sie die Koordinaten der oberen linken Ecke der Bildplatzierung auf der Leinwand, a Grafik- ein Objekt, das Informationen speichert. Ein solches Objekt kann beispielsweise ein Objekt vom Typ sein TBitMap, zum Speichern von Bitmatrizen vorgesehen. Mal sehen, wie das Ganze in der Praxis aussieht.

Öffnen Sie eine neue Anwendung, ziehen Sie eine Komponente auf das Formular OpenPictureDialog von der Seite Dialoge (dies ist Bestandteil des Dialogs zum Öffnen von Grafikdateien - siehe Abschnitt 8.2 ) und eine Schaltfläche Taste. Post OpenPictureDialog irgendwo im Formular, da diese Komponente nicht sichtbar ist, und platzieren Sie die Schaltfläche am unteren Rand des Formulars. Geben Sie den folgenden Code in den Button-Click-Handler ein:

Verfahren Tform1. Button1Click(Sender: TObject);

Var:TBitMap;

// Auswählen einer Grafikdatei durch den Benutzer

wenn OpenPictureDialog1. Ausführen dann

// Ein BitMap-Objekt vom Typ TBitMap erstellen:=TBitMap. schaffen;

// Bild auf Formularleinwand übertragen. Zeichnen (10, 10, Bitmap);

// Zerstöre das BitMap-Objekt. frei;

Ende;

Dieser Code erstellt ein temporäres Objekt des Typs TBitMap Mit Namen Bitmap. Anschließend wird der Dialog zum Öffnen einer Grafikdatei aufgerufen. OpenPictureDialog1 und wenn der Benutzer eine Datei ausgewählt hat, dann wird sie geladen Bitmap Methode Lade von der Datei. Dann die Methode Zeichnen das geladene Bild wird auf die Leinwand im Bereich mit den Koordinaten der oberen linken Ecke (10,10) kopiert. Danach das temporäre Objekt Bitmap ist zerstört.

Starten Sie Ihre Anwendung und klicken Sie auf die Schaltfläche. Sie werden sehen, dass Sie jede Art von Grafikdatei hochladen können. bmp und es wird auf der Formularleinwand angezeigt (siehe Abb. 4.2 a). Grafikdateien befinden sich im Verzeichnis Images. In Delphi 5 und 4 befindet es sich normalerweise in einem Verzeichnis. \Programme\Gemeinsame Dateien\Borland Shared. In Delphi 3 befindet es sich in einem Verzeichnis. \program files\Borland\Delphi 3 und in Delphi 1 - im Verzeichnis Delphi 16. Das Images-Verzeichnis enthält insbesondere das Unterverzeichnis \Images\Splash\16Color\, in dem die im Beispiel von Abb. 4.2 geladene Datei gespeichert ist

Sie haben eine schöne Anwendung zum Anzeigen von Grafikdateien erstellt. Aber jetzt wollen wir versuchen, seinen größten Nachteil zu sehen. Wechseln Sie, ohne Ihre Anwendung zu schließen, zu einem anderen Programm, kehren Sie beispielsweise zu Delphi zurück. Gehen Sie dann, ohne dort etwas zu tun, zurück zu Ihrer laufenden Anwendung. Wenn das Programmfenster, das Sie verlassen haben, das Fenster Ihrer Anwendung vollständig verdeckt hat, werden Sie bei der Rückkehr feststellen, dass das Bild im Fenster verschwunden ist. Wenn sich das Fenster Ihrer Anwendung nur teilweise überschnitten hat, sehen Sie bei der Rückkehr zu Ihrer Anwendung möglicherweise ein ähnliches Ergebnis wie in Abb. 4.2 b.

Sie können sehen, dass das auf der Formularleinwand gezeichnete Bild beschädigt ist, wenn das Fenster einer anderen Anwendung das Fenster Ihrer Anwendung vorübergehend überlappt. Mal sehen, wie wir diesen Mangel beheben können.

Wenn das Fenster verdeckt und das Bild beschädigt ist, teilt das Betriebssystem der Anwendung mit, dass sich etwas in der Umgebung geändert hat und dass die Anwendung entsprechende Maßnahmen ergreifen sollte. Sobald eine Fensteraktualisierung erforderlich ist, wird dafür ein Ereignis generiert OnPaint. Im Handler dieses Ereignisses (in unserem Fall das Formularereignis) müssen wir das Bild neu zeichnen.

Das Neuzeichnen kann je nach Anwendung auf unterschiedliche Weise erfolgen. In unserem Beispiel könnten wir eine Variablendeklaration machen Bitmap(Operator Var BitMap: TBitMap) außerhalb des obigen Verfahrens, d.h. Machen Sie diese Variable global, indem Sie sie direkt im Abschnitt platzieren Implementierung. Operator Bitmap. Frei könnte in den Formular-Event-Handler verschoben werden AufZerstören das passiert, wenn die Anwendung geschlossen wird. Dann haben Sie während der gesamten Laufzeit Ihrer Anwendung eine Kopie des Bildes in der Komponente Bitmap und Sie müssen nur den Ereignishandler eingeben OnPaint bildet nur einen Operator:

Zeichnen (10, 10, Bitmap);

Wenn Sie dies tun, werden Sie sehen, dass sich das Bild auf dem Formular nicht durch Fensterüberlappungen verschlechtert.

Neben der betrachteten Methode Zeichnen canvas hat eine andere Kopiermethode CopyRect:

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

Die Methode kopiert den angegebenen Parameter Quelle Bildbereich im Bildquellenbereich Leinwand zu den angegebenen Ziel Bereich dieser Leinwand. Art der TRect rechteckige Flächen kennzeichnen Quelle und Ziel, bereits in Abschnitt 3.2 beschrieben .

Zum Beispiel der Betreiber

CopyRect(MyRect2, Bitmap.Canvas, MyRect1);

Kopien auf die Leinwand des Formulars im Bereich MyRect2 Bild aus dem Bereich MyRect1 Komponente Leinwand Bitmap.

Kopiermethode CopyRect in dem von der Eigenschaft eingestellten Modus produziert Kopiermodus. Standardmäßig ist diese Eigenschaft auf eingestellt cmSrcCopy, was bedeutet, dass einfach das zuvor im Bereich enthaltene Bild ersetzt wird Ziel, auf dem kopierten Bild. Andere mögliche Werte Kopiermodus Sie können Bilder kombinieren, aber ihre Betrachtung würde den Rahmen dieses Buches sprengen.

Wir beschränken uns auf diese grundlegenden Informationen zur Ausgabe von Grafikinformationen auf der Leinwand. Abschnitt 3.2 Informationen über die Ausgabe des Textes auf die Leinwand wurden gemeldet. Im Allgemeinen ist die Leinwand ein komplexes Objekt, das viele weitere Eigenschaften und Methoden hat. Dies erfordert jedoch eine ausführliche Diskussion, die den Rahmen dieses Buches sprengen würde. Das nächste Buch in der Reihe „Alles über Delphi“ wird sich ausführlicher mit diesen Themen befassen.

Eine Fensterkomponente mit einer Eigenschaft Leinwand- Leinwand.

Bild- und PaintBox-Komponenten

Komponenten Bild und Malkasten stellen eine begrenzte Fläche mit einer Leinwand dar, auf der Bilder eingegeben werden können, wie in Abschnitt 4.2 beschrieben . Gleichzeitig die Komponente Malkasten, in der Tat gibt es nichts Neues im Vergleich zum Zeichnen auf der Formularleinwand. Malen auf Malkasten statt Form, hat keinen Vorteil, außer vielleicht etwas Erleichterung bei der Anordnung einer oder mehrerer Zeichnungen im Fensterbereich.

Aber zusätzlich zu diesen Fähigkeiten, die Komponente Bild Es gibt Eigenschaften, mit denen Sie mit verschiedenen Arten von Grafikdateien arbeiten können.Es unterstützt drei Arten von Dateien - Bitmaps, Symbole und Metadateien. Alle drei Dateitypen speichern Bilder; der Unterschied liegt nur in der Art und Weise, wie sie in Dateien gespeichert werden, und in den Mitteln, auf die sie zugreifen. Bitmap (Datei mit der Erweiterung . bmp) zeigt die Farbe jedes Pixels im Bild an. Gleichzeitig werden die Informationen so gespeichert, dass jeder Computer ein Bild mit einer seiner Konfiguration entsprechenden Auflösung und Anzahl von Farben darstellen kann.

Piktogramme (Dateien mit der Endung . ico) sind kleine Bitmatrizen. Sie werden häufig verwendet, um Anwendungssymbole, in Schnellschaltflächen, in Menüelementen und in verschiedenen Listen zu kennzeichnen. Das Speichern von Bildern in Symbolen ähnelt dem Speichern von Informationen in Bitmaps, es gibt jedoch Unterschiede. Insbesondere lässt sich das Icon nicht skalieren, es behält die Größe, in der es erstellt wurde.

Metadateien speichern nicht die Abfolge von Bits, aus denen ein Bild besteht, sondern Informationen darüber, wie das Bild erstellt wurde. Sie speichern Sequenzen von Zeichenbefehlen, die bei der Neuerstellung des Bildes wiederholt werden können. Dadurch werden solche Dateien im Allgemeinen kompakter als Bitmaps.

Komponente Bild ermöglicht es Ihnen, Informationen anzuzeigen, die in Grafikdateien aller angegebenen Typen enthalten sind. Dafür sein Eigentum Bild- Objekttyp TBild.

Abb.4.3 Bildbearbeitungsfenster


Um sich mit dieser Eigenschaft vertraut zu machen, öffnen Sie eine neue Anwendung und übertragen Sie die Komponente in das Formular Bild. Strecken Sie es oder legen Sie seine Eigenschaft fest Ausrichten gleich alClient sodass es den gesamten Kundenbereich des Formulars einnimmt. Klicken Sie auf die Schaltfläche mit den Auslassungspunkten neben der Eigenschaft Bild im Objektinspektorfenster oder doppelklicken Sie einfach auf Bild. Vor Ihnen öffnet sich ein Bildbearbeitungsfenster (Abb. 4.3), in dem Sie die Eigenschaft laden können Bild eine Grafikdatei (Schaltfläche Laden), sowie die geöffnete Datei unter einem neuen Namen oder in einem neuen Verzeichnis speichern. Klicken Sie auf Laden, um die Grafikdatei zu laden. Sie sehen ein Fenster zum Öffnen einer Grafikdatei, dargestellt in Abbildung 4.4. Wenn Sie den Cursor in der Liste der Grafikdateien bewegen, werden die darin enthaltenen Bilder im rechten Fenster angezeigt und darüber - Zahlen, die die Größe der Datei kennzeichnen Bild. Sie können jeden gewünschten Grafikdateityp auswählen. Denken Sie daran, dass Sie die mit Delphi gelieferten Grafikdateien im Verzeichnis Images finden. In Delphi 5 und 4 befindet es sich normalerweise in einem Verzeichnis. \Programme\Gemeinsame Dateien\Borland Shared. In Delphi 3 befindet es sich in einem Verzeichnis. \program files\Borland\Delphi 3 und in Delphi 1 im Verzeichnis Delphi 16. Klicken Sie nach dem Laden der Datei im Bild-Editor-Fenster und in Ihrer Komponente auf OK Bild Das ausgewählte Bild wird angezeigt. Sie können Ihre Anwendung ausführen und bewundern. Sie sehen das Bild jedoch bereits, auch ohne die Anwendung auszuführen.

Wenn Sie während des Designs ein Bild aus einer Datei in eine Komponente geladen haben Bild, wird es nicht nur angezeigt, sondern auch in der Anwendung gespeichert. Dadurch haben Sie die Möglichkeit, Ihre Anwendung ohne separate Grafikdatei zu versenden. Wie wir jedoch später sehen werden, in Bild Sie können auch externe Grafikdateien laden, während die Anwendung läuft.

Kommen wir zurück zur Betrachtung der Eigenschaften des Bauteils Bild.

Wenn Sie die Eigenschaft festlegen Automatische skalierung in Stimmt, dann die Größe der Komponente Bild passt sich automatisch an die Größe des darin platzierten Bildes an. Wenn das Eigentum Automatische skalierung eingebaut FALSCH, dann passt das Bild möglicherweise nicht in die Komponente oder umgekehrt kann die Fläche der Komponente viel größer sein als die Fläche des Bildes.

Eine andere Eigenschaft - Strecken können Sie nicht die Komponente an die Größe des Bildes anpassen, sondern das Bild an die Größe der Komponente. Installieren Automatische skalierung in FALSCH, strecken oder schrumpfen Sie die Komponentengröße Bild und installieren Strecken in Stimmt. Sie werden sehen, dass die Zeichnung die gesamte Fläche des Bauteils einnimmt, da es jedoch unwahrscheinlich ist, dass die Abmessungen realistisch festgelegt werden Bild genau proportional zur Größe des Bildes, wird das Bild verzerrt. Installieren Strecken in Stimmt kann nur für einige Muster sinnvoll sein, nicht aber für Bilder. Eigentum Strecken wirkt sich nicht auf Miniaturbilder aus, deren Größe nicht geändert werden kann.

Eigentum - Center einsetzen Stimmt, zentriert das Bild auf dem Bereich Bild wenn die Größe der Komponente größer ist als die Größe des Bildes.

Betrachten Sie eine andere Eigenschaft - Transparent(Transparenz). Wenn ein Transparent gleich Stimmt, dann das Bild rein Bild wird durchsichtig. Dies kann verwendet werden, um Bilder übereinander zu legen. Platzieren Sie die zweite Komponente auf dem Formular Bild und lade ein weiteres Bild hoch. Versuchen Sie einfach, ein wenig gefülltes Konturbild aufzunehmen. Sie können zum Beispiel ein Bild von denen nehmen, die normalerweise auf Schaltflächen platziert werden, zum Beispiel einen Pfeil (file.\program files\common files\borland shared\images\buttons\arrow1l.bmp). Beweg dein Bild so dass sie einander überlappen und im oberen Komponentensatz liegen Transparent gleich Stimmt. Sie werden sehen, dass das obere Bild das untere nicht mehr verdeckt. Eine der möglichen Anwendungen dieser Eigenschaft ist das Aufbringen von Beschriftungen auf dem Bild in Form einer Bitmatrix. Diese Beschriftungen können mit dem integrierten Programm Delphi Image Editor erstellt werden.

Bitte beachten Sie, dass die Unterkunft Transparent gilt nur für Bitmatrizen. Gleichzeitig wird die Farbe des unteren linken Pixels der Bitmap standardmäßig transparent gemacht (dh durch die Farbe des Bildes darunter ersetzt).

Wir haben uns das Laden eines Bildes aus einer Datei während des Designprozesses angesehen. Sondern Eigentum Bild ermöglicht es Ihnen auch, den Austausch mit Grafikdateien jeglicher Art während der Ausführung der Anwendung einfach zu organisieren. Um die Technik eines solchen Austauschs zu erklären, müssen wir zunächst die Eigenschaft genauer betrachten Bild.

Diese Eigenschaft ist ein Objekt, das wiederum Untereigenschaften hat, die auf das gespeicherte Grafikobjekt zeigen. Wenn drin Bild Wird die Bitmatrix gespeichert, wird von der Eigenschaft darauf verwiesen Bild. Bitmap. Wenn ein Symbol gespeichert ist, wird von der Eigenschaft darauf verwiesen Bild. Symbol. Auf die gespeicherte Metadatei wird durch die Eigenschaft verwiesen Bild. Metadatei. Schließlich wird durch die Eigenschaft auf ein Grafikobjekt beliebigen Typs gezeigt Bild. Grafik.

Ein Objekt Bild und seine Eigenschaften Bitmap, Symbol, Metadatei und Grafik Dateilese- und Schreibmethoden haben Lade von der Datei und Speichern unter:

Verfahren Lade von der Datei( konst Dateiname: Schnur);

Verfahren Speichern unter( konst Dateiname: Schnur);

Für Immobilien Bild. Bitmap, Bild. Symbol und Bild. Metadatei das Dateiformat muss der Objektklasse entsprechen: Bitmap, Icon, Metafile. Beim Lesen einer Datei in eine Eigenschaft Bild. Grafik die Datei muss im Metafile-Format vorliegen. Und für das Objekt selbst Bild Lese- und Schreibmethoden werden automatisch an den Dateityp angepasst. Lassen Sie uns dies anhand eines Beispiels erläutern.

Lassen Sie uns eine Anwendung ähnlich dem in Abschnitt 4.2 besprochenen Beispiel zum Anzeigen von Grafikdateien erstellen. Zur Abwechslung kann man seine Steuerung nicht mit einem Knopf organisieren Taste, aber das Menü. Platzieren Sie eine Komponente auf dem Formular Bild. Strecken Sie es oder legen Sie seine Eigenschaft fest Ausrichten gleich alClient sodass es den gesamten Kundenbereich des Formulars einnimmt. Ziehen Sie die Dialogkomponente zum Öffnen der Grafikdatei auf das Formular OpenPictureDialog(siehe Abschnitt 8.2 ). Platzieren Sie auch die Hauptmenükomponente auf dem Formular Hauptmenü(siehe Abschnitt 6.1 ) und legen Sie einen Abschnitt darin fest - Datei. Schreiben Sie im Handler dieses Abschnitts die Anweisung

(OpenPictureDialog1.Ausführen) dann. Bild. LoadFromFile(.Dateiname);

Dieser Operator ruft den Dialog zum Öffnen einer Grafikdatei (siehe Abbildung 4.4) auf und lädt sie in die Komponente Bild1 ein Bild aus einer vom Benutzer ausgewählten Datei (siehe Abb.4.5). Darüber hinaus kann die Datei jeden Typs haben: eine Bitmap, ein Symbol oder eine Metadatei.

Abb.4.5 Bild in einer Komponente Bild Bitmatrix (a) und Piktogramm (6)



In dieser Anwendung ist das Verfahren Lade von der Datei angewendet Bild1. Bild. Wenn nur Bitmap-Dateien geöffnet werden, kann die Dateiladeanweisung durch ersetzt werden

Bild. Bitmap. LoadFromFile(.Dateiname);

Für Piktogramme könnte ein Operator verwendet werden. Bild. Symbol. LoadFromFile(.Dateiname);

und für Metadateien der Operator. Bild. Metadatei. LoadFromFile(.Dateiname);

oder. Bild. Grafik. LoadFromFile(.Dateiname);

Aber in all diesen Fällen tritt ein Fehler auf, wenn das Dateiformat nicht dem beabsichtigten entspricht. Die Methode funktioniert genauso. Speichern unter mit dem Unterschied, dass zutraf Bild oder zu Bild. Grafik Es speichert ein Bild eines beliebigen Formats in einer Datei. Zum Beispiel, wenn Sie Ihrer Anwendung einen Dialog hinzufügen Dialog Bild speichern(siehe Abschnitt 8.2 ), rufen Sie den Abschnitt Speichern unter im Menü auf und platzieren Sie den Operator in seinem Handler

SavePictureDialog1. Ausführen dann. Bild. SaveToFile(SavePictureDialog1.FileName);

dann kann der Benutzer das Bild in einem beliebigen Format in einer Datei mit einem neuen Namen speichern. Nur in diesem Fall muss, um weitere Verwechslungen zu vermeiden, die Endung der gespeicherten Datei noch dem Format des gespeicherten Bildes entsprechen.

Das Programm funktioniert absolut identisch für Bilder in jedem Format, wenn Sie den Speicheroperator durch ersetzen

Bild. Grafik. SaveToFile(.Dateiname);

Eigenschaft verwenden Bild. Grafik. Und wenn Sie das in der Komponente gespeicherte Format kennen Bild Bilder, dann können Sie die Methode anwenden Speichern unter zu Eigenschaften Bild. Bitmap, Bild. Symbol und Bild. Metadatei.

Für alle betrachteten Objekte Bild, Bild. Bitmap, Bild. Symbol und Bild. Metadatei Methoden zur Zuweisung von Objektwerten sind definiert:

Zuweisen (Quelle: TPersistent);

Allerdings z Bitmap, Symbol und Metadatei Es ist möglich, nur die Werte homogener Objekte zuzuweisen: dementsprechend Bitmatrizen, Piktogramme, Metadateien. Beim Versuch, heterogenen Objekten Werte zuzuweisen, wird eine Ausnahme ausgelöst ÅConvertError. Ein Objekt Bild- universell, es können die Werte von Objekten einer der anderen drei Klassen zugewiesen werden. Und die Bedeutung Bild kann nur einem Objekt zugewiesen werden, dessen Typ mit dem Typ des darin gespeicherten Objekts übereinstimmt.

Methode Zuordnen kann auch verwendet werden, um Bilder mit dem Zwischenablagepuffer zu teilen. Zum Beispiel der Betreiber

Assign(Bild1.Bild);

legt das gespeicherte Bild in der Zwischenablage ab Bild1. Ebenso der Betreiber

Grafik-Delphi-Image-App

Bild1. Bild. Zuweisen (Zwischenablage);

werde einlesen Bild1 Bild in der Zwischenablage. Darüber hinaus kann es sich um ein beliebiges Bild und sogar um Text handeln.

Sie müssen nur daran denken, in den Operator einzufügen, wenn Sie mit der Zwischenablage arbeiten Verwendet Ihr Modul ein Verweis auf das Modul clipbrd. Delphi schaltet diesen Link nicht automatisch ein.

Zurück zu den Eigenschaften der Komponente Bild, können wir einen Nachteil unserer in Abb. 4.5 gezeigten Testanwendung feststellen. Beim Laden verschiedener Bilder kann das Anwendungsfenster entweder zu klein werden, und Sie sehen dann nur einen Teil des Bildes, oder zu groß und dann wird das Bild hässlich in der oberen linken Ecke des Formulars platziert, wodurch viel leerer Platz bleibt. Dieses Manko kann durch Nutzung der Eigenschaften behoben werden Höhe(Höhe) und Breite(Breite) Komponente Bild. Auf dem Grundstück Automatische skalierung etabliert in Stimmt Maße Bild automatisch auf die Größe des hochgeladenen Bildes gesetzt. Und diese Abmessungen können verwendet werden, um die Größe des Formulars entsprechend zu ändern. Beispielsweise könnte der obige Code zum Laden eines Bildes aus einer Datei durch Folgendes ersetzt werden:

OpenPictureDialog1. Ausführen dann

Start. Bild. LoadFromFile(.Dateiname);. ClientHeight:= Bild1. Höhe+10;. Oben:=Form1. ClientRect. oben

+ (Form1.ClientHeight - Image1.Height) div 2;. ClientWidth := Bild1. Breite+10;. Links:=Form1. ClientRect. Links

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

Ende;

Dieser Code legt die Größe des Clientbereichs des Formulars etwas größer als die Größe der Komponente fest. Bild1, die sich wiederum aufgrund der Eigenschaft an die Größe des Bildes anpassen Automatische skalierung. Wenden Sie diese Korrekturen auf Ihre Anwendung an, führen Sie sie aus und sehen Sie, dass sich das Formular automatisch an die Größe des hochgeladenen Bildes anpasst

Shape-Komponente

Komponente Form nur bedingt der Darstellungsweise von grafischen Informationen zuzuordnen, da sie lediglich verschiedene geometrische Formen darstellen, passend schattiert. Die Haupteigenschaft dieser Komponente ist Form(Form), die folgende Werte annehmen kann:

Beispiele für diese Formulare sind in Abbildung 4.7 dargestellt

Abb.4.7 Komponentenbeispiele Form


Eine weitere wesentliche Eigenschaft des Bauteils ist Bürste(Bürste). Diese Eigenschaft ist ein Objekt vom Typ TBrush, die eine Reihe von Untereigenschaften hat, insbesondere: color ( Bürste. Farbe) und Stil ( Bürste. Stil), um die Form zu füllen. Füllen Sie einige Werte aus Stil sehen Sie in Abb.4.7 die dritte spezifische Eigenschaft der Komponente Form - Stift(Stift), der den Linienstil definiert. Diese Eigenschaft, wie die Eigenschaft Bürste, wurden bereits in Abschnitt 4.2 besprochen . Referenzdaten zu diesen Eigenschaften finden Sie in Kapitel 10*.

Diagrammkomponente

Betrachten Sie nun die Komponente Diagramm. Mit dieser Komponente können Sie verschiedene Diagramme und Grafiken erstellen, die sehr beeindruckend aussehen (Abb. 4.8). Komponente Diagramm hat viele Eigenschaften, Methoden, Ereignisse, wenn Sie also alle berücksichtigen, müssten Sie dem ein ganzes Kapitel widmen. Daher beschränken wir uns darauf, nur die Hauptmerkmale zu betrachten Diagramm. Und den Rest finden Sie in der integrierten Delphi-Hilfe oder probieren Sie sie einfach aus, indem Sie mit Diagrammen experimentieren.

Komponente Diagramm ist ein Container von Objekten Serie Typ TChartSeries- Datenreihen, die durch unterschiedliche Darstellungsstile gekennzeichnet sind. Jede Komponente kann mehrere Serien umfassen. Wenn Sie ein Diagramm anzeigen möchten, entspricht jede Reihe einer Kurve im Diagramm. Wenn Sie Diagramme anzeigen möchten, können Sie bei einigen Diagrammtypen mehrere verschiedene Reihen übereinander legen, bei anderen (z. B. für Tortendiagramme) wird es wahrscheinlich hässlich aussehen. In diesem Fall können Sie jedoch für eine Komponente festlegen Diagramm mehrere Reihen derselben Daten mit unterschiedlichem Diagrammtyp. Indem Sie dann zu jedem Zeitpunkt eines davon aktivieren, können Sie dem Benutzer die Wahl des Diagrammtyps geben, der die für ihn interessanten Daten anzeigt.

Platzieren Sie ein oder zwei (wenn Sie Abbildung 4.8 reproduzieren möchten) Komponenten Diagramm auf dem Formular und sehen Sie sich die Eigenschaften an, die im Objektinspektor geöffnet werden. Lassen Sie uns einige davon erklären.

Gibt an, ob der Benutzer den überwachten Teil des Graphen zur Laufzeit scrollen kann, indem er mit der rechten Maustaste klickt. Mögliche Werte: pmNone - Scrollen ist deaktiviert, pmHorizontal, pmVertical oder pmBoth - Scrollen ist jeweils nur in horizontaler Richtung, nur in vertikaler Richtung oder in beide Richtungen erlaubt.

Ermöglicht dem Benutzer, den Maßstab des Bildes während der Ausführung zu ändern, indem er Fragmente eines Diagramms oder einer Grafik mit dem Mauszeiger ausschneidet (Abb. 4.8 b unten zeigt den Moment des Betrachtens eines Fragments der Grafik, die vollständig in Abb. 4.8 dargestellt ist a).

Gibt den Titel des Diagramms an.

Gibt die Beschriftung für das Diagramm an. Standardmäßig keine. Der Beschriftungstext wird durch die Untereigenschaft Text definiert.

Definiert einen Rahmen um das Diagramm.

Diagrammlegende - eine Liste von Symbolen.

Randlinks, Randrechts, Randoben, Randunten

Linke, rechte, obere und untere Randwerte.

Untere Achse, linke Achse, rechte Achse

Diese Eigenschaften bestimmen die Eigenschaften der unteren, linken bzw. rechten Achse. Das Festlegen dieser Eigenschaften ist für Diagramme und einige Arten von Diagrammen sinnvoll.

Linke Wand, untere Wand, hintere Wand

Diese Eigenschaften bestimmen jeweils die Eigenschaften des linken, unteren und hinteren Randes des dreidimensionalen Darstellungsbereichs des Graphen (siehe Abb. 4.8 a, unterer Graph).

Liste der Datenreihen, die in der Komponente angezeigt werden sollen.

Aktiviert oder deaktiviert die 3D-Kartenanzeige.

Eigenschaften der dreidimensionalen Anzeige.

Dreidimensionale Skala (bei Abb. 4.8 ist dies die Dicke des Diagramms und die Breite der Diagrammbänder).


Neben vielen der aufgelisteten Eigenschaften im Objektinspektor gibt es Schaltflächen mit Auslassungspunkten, mit denen Sie die eine oder andere Seite des Diagrammeditors aufrufen können - ein mehrseitiges Fenster, in dem Sie alle Eigenschaften von Diagrammen festlegen können. Der Aufruf des Diagrammeditors ist auch durch Doppelklick auf die Komponente möglich Diagramm oder indem Sie mit der rechten Maustaste darauf klicken und den Befehl Diagramm bearbeiten aus dem Popup-Menü auswählen.

Wenn Sie versuchen möchten, die in Abbildung 4.8 gezeigte Anwendung zu reproduzieren, doppelklicken Sie auf die oberste Komponente Diagramm. Sie gelangen zum Diagrammeditorfenster (Abb. 4.9) zur Diagrammseite, die mehrere Registerkarten hat. Zuallererst wird Sie die Registerkarte Serie interessieren. Klicken Sie auf die Schaltfläche Hinzufügen - fügen Sie eine Serie hinzu. Sie gelangen zu einem Fenster (Abb. 4.10), in dem Sie den Diagramm- oder Diagrammtyp auswählen können. Wählen Sie in diesem Fall Pie - ein Tortendiagramm. Auf der Registerkarte Titel können Sie den Titel des Diagramms festlegen, auf der Registerkarte Legende können Sie die Anzeigeoptionen für die Diagrammlegende (Symbolliste) festlegen oder ganz aus dem Bildschirm entfernen, die Registerkarte Panel bestimmt das Aussehen des Panels auf dem das Diagramm angezeigt wird, können Sie auf der Registerkarte 3D das Aussehen Ihres Diagramms ändern: Neigung, Scherung, Dicke usw.

Wenn Sie mit dem Diagrammeditor arbeiten und einen Diagrammtyp ausgewählt haben, werden die Komponenten Diagramm Ihr Formular zeigt sein Aussehen mit darin eingegebenen bedingten Daten (siehe Abb. 4.11).

Abb.4.10 Auswählen eines Diagrammtyps im Diagrammeditor


Daher können Sie das Ergebnis der Anwendung verschiedener Optionen auf Ihre Anwendung sofort beobachten, was sehr praktisch ist.

Auf der Seite Serie, die ebenfalls eine Reihe von Registerkarten enthält, können Sie zusätzliche Anzeigemerkmale für die Serie auswählen. Insbesondere für ein Tortendiagramm auf der Registerkarte Format ist es hilfreich, die Option Eingekreister Kreis zu aktivieren, die eine beliebige Größe der Komponente ermöglicht Diagramm Anzeige des Diagramms als Kreis. Auf der Registerkarte Markierungen bestimmen die Schaltflächen der Gruppe Stil, was auf den Beschriftungen der einzelnen Diagrammsegmente geschrieben wird: Wert - Wert, Prozent - Prozentsätze, Beschriftung - Datennamen usw. Im Beispiel von Abb.4.8 ist die Schaltfläche „Prozent“ aktiviert und die Prozentvorlage auf der Registerkarte „Allgemein“ festgelegt, wodurch sichergestellt wird, dass nur ganzzahlige Werte angezeigt werden.

Wenn Sie möchten, können Sie diese Komponente ergänzen Diagramm eine andere identische Serie, indem Sie auf der Registerkarte "Serien" der Diagrammseite auf die Schaltfläche "Klonen" klicken, und dann für diese neue Serie auf die Schaltfläche "Ändern" klicken und einen anderen Diagrammtyp auswählen, z. B. Balken. Natürlich sehen zwei verschiedene Diagrammtypen in derselben Abbildung schlecht aus. Aber Sie können den Indikator dieser neuen Serie auf der Registerkarte Serie ausschalten und den Benutzer dann die eine oder andere Art der Diagrammanzeige auswählen lassen (wir zeigen, wie das unten geht).

Verlassen Sie den Diagrammeditor und wählen Sie die unterste Komponente in Ihrer Anwendung aus Diagramm und wiederholen Sie die Einstellungseigenschaften dafür mit dem Diagrammeditor. In diesem Fall müssen Sie zwei Reihen angeben, wenn Sie zwei Kurven im Diagramm anzeigen möchten, und den Diagrammtyp Linien auswählen. Da es sich um Diagramme handelt, können Sie die Registerkarten Achsen und Wände verwenden, um die Koordinateneigenschaften der Achsen und dreidimensionalen Flächen des Diagramms festzulegen.

Damit ist die Gestaltung des Erscheinungsbildes der Anwendung abgeschlossen. Es bleibt, den Code zu schreiben, der die Daten angibt, die Sie anzeigen möchten. Lassen Sie uns für eine Testanwendung einfach einige konstante Daten im Tortendiagramm und Sinus- und Kosinusfunktionen in den Diagrammen festlegen.

Um die angezeigten Werte festzulegen, verwenden Sie die Serienmethoden Serie. Konzentrieren wir uns auf drei Hauptmethoden.

Methode Klar löscht die Serie von zuvor eingegebenen Daten.

Methode Hinzufügen:

(Const AValue: Double; Const ALabel: String;: TColor)

können Sie dem Diagramm einen neuen Punkt hinzufügen. Parameter Ein Wert entspricht dem Mehrwert, Parameter Ein Etikett- der Name, der auf dem Diagramm und in der Legende angezeigt wird, Eine Farbe- Farbe. Parameter Ein Etikett- optional, kann leer gesetzt werden: "".

Methode XY hinzufügen:(Const AXValue, AYValue: Double; ALabel: String; AColor: TColor)

ermöglicht das Hinzufügen eines neuen Punktes zum Funktionsgraphen. Optionen AXWert und AYWert Argument und Funktion übereinstimmen. Optionen Ein Etikett und Eine Farbe das gleiche wie in der Methode Hinzufügen.

Somit kann der Ablauf zum Laden von Daten in unserem Beispiel wie folgt aussehen:

155;=251;=203;=404;

Var:Wort;

Start Serie1 tun

Start;(A1, "Etage 1", clGelb);(A2, "Etage 2", clBlau);(A3, "Etage 3", clRot);(A4, "Etage 4", clLila);

Ende;. klar. klar;

zum i:=0 zu 100 tun

Start. AddXY(0.02*Pi*i, sin(0.02*Pi*i), "", clRed);. AddXY (0,02*Pi*i, cos (0,02*Pi*i), "", clBlue);

Wenn Sie beispielsweise für die im Diagramm angezeigten Daten zwei Reihen vorgesehen haben Serie1 und Serie4 verschiedene Typen - Kuchen und Bar, dann können Sie eine Prozedur eingeben, die den Diagrammtyp auf Wunsch des Benutzers ändert. Dieser Vorgang kann im Ereignis eingegeben werden anklicken einer Schaltfläche, in einem Menübefehl oder beispielsweise einfach bei der Verarbeitung eines Klicks auf eine Komponente Diagramm. Um Daten hochzuladen Serie4 und um dieses Diagramm im ersten Moment unsichtbar zu machen, kann man am Ende der obigen Prozedur die Anweisungen einfügen

Zuweisen (Serie1);. aktiv:=falsch;

Der erste dieser Operatoren überschreibt die eingegebenen Daten Serie1, in Serie Serie4. Und der zweite Operator macht die Reihe unsichtbar Serie4. Das Ändern des Diagrammtyps wird durch die Prozedur durchgeführt

aktiv:= nicht Serie1. Aktiv;. aktiv:= nicht Serie4. aktiv;

In Abb. 4.8 b sehen Sie das Ergebnis des Wechsels des Benutzers zu einem anderen Diagrammtyp.

Um grafische Informationen in der Delphi-Bibliothek anzuzeigen, werden Komponenten bereitgestellt, deren Liste in Tabelle angegeben ist. 6.

Tabelle 6

Komponenten zum Anzeigen von grafischen Informationen

Komponente Buchseite Beschreibung
Bild (Bild) Zusätzlich Wird verwendet, um Grafiken anzuzeigen
PaintBox (Fenster zum Zeichnen) System Wird verwendet, um einen Bereich auf dem Formular zu erstellen, in dem Sie zeichnen können
DrawGrid (Zeichentisch) Zusätzlich Wird verwendet, um Nicht-Text-Daten in Zeilen und Spalten anzuzeigen
Diagramm (Diagramme und Grafiken) Zusätzlich Die Komponente gehört zur TeeChart-Familie von Komponenten, die zum Erstellen von Diagrammen und Grafiken verwendet werden
Chartfx (Diagramme und Grafiken) ActiveX Diagramm- und Grafikeditor
FIBook (Excel-Seiten) ActiveX Komponente zur Eingabe und Verarbeitung numerischer Informationen
VtChart (Charts) ActiveX Diagrammfenster

Darüber hinaus können Sie grafische Informationen auf der Oberfläche jeder Fensterkomponente anzeigen und eingeben, die über die Eigenschaft verfügt Leinwand- Leinwand.

Bildtabellen - DrawGrid- und StringGrid-Komponenten

Komponente DrawGrid Wird verwendet, um eine Tabelle in einer Anwendung zu erstellen, die Grafiken enthalten kann. Diese Komponente ähnelt der Komponente String-Gitter, da letzteres abgeleitet ist Zuggitter. Daher ein DrawGrid alle Eigenschaften, Methoden, Ereignisse der Komponente sind vorhanden String-Gitter, andere als die, die sich auf den Text beziehen, d.h. abgesehen von Eigenschaften Zellen, Spalten, Zeilen, Objekte. Aus dieser Sicht ist die Komponente StringGrid hat viel mehr Potenzial als Zuggitter, weil es sowohl Bilder als auch Texte in Zellen speichern kann. Und wenn Sie Text in einige Zellen eingeben möchten Zuggitter, dann müssen Sie Methoden zum Ausgeben von Text auf der Leinwand verwenden, was nicht sehr praktisch ist.

Komponenten DrawGrid und StringGrid eine Leinwand haben Leinwand, wo Bilder gepostet werden können.

Es gibt eine Methode Zelle, die den Bereich der Leinwand zurückgibt, der der angegebenen Zelle zugewiesen ist. Diese Methode ist definiert als

Funktion CellRect(ACol, ARow: Lange Ganzzahl): TRect;

wo ACol und ARow- Spalten- und Zeilenindizes, beginnend bei 0, an deren Schnittpunkt sich die Zelle befindet. Der von dieser Funktion zurückgegebene Bereich ist der Bereich der Leinwand, in dem das gewünschte Bild gezeichnet werden kann. Zum Beispiel der Betreiber

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

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

Kopien nach Methode CopyRect in Zelle (1,1) der Tabelle DrawGridl Bild von der Komponente Bitmap. Diese Zelle ist die zweite von links und die zweite von oben in der Tabelle, da die Indizes bei 0 beginnen. Beachten Sie, dass, wenn die Zellenabmessungen kleiner als die Größe des kopierten Bildes sind, nur der obere linke Teil des Bildes verwendet wird erscheinen in der Zelle.

Komponenten-Leinwandbild DrawGrid und StringGrid Wie auf der Leinwand jeder Komponente wird es gelöscht, wenn das Anwendungsfenster von anderen Fenstern überlappt wird oder wenn die Anwendung beispielsweise minimiert wird.

Eine bequeme Möglichkeit, Bilder in Zellen einzugeben DrawGrid ist die Verwendung eines Event-Handlers OnDrawCell. Diese Ereignisse treten für jede Tabellenzelle im Moment ihrer Neuzeichnung auf. Der Handler-Header sieht folgendermaßen aus:

Prozedur TForml.DrawGridlDrawCell(Sender: TObject;

ACol, ARow: Ganzzahl; Rect: TRect; Zustand: TGridDrawState)

Parameter Bundesland gibt den Zustand der Zelle an. Es ist eine Menge, die die folgenden Elemente enthalten kann: gdAusgewählt- markierte Zelle gdFokussiert- die fokussierte Zelle, gdBehoben- eine Zelle in einem festen Bereich der Tabelle. Parameter Bundesland kann verwendet werden, um Zellen in verschiedenen Zuständen unterschiedlich anzuzeigen.

Shape-Komponente

Shape-Komponente nur bedingt der Darstellungsweise von grafischen Informationen zuzuordnen, da sie lediglich verschiedene geometrische Formen darstellen, passend schattiert. Die Haupteigenschaft dieser Komponente ist Form(Form), die folgende Werte annehmen kann:

StRectangle - ein Rechteck;

StSquare - quadratisch;

StRoundRect - ein Rechteck mit abgerundeten Ecken;

StRouhdSquare - quadratisch mit abgerundeten Ecken;

StEllipse - Ellipse;

StCircle - ein Kreis.

Eine weitere wesentliche Eigenschaft des Bauteils ist Bürste(Bürste). Diese Eigenschaft ist ein Objekt vom Typ Bürste, mit einer Reihe von Untereigenschaften, insbesondere Farbe (Pinsel.Farbe) und Stil (Pinselstil) Formfüllung. Sie können die Füllung bei einigen Style-Werten in Abb. 3.2. Die dritte spezifische Eigenschaft der Komponente Form- Stift(Stift), der den Linienstil definiert.

Diagrammkomponente

Betrachten Sie nun die Komponente Diagramm. Mit dieser Komponente können Sie verschiedene Diagramme und Grafiken erstellen, die sehr beeindruckend aussehen. Komponente Diagramm hat viele Eigenschaften, Methoden, Ereignisse, wenn Sie also alle berücksichtigen, müssten Sie dem ein ganzes Kapitel widmen. Daher beschränken wir uns darauf, nur die Hauptmerkmale zu betrachten Diagramm. Und den Rest finden Sie in der integrierten Delphi-Hilfe oder probieren Sie sie einfach aus, indem Sie mit Diagrammen experimentieren.

Komponente Diagramm ist ein Container von Objekten Serie- Klassennachkommen TchartSeries. Jedes dieser Objekte stellt eine Reihe von Daten dar, die durch einen bestimmten Anzeigestil gekennzeichnet sind: die eine oder andere Grafik oder ein Diagramm. Jede Komponente Diagramm kann mehrere Serien umfassen. Wenn Sie ein Diagramm anzeigen möchten, entspricht jede Reihe einer Kurve im Diagramm. Wenn Sie Diagramme anzeigen möchten, können Sie bei einigen Diagrammtypen mehrere verschiedene Reihen übereinander legen, bei anderen (z. B. für Tortendiagramme) wird es wahrscheinlich hässlich aussehen. In diesem Fall können Sie jedoch für eine Komponente festlegen Diagramm mehrere Reihen derselben Daten mit unterschiedlichem Diagrammtyp. Indem Sie dann zu jedem Zeitpunkt eines davon aktivieren, können Sie dem Benutzer die Wahl des Diagrammtyps geben, der die für ihn interessanten Daten anzeigt.

Platzieren Sie ein oder zwei Komponenten Diagramm auf dem Formular und sehen Sie sich die Eigenschaften an, die im Objektinspektor geöffnet werden. Lassen Sie uns einige davon erklären.

AllowPanning - bestimmt die Fähigkeit des Benutzers, den beobachteten Teil des Diagramms während der Ausführung zu scrollen, indem er die rechte Maustaste drückt. Mögliche Werte: pmNone - Scrollen ist deaktiviert, pmHori/ontal, pm Vertical oder pmBoth - Scrollen ist jeweils nur in horizontaler Richtung, nur in vertikaler Richtung oder in beide Richtungen erlaubt.

AhowZoom - ermöglicht dem Benutzer, den Bildzoom zur Laufzeit zu ändern, indem er Fragmente eines Diagramms oder Diagramms mit dem Mauszeiger ausschneidet. Wird der Fragmentrahmen nach rechts unten gezogen, dann wird dieses Fragment auf das gesamte Diagrammfeld gestreckt. Und wenn der Rahmen nach oben und nach links gezogen wird, wird der ursprüngliche Maßstab wiederhergestellt.

Titel - definiert den Titel des Diagramms.

Fuß - definiert die Beschriftung unter dem Diagramm. Standardmäßig keine. Der Beschriftungstext wird durch die Untereigenschaft Text definiert.

Rahmen - definiert den Rahmen um das Diagramm.

Neben vielen der aufgelisteten Eigenschaften im Objektinspektor gibt es Schaltflächen mit Auslassungspunkten, mit denen Sie die eine oder andere Seite des Diagrammeditors aufrufen können - ein mehrseitiges Fenster, in dem Sie alle Eigenschaften von Diagrammen festlegen können. Der Aufruf des Diagrammeditors ist auch durch Doppelklick auf die Komponente möglich Diagramm oder indem Sie mit der rechten Maustaste darauf klicken und den Befehl Diagramm bearbeiten aus dem Popup-Menü auswählen.

Doppelklicken Sie auf die oberste Komponente Diagramm. Sie werden zum Diagrammeditorfenster zur Diagrammseite weitergeleitet, die mehrere Registerkarten enthält. Zuallererst wird Sie die Registerkarte Serie interessieren. Klicken Sie auf die Schaltfläche Hinzufügen - fügen Sie eine Serie hinzu. Sie werden zu einem Fenster weitergeleitet, in dem Sie den Diagramm- oder Diagrammtyp auswählen können. Wählen Sie in diesem Fall Pie - ein Tortendiagramm. Auf der Registerkarte Titel können Sie den Titel des Diagramms festlegen, auf der Registerkarte Legende können Sie die Anzeigeoptionen für die Diagrammlegende (Symbolliste) festlegen oder ganz aus dem Bildschirm entfernen, die Registerkarte Panel bestimmt das Aussehen des Panels auf dem das Diagramm angezeigt wird, können Sie auf der Registerkarte 3D das Aussehen Ihres Diagramms ändern: Neigung, Scherung, Dicke usw.

Wenn Sie mit dem Diagrammeditor arbeiten und einen Diagrammtyp ausgewählt haben, werden die Komponenten Diagramm Ihr Formular zeigt sein Aussehen mit darin eingegebenen bedingten Daten an. Daher können Sie das Ergebnis der Anwendung verschiedener Optionen auf Ihre Anwendung sofort beobachten, was sehr praktisch ist.

Auf der Seite Serie, die ebenfalls eine Reihe von Registerkarten enthält, können Sie zusätzliche Anzeigemerkmale für die Serie auswählen. Insbesondere für ein Kreisdiagramm auf der Registerkarte „Format“ ist es hilfreich, die Option „Kreisförmiger Kreis“ zu aktivieren, wodurch sichergestellt wird, dass das Diagramm bei jeder Größe der Diagrammkomponente als Kreis angezeigt wird. Auf der Registerkarte Markierungen bestimmen die Schaltflächen der Gruppe Stil, was auf den Beschriftungen der einzelnen Diagrammsegmente geschrieben wird: Wert - Wert, Prozent - Prozentsätze, Beschriftung - Datennamen usw.

Wenn Sie möchten, können Sie dieser Diagrammkomponente eine weitere identische Reihe hinzufügen, indem Sie auf der Registerkarte „Reihen“ der Diagrammseite auf die Schaltfläche „Klonen“ klicken und dann für diese neue Reihe auf die Schaltfläche „Ändern“ klicken und einen anderen Diagrammtyp auswählen, z. B. „Balken“. .

Beenden Sie den Diagrammeditor, wählen Sie die untere Diagrammkomponente in Ihrer Anwendung aus und wiederholen Sie die Einstellung der Eigenschaften dafür mit dem Diagrammeditor. In diesem Fall müssen Sie zwei Reihen angeben, wenn Sie zwei Kurven im Diagramm anzeigen möchten, und den Diagrammtyp Linien auswählen. Da es sich um Diagramme handelt, können Sie die Registerkarten Achsen und Wände verwenden, um die Koordinateneigenschaften der Achsen und dreidimensionalen Flächen des Diagramms festzulegen.

Damit ist die Gestaltung des Erscheinungsbildes der Anwendung abgeschlossen. Es bleibt, den Code zu schreiben, der die Daten angibt, die Sie anzeigen möchten. Lassen Sie uns für die Testanwendung einfach einige konstante Daten im Tortendiagramm und einige Funktionen in den Diagrammen definieren.

Um die angezeigten Werte festzulegen, verwenden Sie die Reihenmethoden. Konzentrieren wir uns auf drei Hauptmethoden.

Methode Klar löscht die Serie von zuvor eingegebenen Daten.

Methode Hinzufügen:

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

können Sie dem Diagramm einen neuen Punkt hinzufügen. Parameter Ein Wert entspricht dem Mehrwert, Parameter Ein Etikett- eine Beschriftung, die auf dem Diagramm und in der Legende angezeigt wird, Eine Farbe- Farbe. Parameter Ein Etikett- optional, kann leer gesetzt werden: ‘ ’. Methode AddXY:

AddXY(Const AXValue, AYValue: Double; Const ALabel: String; AColor: TColor)

ermöglicht das Hinzufügen eines neuen Punktes zum Funktionsgraphen. Optionen AXWert und AYWert Argument und Funktion übereinstimmen. Optionen ALabel und AColor das gleiche wie in der Methode Hinzufügen.

Somit kann der Ablauf zum Laden von Daten in unserem Beispiel wie folgt aussehen:

constAl=155; A2=251; A3=203; A4=404; var i:wort; Start

Beginnen Sie mit Seriesl

Add(Al,"Shop l",clYellow);

Add(A2,"Design 2",clBlue);

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

Add(A4,"Design 4",clLila); Ende;

Series2.Clear; SerieS.Clear; für i:=0 bis 100 beginnen

Serie2.AddXY(0.02*Pi*i,sin(0.02*Pi*i)

SeriesS.AddXY(0.02*Pi*i,cos(0.02*Pi*i) end;

ClRot); ,clBlue);

Betreiber Klar werden benötigt, wenn Sie die Daten während des Betriebs der Anwendung aktualisieren.

Damit ist unsere Einführung in die Komponente abgeschlossen. Diagramm. Wir haben zwar nur einen kleinen Teil seiner Fähigkeiten berücksichtigt.

mob_info