Componente per la visualizzazione di informazioni grafiche in Delphi. Presentazione sul tema "Visualizzazione di informazioni grafiche in Delphi". Elenco dei componenti per la visualizzazione delle informazioni grafiche

LAVORO DI LABORATORIO

SOGGETTO: « Grafica inseritaDelfi- costruzione del più semplice
forme geometriche"

Brevi informazioni dalla teoria

Delphi fornisce allo sviluppatore tre modi per visualizzare la grafica:

    tracciare mentre il programma è in esecuzione

    utilizzo di grafica pre-creata

    creazione di immagini utilizzando componenti grafici

Per la stampa sono state create classi speciali che forniscono strumenti e metodi per il disegno: gli strumenti sono descritti in tre classi: Tfont, Tpen, Tbrush; l'area di disegno e i metodi sono forniti dalla classe Tcanvas.

ClasseTfont- imposta le caratteristiche del carattere utilizzato per visualizzare il testo sulla tela. Le proprietà della classe sono descritte nella sezione "Proprietà di base disponibili per la maggior parte dei componenti".

Classetpen– imposta le caratteristiche della penna (matita) con cui si disegnano le linee.

Proprietà classe tpen:

colore:Tcolor - colore della linea (nero per impostazione predefinita)

Larghezza:intero – spessore della linea in pixel;

stile = (psSolid, psDash, psDot, psdashDot, psClear) - definisce lo stile della linea (solido, tratteggiato, punteggiato, trattino-punto, invisibile)

ClasseTbrush– imposta le caratteristiche del pennello utilizzato per dipingere sulle superfici dell'immagine.

Proprietà classe Tbrush:

colore:Tcolor - colore del pennello (il valore predefinito è bianco)

stile- ornamento del pennello, può assumere i seguenti valori:

BsSolid - colorazione solida

BsClear: nessun riempimento

BsVertical - linee verticali

BsBdiagonal - linee diagonali destre

BsDiagCross - cella obliqua

BsHorisontal - linee orizzontali

BsFdiagonal - linee diagonali a sinistra

BsCroce - cell

Classetessuti- definisce la superficie su cui viene posizionata l'immagine creata e gli strumenti con cui viene creata l'immagine: font, matita, pennello.

Per impostazione predefinita, l'intera area client del modulo viene utilizzata come area di lavoro (tela, "tela") (senza titolo, menu principale e linee di scorrimento del modulo), ma è possibile allocare aree di lavoro più piccole all'interno del modulo utilizzando componenti scatola di colori O Immagine. L'origine della tela è l'angolo superiore sinistro dell'area di lavoro, la larghezza dell'area di lavoro è determinata dalla proprietà Larghezza cliente, altezza - proprietà Altezza cliente.

Proprietà classe tessuti:

Tela:Tcanvas - definisce l'area di disegno

Spazzola:Tbrush - pennello per dipingere forme chiuse

Font:Tfont - carattere per la visualizzazione del testo sull'area di disegno

penna:Tpen - matita (penna) per disegnare

PenPos:Tpoint - la posizione corrente del cursore invisibile sull'area di disegno

Commento : Tipo Tpoint - definito come segue:

Digitare Tpunto = record

Pixel: Tcolor: imposta i colori dei pixel della tela, X, Y - coordinate dei pixel. La proprietà Pixel è utile per tracciare grafici utilizzando punti del colore selezionato.

Principali metodi della classe TCanvas

    procedura Sposta in(x,y:intero); - sposta la penna senza tracciare una linea verso un punto con coordinate (x, y).

    procedura LineaA(x,y:intero); - disegna una linea dal punto corrente al punto con coordinate (x, y).

Esempio : traccia una linea diagonale blu sulla forma dall'angolo in alto a sinistra all'angolo in basso a destra.

Colore penna:= clblu;

Sposta in(0,0); LineTo(Larghezza Cliente, Altezza Cliente);

    procedura Rettangolo(x1,y1,x2,y2:intero); - disegna un rettangolo: x1, y1 - coordinate dell'angolo in alto a sinistra; x2, y2 - coordinate dell'angolo in basso a destra.

Esempio : disegna un quadrato giallo di 60 px al centro della forma.

var Xc,Yc: intero; //

Xc:=ClientWidth div 2;

Xy:=AltezzaCliente div 2;

Canvas.Brush.color:=clgiallo;

Tela.rettangolo(xc-30,Yc-30,xc+30,Yc+30);

    procedura Ellisse(x1,y1,x2,y2:intero); - disegna un'ellisse inscritta in un rettangolo con le coordinate specificate.

Esempio : disegna un'ellisse inscritta nel componente PaintBox.

PaintBox1.Canvas.Pen.Width:=4; //larghezza della linea = 4 pixel

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

    procedura Poligono(); - disegna un poligono chiuso dato da un array di coordinate.

Esempio : disegna un rombo pieno che collega i punti medi dei lati della forma

Var Xc,Yc:intero; // formare le coordinate del centro area clienti

Xc:=ClientWidth div 2;

Xy:=AltezzaCliente div 2;

Colore.Pennello.Canvas:=Rgb(275,140,70); // arancia colore ombreggiatura

Canvas.Poligono();

FINE;

    procedura Arco(x1,y1,x2,y2,x3,y3,x4,y4:intero); - visualizza un arco di ellisse delimitato da un rettangolo (x1, y1, x2, y2). L'arco viene visualizzato da un punto con coordinate (x3,y3) a un punto con coordinate (x4,y4) contro lancetta delle ore.

Esempio : disegna un arco di ellisse che collega il centro del lato superiore del componente
PaintBox con il centro del lato destro.

Procedura Tform1.Button1Click(Sender:Tobject);

Var X3,y3,x4,y4: intero;

Con PaintBox1 fallo

Canvas.Pen.Color:= clWhite;

Larghezza.Penna.Tela:= 3;

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

X3:= ClientWidth div 2;

X4:=Larghezzacliente;

Y4:= Altezza cliente div 2;

Canvas.Pen.Color:= clMaroon;

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

FINE;

    procedura Accordo(x1,y1,x2,y2,x3,y3,x4,y4:intero); - disegna una corda - una linea retta che collega 2 punti dell'ellisse: un punto di coordinate (x3, y3) con un punto (x4, y4).

Esempio : sostituisci nell'esempio riportato al metodo ARC, il metodo Chord e ottieni questo risultato.

    procedura Torta(x1,y1,x2,y2,x3,y3,x4,y4:intero); - disegna un segmento di ellisse che collega il centro dell'ellisse con le coordinate (x3,y3) e (x4,y4).

Esempio : presente nell'esempio riportato per il metodo ARC, il metodo PIE e ottieni questo risultato.

    procedura textout(x,y:intero;Testo:stringa); - visualizza la stringa passata nel parametro Text in un rettangolo, di cui è specificato l'angolo superiore sinistro coordinate x,y. Le caratteristiche del carattere vengono impostate dallo strumento Carattere.

Esempio : scrivere in fondo al form il nome del grafico costruito.

Altezza.Carattere.Canvas:=20 ; // altezza carattere 20 pixel

Canvas.Font.Color:=clblue;

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

Componenti grafici

Delphi offre una serie di componenti pronti all'uso per migliorare interfaccia utente. Questi componenti vengono inseriti nella pagina Ulteriori E Sistema tavolozza dei componenti.

ComponenteImmagine(ClasseTempo) – progettato per visualizzare immagini grafiche archiviate in file esterni con estensioni:

    Ico(icona, pittogramma);

    bmp (bitmap, bitmap);

    Wmf, .emf (metafile);

    Jpg, .jpeg (immagine compressa JPEG).

Principale proprietà :

dimensione dell'auto:boolean - se vero, il componente adatta le sue dimensioni a quelle dell'immagine caricata; falso per impostazione predefinita.

Stirata:boolean - se vero, il valore caricato occupa l'intera area del componente; l'impostazione predefinita è falsa.

Tela:Tcanvas - Utilizzato per disegnare all'interno del componente in fase di esecuzione.

immagine:Tpicture - Specifica l'immagine inserita nel componente.

Principale metodi classe immagine:

procedura Carica da file(nome file:stringa); - carica un'immagine nel componente da un file denominato Filename.

procedura Salva su file(nome file:stringa); -salva l'immagine dal componente in un file denominato Nome file.

Componentescatola di colori - definisce un'area rettangolare da disegnare. La proprietà principale è Tela, sono disponibili tutti i metodi della classe Tcanvas, non ha proprietà indipendenti.

Esempio : disegna un'ellisse gialla inscritta nel componente PaintBox1.

Procedura Tform1Button1Click(mittente:Tobject);

Con PaintBox1.Canvas fai

Pennello.Colore:=clgiallo;

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

FINE;

ComponenteBitBtn pulsante bitmap

Il pulsante BitBtn, a differenza di quello standard, può contenere, oltre al nome (Caption), un'immagine specificata dalla proprietà Glifo. Esiste una serie di pulsanti BitBtn standard, con proprietà predefinite (con un'immagine, una didascalia e uno scopo specifici): il tipo di pulsante standard viene selezionato tramite la proprietà Tipo. Tipo=(bkPersonalizzato, bkInterrompi,bkAnnulla, bkChiudi...)

Compito numero 1

Crea un'applicazione che contenga due componenti Immagine e 4 pulsanti nel modulo principale ("Carica immagine", "Costruisci forma geometrica", "Cambia colore", "Esci") e ti consenta di:

a) caricare nel componente Immagine1 un'immagine grafica selezionata dall'utente in modo tale che l'immagine occupi tutta l'area del componente Immagine.

b) sotto il componente Immagine1, visualizzare la scritta “Questa è un'immagine da un file.

(per l'eventuale misurazione delle dimensioni e della posizione del componenteImmagine1 iscrizione deve
essere rigorosamente al di sotto del componente).

c) disegna una forma geometrica all'interno del componente Immagine2: un segmento pieno di un'ellisse che collega il centro del componente Immagine con i punti medi dei lati inferiore e destro del componente Immagine.

(con qualsiasi modifica delle dimensioni e della posizione del componenteImmagine2, la figura deve essere costruita correttamente, cioè in base all'assegnazione relativa al componenteImmagine2)

d) cambiare il colore della linea della figura disegnata in Immagine2 su richiesta dell'utente utilizzando il componente ColorDialog.

Compito numero 2

Crea un'applicazione che ti consenta di posizionare più etichette in modo casuale in un componente Immagine (ad esempio, la parola "Evviva!"). Per implementare, utilizzare il generatore di numeri casuali Randomize e la funzione Random.

Le dimensioni del componente Immagine, la parola visualizzata nell'Immagine e il numero di parole devono essere inserite dall'utente.

Compito numero 3

Crea un'applicazione che ti permetta di selezionare il nome di una forma geometrica dal ListBox e disegnare la forma selezionata nel componente Immagine. Il colore della forma viene selezionato dal componente RadioGroup.

Compito numero 4

Dividi il componente PaintBox1 in 4 parti uguali, dipingi ciascuna parte con un colore diverso, ad esempio: blu, giallo, verde, rosso.

Accanto a ciascun angolo di PaintBox1, scrivi le coordinate di quell'angolo (relative all'origine della forma su cui si trova il componente PaintBox1).

Compito numero 5

CON

seleziona il tipo di figura disegnata dal componente Radiogroup1, il colore di riempimento dal componente Radiogroup2 e disegna la figura selezionata nel componente Immagine.

Compito numero 6

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Dividi il componente PaintBox1 in 2 parti uguali, all'interno di ciascuna parte disegna un'ellisse riempita del colore selezionato dall'utente nel ColorDialog.

Compito numero 7

CON creare un'applicazione che ti permetta di:

seleziona il nome della figura geometrica dall'elenco ListBox e disegna la figura selezionata nel componente Immagine. La forma deve essere riempita con il colore selezionato dall'utente nel componente ColorDialog se Sì è selezionato nel componente RadioGroup.

Compito numero 8

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Dividi il componente PaintBox1 in 4 parti uguali, all'interno di ciascuna parte disegna una forma geometrica diversa (ellisse, rombo, triangolo e rettangolo). Il colore di ciascuna forma viene selezionato dall'utente nel ColorGrid.

Compito numero 9

selezionare il nome della geometria dal ListBox
forme (ellisse, rombo, rettangolo) e disegnare
la forma selezionata nel componente Immagine. Posizione
forme nel componente Immagine (I quarto, II quarto,

III o IV quarto) e viene selezionato il colore di riempimento della figura
dai componenti di RadioGroup.

Compito numero 10

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Fornire che la dimensione del lato non possa essere testo, non possa essere un numero negativo e non possa superare la dimensione più piccola del modulo.

Dividi il componente PaintBox1 in 4 parti uguali, all'interno di ciascuna parte disegna una forma geometrica selezionata dall'utente nel Combobox (ellisse, rombo, triangolo e rettangolo). Il colore della forma è selezionato dall'utente nel ColorBox.

Compito numero 11

Crea un'applicazione che ti permetta di:

selezionare la posizione del drawable dal componente Radiogroup

nel componente Immagine del triangolo rettangolo, imposta
il colore di riempimento della forma o il colore del contorno, a seconda
abilitando i pulsanti Casella di controllo. Selezione del colore tramite
Componente ColorGrid.

Compito numero 12

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Fornire che la dimensione del lato non possa essere testo, non possa essere un numero negativo e non possa superare la dimensione più piccola del modulo.

Dividere il componente PaintBox1 in 2 parti uguali, all'interno di una delle parti disegnare una figura geometrica selezionata dall'utente nel Combobox (ellisse, rombo, triangolo e rettangolo). Il colore della forma è selezionato dall'utente nel ColorBox.

Ad esempio, puoi cambiare il colore di un modulo come questo:

form1.Color:= ColorBox1.Colors;

Compito numero 13

Crea un'applicazione che ti permetta di:

a) disegnare un quadrato al centro della forma (la dimensione del lato del quadrato viene inserita dall'utente). Fornire che la dimensione del lato non possa essere testo, non possa essere un numero negativo e non possa superare la dimensione più piccola del modulo.

b) dividi il quadrato con una o due diagonali, a seconda dell'inclusione dei pulsanti Casella di controllo, e dipingi sopra ciascun triangolo risultante con un colore diverso. La scelta del colore è fatta dall'utente.

Compito numero 14

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Fornire che la dimensione del lato non possa essere testo, non possa essere un numero negativo e non possa superare la dimensione più piccola del modulo.

Dividi il componente PaintBox1 in 2 parti uguali, disegna un rombo all'interno di una parte e disegna un triangolo qualsiasi all'interno dell'altra parte. Il colore della forma è selezionato dall'utente nel ColorBox.

Ad esempio, puoi cambiare il colore di un modulo come questo:

form1.Color:= ColorBox1.Colors;

Compito numero 15

Crea un'applicazione che ti permetta di:

a) impostare le dimensioni del componente Immagine in senso orizzontale e verticale affinché siano uguali e uguali al numero inserito dall'utente da tastiera;

(a condizione che la dimensione del lato non possa essere testo, non possa essere un numero negativo e non possa superare la dimensione più piccola del modulo)

b) dividere la componente Immagine in 4 quadrati uguali con due linee blu;

c) all'interno di ciascun quadrato risultante, disegnare un cerchio inscritto in esso (il colore dei cerchi può essere selezionato dall'utente attraverso la finestra di dialogo di selezione del colore).

Compito numero 16

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Fornire che la dimensione del lato non possa essere testo, non possa essere un numero negativo e non possa superare la dimensione più piccola del modulo.

Dividi il componente PaintBox1 in 9 parti uguali e dipingi ciascun rettangolo della scacchiera risultante. Il colore di riempimento viene selezionato dall'utente nel ColorBox.

Ad esempio, puoi cambiare il colore di un modulo come questo:

form1.Color:= ColorBox1.Colors;

Compito numero 17

Posiziona due componenti Immagine e quattro pulsanti sul modulo: Colore linea, Colore riempimento, Ok ed Esci; e il componente Modifica.

Quando fai clic sul pulsante OK, Immagine1 disegna un quadrato con il lato X e Immagine2 disegna un triangolo rettangolo con cateti uguali, ciascuno dei quali ha lunghezza X.

Il vertice del triangolo coincide con l'origine di Immagine2. Uno dei vertici del quadrato coincide con l'origine di Immagine1.

Il pulsante OK diventa disponibile solo quando sono selezionati il ​​colore della linea e il colore di riempimento per disegnare la forma.

X: sceglie in modo casuale, utilizzando Funzioni casuali e il componente Modifica dovrebbe visualizzare il valore X.

Compito numero 18

Creare un'applicazione che consenta all'utente di impostare le dimensioni del componente PaintBox1 (in pixel).

Dividere il componente PaintBox1 in 4 parti uguali, all'interno della parte selezionata dall'utente, dovrebbe essere costruito un cerchio pieno, la cui dimensione è impostata dall'utente. L'utente seleziona il colore di riempimento nel ColorBox.

Ad esempio, puoi cambiare il colore di un modulo come questo:

form1.Color:= ColorBox1.Colors;

Per visualizzare le informazioni grafiche nella libreria Delphi, vengono forniti i componenti, il cui elenco è riportato nella tabella. 6.

Tabella 6

Componenti per la visualizzazione di informazioni grafiche

Componente Pagina Descrizione
Immagine (immagine) Ulteriori Utilizzato per visualizzare la grafica
PaintBox (finestra per disegnare) Sistema Utilizzato per creare un'area sul modulo in cui è possibile disegnare
DrawGrid (tavolo da disegno) Ulteriori Utilizzato per visualizzare dati non di testo in righe e colonne
Grafico (diagrammi e grafici) Ulteriori Il componente appartiene alla famiglia di componenti TeeChart utilizzata per creare diagrammi e grafici
Chartfx (grafici e grafici) ActiveX Editor di grafici e grafici
FIBook (pagine Excel) ActiveX Componente per l'immissione e l'elaborazione di informazioni numeriche
VtChart (grafici) ActiveX Finestra del diagramma

Inoltre, è possibile visualizzare e inserire informazioni grafiche sulla superficie di qualsiasi componente della finestra che abbia questa proprietà Tela- tela.

Tabelle immagine: componenti DrawGrid e StringGrid

Componente DrawGrid utilizzato per creare una tabella in un'applicazione che può contenere immagini grafiche. Questo componente è simile al componente Griglia di stringhe, poiché quest'ultimo deriva da drawgrid. Pertanto, dentro DrawGrid tutte le proprietà, metodi, eventi del componente sono presenti Griglia di stringhe, diversi da quelli legati al testo, cioè a parte le proprietà Celle, Colonne, righe, oggetti. Da questo punto di vista il componente StringGrid ha molto più potenziale di griglia, perché può memorizzare sia immagini che testi nelle celle. E se vuoi inserire del testo in alcune celle griglia, quindi dovrai utilizzare metodi per visualizzare il testo sull'area di disegno per questo, il che non è molto conveniente.

Componenti DrawGrid e StringGrid avere una tela Tela, dove è possibile posizionare le immagini.

C'è un metodo recto cellulare, che restituisce l'area della tela allocata per la cella specificata. Questo metodo è definito come

funzione CellRect(ACol, ARow: Longint): TRect;

Dove ACol e ARow- indici di colonna e di riga, a partire da 0, all'intersezione dei quali si trova la cella. L'area restituita da questa funzione è l'area della tela in cui è possibile disegnare l'immagine desiderata. Ad esempio, l'operatore

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

BitMap.Canvas,Rect(0,0,BitMap.Altezza,BitMap.Larghezza));

copie per metodo CopiaRect alla cella (1,1) della tabella DrawGridl immagine dal componente bitmap. Questa cella è la seconda da sinistra e la seconda dall'alto nella tabella poiché gli indici iniziano da 0. Tieni presente che se le dimensioni della cella sono inferiori alla dimensione dell'immagine copiata, verrà visualizzata solo la parte superiore sinistra dell'immagine. appaiono nella cella.

Immagine della tela del componente DrawGrid e StringGrid come nel canvas di qualsiasi componente, è soggetto a cancellazione quando la finestra dell'applicazione viene sovrapposta ad altre finestre o, ad esempio, quando l'applicazione viene ridotta a icona.

Un modo conveniente per inserire immagini nelle celle DrawGrid consiste nell'utilizzare un gestore di eventi Su DrawCell. Questi eventi si verificano per ciascuna cella della tabella al momento del suo ridisegno. L'intestazione del gestore è simile alla seguente:

procedura TForml.DrawGridlDrawCell(Mittente: TObject;

ACol, ARow: intero; Retto: TRetto; Stato: TGridDrawState)

Parametro Stato indica lo stato della cella. È un insieme che può contenere i seguenti elementi: gdselezionato- cella evidenziata gdFocused- la cella messa a fuoco, gdFixed- una cella in un'area fissa della tabella. Parametro Stato può essere utilizzato per visualizzare le celle in modo diverso in stati diversi.

Componente di forma

Componente di forma può essere attribuito solo condizionatamente al mezzo di visualizzazione di informazioni grafiche, in quanto si limita a rappresentare varie forme geometriche, opportunamente ombreggiate. La proprietà principale di questo componente è forma(form), che può assumere i seguenti valori:

StRectangle: un rettangolo;

StSquare - quadrato;

StRoundRect: un rettangolo con angoli arrotondati;

StRouhdSquare - quadrato con angoli arrotondati;

StEllipse - ellisse;

StCircle: un cerchio.

Un'altra proprietà essenziale del componente è Spazzola(spazzola). Questa proprietà è un oggetto di tipo pennello, avere una serie di sottoproprietà, in particolare il colore (Pennello.Colore) e stile (Stile pennello) riempimento della forma. Puoi vedere il riempimento in corrispondenza di alcuni valori di Stile in Fig. 3.2. La terza delle proprietà specifiche del componente forma- penna(penna) che definisce lo stile della linea.

Componente grafico

Consideriamo ora il componente Grafico. Questo componente ti consente di creare vari diagrammi e grafici dall'aspetto davvero impressionante. Componente grafico ha molte proprietà, metodi, eventi, quindi se li consideri tutti, dovresti dedicare un intero capitolo a questo. Pertanto, ci limitiamo a considerare solo le caratteristiche principali Grafico. E il resto puoi trovarlo nell'aiuto integrato di Delphi o semplicemente provarlo sperimentando con i diagrammi.

Componente graficoè un contenitore di oggetti Serie- discendenti di classe TchartSeries. Ciascuno di questi oggetti rappresenta una serie di dati caratterizzati da un determinato stile di visualizzazione: l'uno o l'altro grafico o diagramma. Ogni componente grafico può includere diverse serie. Se si desidera visualizzare un grafico, ciascuna serie corrisponderà a una curva sul grafico. Se vuoi visualizzare i grafici, per alcuni tipi di grafici puoi sovrapporre diverse serie diverse una sopra l'altra, per altri (ad esempio, per i grafici a torta) probabilmente sembrerà brutto. Tuttavia, in questo caso, è possibile impostare un componente grafico diverse serie degli stessi dati con tipo diverso diagrammi. Quindi, rendendone attivo uno in ogni momento, puoi dare all'utente la possibilità di scegliere il tipo di grafico che visualizza i dati di suo interesse.

Posizionare uno o due componenti grafico sul modulo e osserva le proprietà che si aprono nell'Ispettore oggetto. Spieghiamone alcuni.

PermettiPanning: determina la capacità dell'utente di scorrere la parte osservata del grafico durante l'esecuzione premendo il tasto destro del mouse. Valori possibili: pmNone - lo scorrimento è disabilitato, pmHori/ontal, pm Vertical o pmEntrambi - rispettivamente, lo scorrimento è consentito solo in direzione orizzontale, solo in direzione verticale o in entrambe le direzioni.

AhowZoom: consente all'utente di modificare lo zoom dell'immagine in fase di esecuzione ritagliando frammenti di un diagramma o di un grafico con il cursore del mouse. Se la cornice del frammento viene disegnata a destra e in basso, questo frammento viene allungato sull'intero campo cartografico. E se la cornice viene disegnata verso sinistra, viene ripristinata la scala originale.

Titolo: definisce il titolo del grafico.

Piede: definisce la didascalia sotto il grafico. Nessuno per impostazione predefinita. Il testo dell'etichetta è definito dalla sottoproprietà Text.

Cornice: definisce la cornice attorno al grafico.

Accanto a molte delle proprietà elencate nell'Ispettore oggetto, sono presenti pulsanti con puntini di sospensione che consentono di richiamare l'una o l'altra pagina dell'editor dei grafici, una finestra a più pagine che consente di impostare tutte le proprietà dei grafici. È possibile richiamare l'editor di diagrammi anche facendo doppio clic sul componente grafico oppure facendo clic con il tasto destro su di esso e selezionando il comando Modifica grafico dal menu a comparsa.

Fare doppio clic sul componente superiore Grafico. Verrai indirizzato alla finestra dell'editor dei grafici nella pagina dei grafici, che ha diverse schede. Prima di tutto, ti interesserà la scheda Serie su di esso. Fare clic sul pulsante Aggiungi: aggiungi una serie. Verrai indirizzato a una finestra in cui potrai selezionare il tipo di grafico o grafico. In questo caso, scegli Pie: un grafico a torta. Utilizzando la scheda Titoli è possibile impostare il titolo del diagramma, la scheda Legenda consente di impostare le opzioni di visualizzazione della legenda del diagramma (elenco di simboli) o di rimuoverla del tutto dallo schermo, la scheda Pannello determina l'aspetto del pannello su cui è visualizzato il diagramma, la scheda 3D consente di modificare l'aspetto del diagramma: inclinazione, taglio, spessore, ecc.

Quando lavori con l'editor dei grafici e hai selezionato un tipo di grafico, i componenti grafico il tuo modulo mostra il suo aspetto con i dati condizionali inseriti al suo interno. Pertanto, puoi immediatamente osservare il risultato dell'applicazione di varie opzioni alla tua applicazione, il che è molto conveniente.

La pagina Serie, anch'essa dotata di una serie di schede, consente di selezionare caratteristiche di visualizzazione aggiuntive per la serie. In particolare, per un grafico a torta, nella scheda Formato, è utile abilitare l'opzione Torta cerchiata, che garantirà che il grafico venga visualizzato come un cerchio a qualsiasi dimensione del componente Grafico. Nella scheda Segni, i pulsanti del gruppo Stile determinano cosa verrà scritto sulle etichette relative ai singoli segmenti del grafico: Valore - valore, Percentuale - percentuali, Etichetta - nomi dei dati, ecc.

Puoi, se lo desideri, aggiungere un'altra serie identica a questo componente Grafico facendo clic sul pulsante Clona nella scheda Serie della pagina Grafico, quindi per questo nuova serie fare clic sul pulsante Cambia e selezionare un tipo di grafico diverso, ad esempio A barre.

Uscire dall'editor dei grafici, selezionare il componente grafico inferiore nell'applicazione e ripetere l'impostazione delle proprietà utilizzando l'editor dei grafici. In questo caso, dovrai specificare due serie se desideri visualizzare due curve sul grafico e selezionare il tipo di grafico a linee. Perché il noi stiamo parlando per quanto riguarda i grafici, è possibile utilizzare le schede Asse e Muri per impostare le caratteristiche delle coordinate degli assi e delle facce tridimensionali del grafico.

Su questo disegno aspetto l'applicazione termina. Resta da scrivere il codice che specifica i dati che si desidera visualizzare. Per l'applicazione di test, definiamo semplicemente alcuni dati costanti nel grafico a torta e alcune funzioni nei grafici.

Per impostare i valori visualizzati, utilizzare i metodi Serie. Concentriamoci su tre metodi principali.

Metodo Chiaro cancella la serie dai dati precedentemente inseriti.

Metodo Aggiungere:

Aggiungi(Cost AValore:Doppio; Cost ALabel:Stringa; AColor:TColor) ,

consente di aggiungere un nuovo punto al grafico. Parametro Un valore corrisponde al valore aggiunto, parametro Un'etichetta- un'etichetta che verrà visualizzata sulla carta e nella legenda, Un colore- colore. Parametro Un'etichetta- facoltativo, può essere lasciato vuoto: ‘ ’. Metodo AggiungiXY:

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

consente di aggiungere un nuovo punto al grafico della funzione. Opzioni ValoreAX E AYValore abbinare l'argomento e la funzione. Opzioni ALabel e AColor lo stesso del metodo Aggiungere.

Pertanto, la procedura per caricare i dati nel nostro esempio potrebbe essere simile a:

costAl=155; A2=251; A3=203; A4=404; var i:parola; inizio

Con Seriesl cominciamo

Aggiungi(Al,"Negozio l",clGiallo);

Aggiungi(A2,"Disegni 2",clBlu);

Aggiungi(A3,"Piano 3",clRosso);

Aggiungi(A4,"Motivo 4",clViola); FINE;

Serie2.Cancella; SerieS.Clear; per i:=da 0 a 100 iniziano

Serie2.AddXY(0,02*Pi*i,sen(0,02*Pi*i)

SerieS.AddXY(0,02*Pi*i,cos(0,02*Pi*i) end;

ClRosso); ,clBlu);

Operatori Chiaro sono necessari se si intendono aggiornare i dati durante il funzionamento dell'applicazione.

Questo conclude la nostra introduzione al componente. Grafico.È vero, abbiamo considerato solo una piccola parte delle sue capacità.


“Visualizzazione delle informazioni grafiche in Delphi” Piano tematico: 1.С С pppp oooo ssss oooo bbbb yyyy v v vyyyy vvv oooo dddd aaaa yy grrrr aaaa ffff iii hhhh eeee ssss kkkk oooo yyyy nnnn ffff oooo rrrr mmmm ahhh dddd eeee llll pppp hhhh iiii O O tttt oooo bbbb rrrr aaaa zhzhzhzh eeee nnnn iii eeee k k k kaaaa rrrr tttt nnnn oooh kkkk O O tttt oooo bbbb rrrr ahhh zhzh eeeeeeeeeeeeeeeeeeeeeeeeeee y yeeeee oooo mmmm eeee tttt rrrr yiii hhhh eeee sssssssssssssssssi i d daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaammmmmmmm....


1. Metodi per visualizzare le informazioni grafiche. Esistono diversi modi per visualizzare le informazioni grafiche in Delphi: Output di immagini pre-preparate (componenti Immagine, Forma); P Costruzione di grafici e diagrammi (componente Chart, ecc.); F Formazione di immagini a livello di codice (oggetto Canvas).


2.Visualizza 2.Visualizza immagini. La visualizzazione di immagini utilizzando il componente Immagine che abbiamo esaminato in LLC DDDDD DDDD LLC Yiyy e e e ZZZZ P P P P PRRRDDDDDDDDDDDDDD IIII XXXX T T T T T T T T T T TOTEMMM .... Qui considereremo un esempio di implementazione l'animazione più semplice modificando periodicamente l'immagine visualizzata nei componenti Immagine. PPPP EDURRRREEEE YYYE TTTT IIII n N N n AAAAAA PP PRRR IIII MMMMEEEE RRRRR ...






3. Visualizzazione 3. Visualizzazione di forme geometriche. E puoi creare semplici disegni da diversi componenti Shape. P Modificando a livello di codice la posizione (.Left,.Top), la dimensione (.Width,.Height) e il colore (Brush.Color) dei componenti Shape nella figura, è possibile implementare elementi dell'animazione più semplice. R R R R aaaa sssssssssss mmmm oooo tttt rrrr eeee tttt b pp pp p rrrr iiiiii mmmm eeee rrrr....


4. Costruzione 4. Costruzione di grafici e diagrammi. I diagrammi sono destinati a una rappresentazione più visiva di matrici di dati numerici, alla loro visualizzazione e analisi. RRRR iiiiii mmmm eeee rrrr.... Ci sono diversi componenti per tracciare grafici in Delphi, uno di questi è il componente Grafico (sezione TeeChart Std).










Grafici e diagrammi. I dati da visualizzare vengono solitamente passati al Grafico a livello di codice, ad esempio: Series1.Clear; (serie cancellata) per i:=1 a N do Series1.addxy(i, A[i], clGreen); Valore dell'asse X Valore dell'asse Y Etichetta dell'asse X Colore dei dati sul grafico rrrraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa quello cioè quello è rrrrrrrrrrrr y y y y y y y y y y y y = = = = S S S S iiii nnnn ((((xxxx))))


Successivo: Lavoro di laboratorio """" OOOO tttt oooo bbbb rrrraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa !;aaaaaaaaaaaaaaaaaaaaaaaa sono stati XXXX FFFF IIII GGGG UUUU Rrrr, e e XXXXX A A A A ANNNNNNNNNNE MMMM AAAAA AAAAA IIIIIAIA ”” ”” ”” .... Compito: 1) sviluppare l'applicazione per l'esecuzione dell'animazione più semplice modificando periodicamente l'immagine visualizzata in Componenti immagine. (Il numero di immagini è almeno tre, scegli tu stesso le immagini).




Successivo: Lavoro di laboratorio """" PPPP oooo ssss tttt rrrr oooo eeee nnnn iiiiii eeee yy y gr rrrr aaaa ffff iii kkkk oooo vvvv i i dd dd iii AAAA yyyy rrrr aaaa mmmm mmmm """".. ..Compito: 1) Modifica l'applicazione da lavoro di laboratorio 9 (Visualizzare i dati in una tabella). Aggiungi la possibilità di visualizzare alcuni dati dalla tabella su un grafico a barre o a torta. 2) Costruire il grafico di una determinata funzione.

La Visual Component Library (VCL) Delphi ci fornisce i seguenti componenti visivi per la visualizzazione di informazioni grafiche: Image (immagine), PaintBox (finestra di disegno), DrawGrid (tabella di immagini), Chart (diagrammi e grafici), Animate (output di clip video ), nonché il modulo. Questi componenti hanno una proprietà Canvas (descritta sopra) che dà accesso a ciascun pixel. Naturalmente, non è necessario disegnare pixel per pixel per lavorare con la grafica in Delphi, il sistema Delphi fornisce potenti strumenti per lavorare con la grafica.

Diamo uno sguardo più da vicino ai componenti di cui sopra:

Componente immagine (immagine)

È un oggetto della classe TImage. Utilizzato per visualizzare le immagini lette da file grafici. Per impostazione predefinita, vengono visualizzate sulla superficie del modulo le immagini presentate in formato *.bmp. Per visualizzare le immagini in formato jpg, è necessario includere il modulo JPEG nella direttiva uses. Si trova nella scheda Avanzate della Component Palette.

Dopo aver posizionato il componente Immagine sul modulo, assume la forma di un'area rettangolare selezionata.

Figura 9 - Componente immagine sul modulo

Per aprire una finestra di dialogo per selezionare l'immagine desiderata, procedere come segue utilizzando l'Ispettore oggetto. Per fare ciò, trova la proprietà Immagine e fai clic sui tre punti a sinistra di essa. Si apre la finestra Editor di immagini e seleziona Carica al suo interno, nella finestra che si apre, seleziona il file immagine.

Questa operazione può essere eseguita anche a livello di codice chiamando il metodo LoadFromFile della proprietà Picture:

Image1.Picture.LoadFromFile("nome_pic.jpeg") ;

dove name_pic.jpeg è il nome del file.

Tabella 8 - Principali proprietà del componente Immagine

Proprietà

Descrizione

Immagine visualizzata nel campo del componente

Dimensioni dei componenti. Se queste dimensioni sono inferiori a quelle dell'illustrazione e le proprietà Strech, AutoSize e Proportional sono impostate su False, viene visualizzata parte dell'immagine

Consente di ridimensionare automaticamente le immagini senza distorsioni. Per eseguire il ridimensionamento, il valore della proprietà AutoSize deve essere False

Consente di ridimensionare (comprimere o allungare) automaticamente l'immagine in base alle dimensioni del componente Immagine. Se la dimensione del componente non è proporzionale alla dimensione dell'immagine, l'immagine risulterà distorta.

Consente di ridimensionare automaticamente un componente per adattarlo alle dimensioni dell'immagine

Consente di determinare orizzontalmente la posizione dell'immagine nel campo del componente Immagine, se la larghezza dell'immagine è inferiore alla larghezza del componente.

Superficie per la visualizzazione della grafica

Specifica il colore di sfondo trasparente di un'immagine

Esempio 1: scrivere un visualizzatore di immagini utilizzando il componente Immagine. Il programma deve avere le seguenti caratteristiche:

  • visualizzare le immagini in una cartella;
  • Visualizza l'immagine a grandezza naturale o nel formato più adatto alla dimensione della finestra;
  • · gestire file di immagini, nonché stampare, salvare, eliminare e modificare immagini;
  • se necessario, aprire l'immagine nel programma di editing;

Figura 10 - La finestra del programma prima del suo avvio

Creazione del progetto:

  • 1. Creare una cartella per i file del programma e avviare l'ambiente di sviluppo integrato Delphi.
  • 2. Aggiungi componenti al modulo:

Per prima cosa posizioneremo sul modulo il componente Immagine, il componente principale con cui dovremo lavorare. Oltre a ciò, abbiamo bisogno dei seguenti componenti:

  • · ScrollBox È necessario quando in modalità a grandezza naturale l'immagine va oltre l'immagine. Assegniamo il valore alClient alla sua proprietà Aling in modo che le sue dimensioni cambino proporzionalmente alla dimensione della finestra. E su di esso posizioniamo il componente Immagine;
  • · Aggiungeremo anche i componenti di dialogo SavePictureDialog e OpenPictureDialog per il salvataggio e l'apertura delle immagini. Il primo ci serve per copiare l'immagine nella directory selezionata, il secondo per richiamare la finestra di dialogo aperta file grafico. Si trovano nella pagina Dialoghi della Component Palette. Da questa pagina abbiamo bisogno anche del componente PrintDialog, che ci serve per richiamare la finestra di dialogo di selezione della stampante per la stampa.
  • Aggiungiamo MainMenu per aggiungere il menu principale al programma e XPManifest per un design più colorato
  • · Abbiamo anche bisogno di un posto dove memorizzare i nomi delle immagini presenti nella directory di lavoro. Per questi scopi è comodo il componente ListBox, che può essere nascosto durante l'elaborazione dell'evento Create del form Form1.
  • · Per posizionare i pulsanti di navigazione e lavorare comodamente con essi, aggiungiamo il pannello Velo, sul quale posizioneremo questi pulsanti (Immagine precedente, Immagine successiva, Dimensioni reali, Adatta alle dimensioni, Elimina, Copia in, Stampa, Modifica). SpeedButton è selezionato come componente per loro.
  • · Aggiungere un timer da catturare premendo i tasti "Sinistra" (immagine precedente), "Destra" (immagine successiva) e il tasto "Canc" (cancella immagine).
  • · E un altro componente: ProgressBar, che mostra il processo di caricamento di file *.Jpg di grandi dimensioni.
  • 3. Scrivere il codice per gestire l'evento clic sul pulsante (Immagine precedente, Immagine successiva, Dimensioni reali, Adatta alle dimensioni, Elimina, Copia in, Stampa, Modifica). Scrivi il codice per gestire l'evento di clic sulle voci del menu principale (Esci, Apri, Chiudi, Crea).
  • 4. Definire le impostazioni iniziali per la creazione del modulo. Fare doppio clic su spazio libero form e scrivere il codice della procedura procedure TForm1.FormCreate(Sender:TObject), vedere il codice del modulo nell'Appendice 1.
  • 5. Scrivere le procedure nel seguente formato:

procedura TrovaFileInCartella(percorso, ext: stringa);

Questa procedura esegue la scansione del percorso della cartella per i file con la maschera ext.

Un elenco completo dei codici del modulo di programma si trova nell'Appendice 1 (Lista programmi 3).

  • 1. Elencare le funzionalità del componente Immagine.
  • 2. Quale oggetto di classe è il componente Immagine?
  • 3. 3. Quale tipo di file supporta il componente Immagine per impostazione predefinita?
  • 4. 4. Elencare le proprietà principali del componente Immagine.
  • 5. 5. Quale proprietà memorizza l'immagine del componente Immagine?

Descrizione della presentazione sulle singole diapositive:

1 diapositiva

Descrizione della diapositiva:

2 diapositive

Descrizione della diapositiva:

mezzo visivo Programmazione Delphi, come Windows, supporta GUI utente (GDI - Interfaccia grafica Delphi). Esistono due modi per visualizzare le informazioni grafiche in Delphi: output di immagini pre-preparate; attingendo dal programma.

3 diapositive

Descrizione della diapositiva:

Il primo metodo si basa sull'utilizzo dei componenti Immagine e Forma. Puoi utilizzare un'immagine già pronta (pittogramma) o crearla tu stesso utilizzando l'editor di immagini. Il secondo modo è generare immagini a livello di codice utilizzando l'oggetto Canvas.

4 diapositive

Descrizione della diapositiva:

Delphi ha a sua disposizione oggetto speciale, a cui viene assegnato lo stile di una proprietà Canvas. È disponibile solo mentre l'applicazione è in esecuzione, quindi può essere controllata solo dall'interno del programma tramite scrittura codice desiderato nel linguaggio Object Pascal. Se un oggetto ha una proprietà Canvas, puoi disegnare sulla sua superficie. I candidati più adatti per questo ruolo sono il modulo stesso e il componente speciale PaintBox.

5 diapositive

Descrizione della diapositiva:

Proprietà oggetto tela: Penna (Piuma) - proprietà per disegnare linee e bordi di forme geometriche. La penna segue i comandi del cursore grafico e, a sua volta, ha le proprie proprietà nidificate: Colore - definisce il colore della linea (nera per impostazione predefinita); Modalità: stile di disegno (ha molti valori che non sono indicati qui); Style – stile della linea, che può assumere i seguenti valori: psSolid – solido (di default); psDosh: linea tratteggiata; psDot: linea tratteggiata; psDoshDot - trattino punteggiato (e altre proprietà); Widh - spessore della linea (predefinito 1 pixel);

6 diapositive

Descrizione della diapositiva:

Pennello (Pennello) - una proprietà per riempire forme che hanno le seguenti proprietà nidificate: Colore - colore del pennello (predefinito - bianco); Style - ornamento del pennello, che può assumere i seguenti valori: bsClear - colorazione solida; bsHorizontal - linee orizzontali; bsVertical - linee verticali; bsFDiagonal - linee diagonali a sinistra; bsBDiagonale: linee diagonali destre; bsCroce - cella; bsDiagCross - cella obliqua;

7 diapositive

Descrizione della diapositiva:

Carattere (Font) - una proprietà per la visualizzazione del testo, che ha le seguenti proprietà nidificate: Colore - il colore dei caratteri; Altezza: altezza del carattere in pixel; Nome: nome del carattere; Dimensione: dimensione del carattere; Stile - stile del carattere, che può assumere i seguenti valori: fsBold - grassetto; fsItalic - corsivo fsUnderline - sottolineato fsStrikeOut - barrato;

8 diapositive

Descrizione della diapositiva:

PenPos (Posizione penna) - una proprietà per memorizzare la posizione corrente del disegno (definisce la posizione della penna nell'area di disegno in questo momento tempo); Pixel è una proprietà dell'array per scrivere e leggere le coordinate dei singoli punti dell'area di disegno ("tela").

9 diapositive

Descrizione della diapositiva:

Metodi dell'oggetto Canvas MoveTo(x,y: integer) – sposta la penna dalla posizione corrente al punto con le coordinate x, y specificate senza tracciare una linea; LineTo(х.у: intero) - sposta la penna dalla posizione corrente al punto con le coordinate x, y specificate, disegnando una linea; Arco(x1, y1, x2, y2, x3, y3, x4, y4: intero) - disegna un arco di un'ellisse inscritto in un rettangolo con coordinate (x1, y1) e (x2, y2). L'arco è determinato dai raggi dell'ellisse passanti per i punti (x3, y3) e (x4, y4);

10 diapositive

Descrizione della diapositiva:

Accordo(x1, y1, x2, y2, x3, y3, x4, y4: intero) – disegna una corda di ellisse come descritto per il metodo Arco; Ellisse(x1, y1, x2, y2: intero) - disegna un'ellisse inscritta in un rettangolo con l'angolo superiore sinistro nel punto (x1, y1) e l'angolo inferiore destro nel punto (x2, y2); FillRect (Rect (x1, y1, x2, y2: intero)) - riempie il rettangolo con il colore specificato nel pennello corrente (Brush). Utilizza la funzione Rect, che rappresenta un rettangolo alle coordinate specificate;

11 diapositive

Descrizione della diapositiva:

FloodFill(x,y: integer; Color: TColor; FillStyle: TFillStyle) - riempimento con il colore corrente specificato nella proprietà Brush: with FillStyle=fsBorder - un'area chiusa dal punto con coordinate x, y al bordo definito da Colore colore; con FillStyle=fsSurface – quell'area della superficie che ha il colore Color; Pie(x1, y1, x2, y2, x3, y3, x4, y4: intero) - disegna un settore di un'ellisse inscritto in un rettangolo con coordinate (x1, y1) e (x2, y2). Il settore è definito da due raggi di ellisse passanti per i punti (x3, y3) e (x4, y4);

12 diapositive

Descrizione della diapositiva:

Polilinea (Punti: array di TPoint) – disegna una polilinea collegando in sequenza i punti dell'array Points; Poligono (Punti: array di TPoint) - disegna poligoni collegando in sequenza i punti dell'array Points. Si differenzia dal metodo Polilinea in quanto collega automaticamente la fine della polilinea al suo inizio; Rettangolo (x1, y1, x2, y2: intero) - disegna un rettangolo con l'angolo superiore sinistro nel punto (x1, y1) e l'angolo inferiore destro nel punto (x2, y2);

13 diapositive

Descrizione della diapositiva:

Retresh – il metodo viene chiamato quando è necessario ridisegnare l'immagine; RoundRect (x1, y1, x2, y2, x3, y3: intero) - Disegna un rettangolo con angoli arrotondati. Gli angoli sono disegnati come quarti di un'ellisse con larghezza x3 e altezza y3; TextOut (x, y:intero, Text:String) - restituisce il testo specificato nel parametro Text. Il testo si inserisce in un rettangolo il cui angolo superiore sinistro ha le coordinate x, y.




Superiore