Laboratorio di IUM
Lezione 2
Introduzione a Java2D
Di Blasi Gianpiero - D.M.I. - Università di Catania
Cosa impareremo oggi?
●
La classe Graphics ed il metodo
paintComponent()
●
Le coordinate del contesto grafico
●
Colori, testo e font
●
Il disegno di forme geometriche mediante linee
●
Il disegno di rettangoli ed ovali
●
Il riempimento delle forme
●
Le modalità di pittura
●
Il disegno di immagini
La classe Graphics ed il metodo
paintComponent (1)
●
Domande:
–
–
–
●
●
cosa è un oggetto di tipo Graphics?
cosa fa il metodo paintComponent(Graphics g)?
a cosa ci servono per fare grafica?
Capirlo ci aiuterà a ottenere frame più interessanti
Come al solito bisogno fare ricorso alla
documentazione
La classe Graphics ed il metodo
paintComponent (2)
●
●
Tutti gli oggetti che discendono da JComponent
hanno questo metodo per “disegnarsi”
Affinché per ogni componente faccia ciò che si
desidera il metodo va “sovrascritto” con una
nuova adeguata definizione
public void paintComponent(Graphics g)
{
//Per ereditare le operazioni standard
super.paintComponent(g);
//Seguono istruzioni specifiche di disegno per questa
//componente…
}
La classe Graphics ed il metodo
paintComponent (3)
●
Chi chiama paintComponent?
–
●
Per forzarne la chiamata usare il metodo:
–
●
viene chiamato automaticamente ogni qualvolta sia
necessario. Non deve essere chiamato manualmente
void repaint(): forza il ridisegno della finestra
Quali azioni attivano il paintComponent?
–
tutto ciò che provoca un ridisegno della finestra
(ridimensionamento della finestra, riduzione ad icona,
massimizzazione, sovrapposizione di finestre, ecc.)
La classe Graphics ed il metodo
paintComponent (4)
●
●
●
Per lavorare il paintComponent ha bisogno di un
oggetto Graphics
Esso è la sua “memoria” e il suo “libretto di
istruzioni” per eseguire i comandi di disegno che
chiederemo nel nostro codice
Un Graphics (contesto grafico) viene creato dal
JComponent appena deve essere disegnato la
prima volta
La classe Graphics ed il metodo
paintComponent (5)
●
Graphics mantiene le seguenti informazioni:
–
–
–
–
–
–
–
–
l'oggetto sul quale si disegna
il sistema di coordinate adottato per disegnare
il colore di foreground (colore con cui disegnare)
il font usato per le stringhe e le sue proprietà
il “clip” (ritaglio)
la modalità di disegno (Paint o XOR)
la modalità di trasparenza e di blending
tanto altro ancora...
La classe Graphics ed il metodo
paintComponent (6)
●
Graphics è una classe astratta
●
Essa viene specializzata da:
–
–
●
i vari SO in funzione delle loro caratteristiche di
disegno
le varie Component che hanno diritto ad un contesto
grafico a seconda delle necessità e dei limiti di
ciascuna componente
Si possono così programmare operazioni grafiche
su tutte le componenti senza dovere prestare
troppa attenzione a quale tipo di componente si
stia elaborando
Le coordinate del contesto grafico
●
●
●
La grafica al computer adotta un sistema di
riferimento “inusuale”
Per gli oggetti racchiusi in un rettangolo l'origine
è sempre il vertice in alto a sinistra del rettangolo
Le “misure” sono sempre in pixel
(0,0)
x
y
I colori (1)
●
●
●
Le informazioni sui colori in Java vengono
mantenute in oggetti della classe Color
I colori possono essere descritti tramite vari
“modelli”
In Java i colori sono definiti da 4 componenti:
–
–
–
trasparenza (alfa), Red/Green/Blue
tutti i valori sono compresi nel range [0, 255]
ogni colore del computer è “somma” dei tre contributi
dei colori base, più un'eventuale trasparenza
I colori (2)
●
Esempi di costruttori di Color:
–
Color(float R, float G, float B): R,G,B in [0, 1], alfa=1
–
Color(float R, float G, float B, float alfa): R,G,B, alfa in
[0, 1]
–
Color(int R, int G, int B): R,G,B in [0, 255], alfa=255
–
Color(int R, int G, int B, int alfa): R,G,B, alfa in [0, 255]
I colori (3)
●
Esempi:
–
–
–
●
Color bianco = new Color(255, 255, 255);
Color nero = new Color(0,0,0);
Color giallo = new Color(255,255,0);
Esistono anche delle costanti predefinite nella
classe Color:
–
black, white, red, green, blue, cyan, magenta, yellow,
pink, gray, ecc.
I colori (4)
●
Per impostare il colore della classe Graphics
bisogna usare il metodo:
–
●
●
●
void setColor(Color c): imposta il colore della classe
Graphics
Dopo questo comando tutto ciò che verrà
disegnato userà il colore specificato
Se si fosse settata anche la trasparenza il disegno
sarebbe stato semi-trasparente
Il colore di default è il nero
I colori (5)
●
Oltre a setColor(...), si può intervenire sul colore
da usare per i disegni ed il testo e sul colore da
usare per lo sfondo di una componente
direttamente con metodi della componente:
–
–
●
void setBackground(Color c): imposta il colore dello
sfondo
void setForeground(Color c): imposta il colore in
primo piano
Attenzione!!
–
Non usare nel paintComponent()
I colori (6)
Esempio
ColorHelloWorld2D
Testo e Font (1)
●
●
●
Le stringhe in Java vengono “disegnate”
mediante la classe Font contenente tutte le
caratteristiche tipografiche necessarie
Tale classe può richiamare tutti i font presenti nel
SO
Se si vuole però rendere le proprie applicazioni
“compatibili” con qualsiasi SO è meglio adottare
solo alcuni tipi di font “standard”
Testo e Font (2)
●
Font standard (predefiniti) di Java:
–
Serif (una sorta di Times New Roman)
Esempio: L'Italia è una repubblica democratica fondata
sul lavoro...
–
SansSerif (una sorta di Arial)
–
Esempio: L'Italia è una repubblica democratica
fondata sul lavoro...
–
Monospaced (una sorta di Courier
New)
–
Esempio: L'Italia è una repubblica
democratica fondata sul lavoro...
–
Testo e Font (3)
●
Esistono altri due font predefiniti:
–
–
●
●
●
Dialog
InputDialog
Questi due font sono simili rispettivamente a
SansSerif e Monospaced e sono poco utilizzati
Questa mappatura appena descritta vale sulle
principali piattaforme (Windows, Linux, Mac)
Non è detto che valga anche su altre piattaforme
Testo e Font (4)
●
●
I font possono avere anche uno stile
La classe Font di Java lo identifica con delle
costanti intere:
–
–
–
–
Font.PLAIN
Font.BOLD
Font.ITALIC
Font.BOLD+Font.ITALIC
Forza Azzurri!!!
Forza Azzurri!!!
Forza Azzurri!!!
Forza Azzurri!!!
Testo e Font (5)
●
È ovviamente possibile definire anche una
dimensione (espressa in punti):
–
8 punti:
10 punti:
12 punti: In Sicilia turismo è cultura
24 punti: In Sicilia turismo è cultura
–
32 punti: In Sicilia turismo è cultura
–
48 punti:
–
–
–
In Sicilia turismo è cultura
In Sicilia turismo è cultura
In Sicilia turismo è cultura
Testo e Font (6)
●
Per definire un Font si può utilizzare il
costruttore:
–
●
Font(String name, int style, int size): costruisce un font
di tipo name, con uno stile style ed una dimensione
size
Per impostare il Font del contesto grafico bisogna
invece usare il metodo:
–
void setFont(Font f): imposta il Font del contesto
grafico
Testo e Font (7)
●
Domanda&Risposta:
–
●
Java ha un oggetto apposito (FontMetric):
–
–
●
se uso diversi font come faccio a sapere le dimensioni
di una determinata stringa? Devo ottenere informazioni
sulla “metrica” del Font
FontMetric getFontMetric(): restituisce la metrica del
Font attualmente utilizzato dal contesto grafico
FontMetric getFontMetric(Font f): restituisce la
metrica del Font passato come parametro
Dettagli interessanti ma troppo “specifici”...
Testo e Font (8)
Esempi
ColoredFrame
ArlecchinoFrame_a1
ArlecchinoFrame_a2
Esercizi
●
Creare un frame il cui sfondo cambia colore man
mano che esso viene ridimensionato:
–
–
–
●
il colore ha componente rossa pari a 128 fissa
la componente verde è proporzionale alla larghezza
la componente blu è proporzionale all'altezza
Creare un frame con colore, dimensione del font,
famiglia del font, stile del font e messaggio
forniti mediante JOptionPane
Ancora sui font (1)
●
Per sapere quali font sono disponibili in un
particolare computer occorre chiamare il metodo:
–
●
String[] getAvailableFontFamilyNames(): restituisce i
font disponibili presenti sul computer
Tale metodo si trova nella classe
java.awt.GraphicsEnvironment
–
tale classe “descrive” l'ambiente grafico del sistema
–
GraphicsEnvironment getLocalGraphicsEnvironment():
restituisce l'ambiente grafico del sistema
Ancora sui font (2)
Esempi
AvailableFont_a1
AvailableFont_a2
Non solo lettere (1)
●
È possibile disegnare:
–
–
–
●
●
forme elementari (piene e vuote)
linee e spezzate (chiuse e aperte)
poligoni complessi
Si possono impostare stili, spessori e colori
Segue un elenco di metodi (la maggior parte di
loro si spiega da se!)
Non solo lettere (2)
●
Per disegnare un segmento:
–
●
void drawLine(int x1, int y1, int x2, int y2): disegna
una linea continua
Per disegnare un punto:
–
void drawLine(int x1, int y1, int x1, int y1): disegna un
punto
Non solo lettere (3)
Esempio
LinesFrame
Non solo lettere (4)
●
Per disegnare un poligono:
–
–
●
Per disegnare una spezzata:
–
●
void drawPolygon(Polygon p): disegna un poligono
void drawPolygon(int[] x, int[] y, int npoints): disegna
un poligono
void drawPolyline(int[] xCoord, int[] yCoord, int
npoints): disegna una spezzata
Per disegnare un arco:
–
void drawArc(int x, int y, int width, int height, int
startAngle, int arcAngle): disegna un arco
Non solo lettere (5)
Esempi
PolyFrame_a1
PolyFrame_a2
PolyFrame_a3
PolyFrame_a4
PolyFrame_a5
Non solo lettere (6)
Per disegnare rettangoli e ovali:
–
void drawRect(int x, int y, int width, int height):
disegna un rettangolo
void drawOval(int x, int y, int width, int height):
disegna un ovale
(x, y)
(x, y)
height
–
height
●
width
width
Non solo lettere (7)
Per disegnare rettangoli arrotondati:
void drawRoundRect(int x, int y, int width, int height,
int arcWidth, int arcHeight): disegna un rettangolo
arrotondato
(x, y)
arcWidth
arcHeight
–
height
●
width
Non solo lettere (8)
Esempio
RectEllipseFrame_a1
Considerazioni finali sulle primitive
di disegno (1)
●
Esistono una serie di metodi analoghi ai
precedenti per il riempimento di forme:
–
–
–
–
–
–
void fillPolygon(Polygon p)
void fillPolygon(int[] x, int[] y, int npoints)
void fillArc(int x, int y, int width, int height, int
startAngle, int arcAngle)
void fillRect(int x, int y, int width, int height)
void fillOval(int x, int y, int width, int height)
void fillRoundRect(int x, int y, int width, int height, int
arcWidth, int arcHeight)
Considerazioni finali sulle primitive
di disegno (2)
Esempi
PolyFrame_b1
RectEllipseFrame_b1
Esercizio
●
●
Disegnare una faccia
come in figura
Permettere all'utente
di scegliere il colore
di faccia, occhi,
naso, bocca e capelli
mediante
JOptionPane
La modalità di pittura (1)
●
●
●
Quando vengono disegnate forme sovrapposte,
l'ultima forma viene disegnata sopra tutto il resto
Oltre a questa modalità mediante “sovrascrittura”
è possibile dipingere con la modalità XOR
Per attivarla bisogna utilizzare il comando:
–
●
void setXORMode(Color xorColor): imposta la
modalità XOR
Per tornare alla modalità normale si usa il
comando:
–
void setPaintMode(): ritorna alla modalità normale
La modalità di pittura (2)
●
Modalità Paint:
–
●
sovrascrive la traccia del nuovo disegno nel colore
corrente senza tenere conto di cosa c'è già nei pixel su
cui si disegna
Modalità XOR:
–
per ottenere il colore con cui disegnare effettua uno
XOR logico tra il colore impostato, il colore presente
nei pixel ed un terzo colore impostato dall'esterno
La modalità di pittura (3)
Esempi
XORFrame_a1
XORFrame_a2
XORFrame_a3
XORFrame_a4
Immagini (1)
●
●
●
Java può caricare, mostrare, salvare ed elaborare
immagini in vari formati
Parecchia attenzione sarà dedicata nel corso di
I&M
In questa fase però vogliamo completare la
trattazione delle primitive grafiche 2d mostrando
come caricare e utilizzare le immagini in un
Frame
Immagini (2)
●
●
Per caricare un'immagine in Java si usano le
classi Toolkit ed Image
In particolare la classe Toolkit mette a
disposizione i metodi:
–
–
●
Image getImage(String filename): carica un'immagine
dal file specificato
Image getImage(URL url): carica un'immagine
dall'URL specificato
In realtà ciò non basta (e ci sono metodi più
facili), maggiori dettagli nel corso di I&M
Immagini (3)
●
Per disegnare un'immagine bisogna utilizzare un
apposito metodo di Graphics:
–
boolean drawImage(Image img, int x, int y,
ImageObserver observer): disegna un'immagine alle
coordinate (x, y) del contesto grafico
–
boolean drawImage(Image img, int x, int y, int width,
int height, ImageObserver observer): disegna
un'immagine alle coordinate (x, y) del contesto grafico
riscalata alle dimensioni (width, height)
Immagini (4)
Esempi
ImageFrame_a1
ImageFrame_a2