Elementi di programmazione grafica. Introduzione alle applicazione grafiche contesto grafici forme...
-
Upload
alessandra-pisani -
Category
Documents
-
view
217 -
download
2
Transcript of Elementi di programmazione grafica. Introduzione alle applicazione grafiche contesto grafici forme...
Elementi diprogrammazione grafica
• Introduzione alle applicazione grafiche contesto grafici forme geometriche elementari colori “input dialogs” per ottenere input dall’utente
• Frames e applets
Frames• La classe JFrame
• import javax.swing.*;
JFrame frame = new JFrame();frame.setSize(300, 400);frame.setTitle(“An Empty Frame");frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setVisible(true);
Frames
File EmptyFrameViewer.java01: import javax.swing.*;02: 03: class EmptyFrameViewer04: {05: public static void main(String[] args)06: {07: JFrame frame = new JFrame();08: 09: final int FRAME_WIDTH = 300;10: final int FRAME_HEIGHT = 400;11: 12: frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);13: frame.setTitle(“Un frame vuoto");14: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);15: 16: frame.setVisible(true);17: }18: }
Domande
1. Come dobbiamo modificare EmptyFrameViewer per ottenere un frame quadrato con titolo "Hello, World!"?
2. Come scriviamo un programma che lancia due frames?
Risposte
1. Modifca EmptyFrameViewer come segue:
2. Costruisci due oggetti JFrame definendone la dimensione e poi invoca setVisible(true) su ciascuno
frame.setSize(300, 300);frame.setTitle("Hello, World!");
Disegno di forme geometriche• JComponent
La classe che definisce contenitori generici, al cui interno includiamo forme geometriche
• Possiamo definire nuovi JComponent
class ShapeComponent extends JComponent{ . . .}
Disegno di forme geometriche• paintComponent
metodo che produce il disegno invocato (automaticamente) tutte le volte che
il componente per il quale è definito viene ridisegnato
Disegno di forme geometriche• paintComponent(Graphics g)
g contesto grafico Graphics classe che permette di manipolare
lo stato del contesto grafico
class ShapeComponent extends JComponent{ public void paintComponent(Graphics g) { // Converti in Graphics2D Graphics2D g2 = (Graphics2D) g; . . . }}
Disegno di forme geometriche
• Graphics2D estende Graphics con metodi per il rendering in due dimensioni
• Ad esempio:
• package java.awt
// g2: Graphics
Rectangle rect = new Rectangle(5, 10, 20, 30);g2.draw(rect);
File ShapeComponent.java
01: import java.awt.Graphics;02: import java.awt.Graphics2D;03: import java.awt.Rectangle;04: import javax.swing.JPanel;05: import javax.swing.JComponent;06: 07: /**08: Un Component che disegna due rettangoli.09: */10: class ShapeComponent extends JComponent11: { 12: public void paintComponent(Graphics g)13: { 14: // Ottieni un graphics2D15: Graphics2D g2 = (Graphics2D) g;16:
Continua…
File ShapeComponent.java
17: // Costruisci un rettangolo e disegna18: Rectangle r = new Rectangle(5, 10, 20, 30);19: g2.draw(r);20: 21: // Trasla il rettangolo (15 a dx, 25 in basso) 22: r.translate(15, 25);23: 24: // Disegna il rettangolo traslato25: g2.draw(r);26: }27: }
Applicazioni
• ShapeViewer classe che lancia una finestra all’interno della
quale vengono raffigurate Ie componenti L’applicazione è costruita interamente
all’interno del metodo main della classe Disegna due rettangoli
Continua…
Applicazione ShapeViewer
Il metodo main
1. Costruisci il frame
2. Costruisci un oggetto della classe component
3. Aggiunti il component al frame
La chiamata è leggermente più complicata per versioni di Java precedenti alla 5:
4. Rendi visibile il frame
ShapeComponent component = new ShapeComponent();
frame.add(component);
frame.getContentPane().add(component);
File ShapeViewer.java
01: import javax.swing.JFrame;02: 03: class ShapeViewer04: {05: public static void main(String[] args)06: {07: JFrame frame = new JFrame();08: 09: final int FRAME_WIDTH = 300;10: final int FRAME_HEIGHT = 400;11: 12: frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);13: frame.setTitle(“Two Rectangles");14: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);15:
Continua…
File ShapeViewer.java
16: ShapeComponent component = new ShapeComponent();17: frame.add(component);18: 19: frame.setVisible(true);20: }21: }
Domanda
3. Che succede se sostituiamo la chiamata g2.draw(box)con g.draw(box) ?
Risposta
3. Il compilatore segnala un errore
g : Graphics non ha un metodo draw
Applets
• Applets sono applicazioni eseguite all’interno di un browser
• L’implementazione di una Applet utilizza il pattern seguente:
public class MyApplet extends JApplet{ public void paint(Graphics g) { // Ottieni un contesto grafico Graphics2D g2 = (Graphics2D) g; // Istruzioni per il disegno . . . }}
Applets
• Struttura molto simile a quella di un JComponent, con due differenze:
1. Estende JApplet, invece di JComponent
2. codice del disegno incluso nel metodo paint, invece che nel metodo paintComponent
File ShapeApplet.java
01: import java.awt.Graphics;02: import java.awt.Graphics2D;03: import java.awt.Rectangle;04: import javax.swing.JApplet;05: 06: /**07: Un applet che disegna due rettangoli.08: */09: public class ShapeApplet extends JApplet10: { 11: public void paint(Graphics g)12: { 13: // Ottieni un contesto grafico14: Graphics2D g2 = (Graphics2D) g;
Continua…
File ShapeApplet.java
17: // Costruisci un rettangolo e disegna18: Rectangle r = new Rectangle(5, 10, 20, 30);19: g2.draw(r);20: 21: // Trasla il rettangolo (15 a dx, 25 in basso) 22: r.translate(15, 25);23: 24: // Disegna il rettangolo traslato25: g2.draw(r);26: }27: }
Applets
• Esecuzione creare un file HTML ed inserire il codice che
lancia l’applet mediante la tag applet Un file HTML può contenere diverse applets,
ciascuno delle quali introdotta da una corrispondente tag (di tipo applet)
• Una applet può essere lanciata mediante l’appletviewer, o all’interno di un browser
appletviewer RectangleApplet.html
File RectangleApplet.html
<html> <head> <title>Due rettangoli</title> </head> <body> <p>Here’s my first applet:</p> <applet code="RectangleApplet.class" width="300" height="400"> </applet> </body></html>
Applets
Forme Geometriche
• Rectangle, Ellipse2D.Double, Line2D.Double (package java.awt.geom)
• Alcune classi, e.g. Line2D.Double, sono interne. Per il momento ignoriamo, ma notiamo la dichiarazione import
• Per ottenere una forma dobbiamo costruirla e disegnarla
Ellipse2D.Double e = new Ellipse2D.Double(x, y, width, height);g2.draw(e);
import java.awt.geom.Ellipse2D; // no .Double
Una ellisse e la sua bounding box
Linee• Due modi per disegnare una linea:
oppure,
Line2D.Double segmento = new Line2D.Double(x1, y1, x2, y2);
Point2D.Double from = new Point2D.Double(x1, y1);Point2D.Double to = new Point2D.Double(x2, y2);Line2D.Double segmento = new Line2D.Double(from, to);
Stringhe
g2.drawString("Message", 50, 100);
Basepoint
Domande
4. Quale è la sequenza di istruzioni per disegnare un cerchio con centro (100, 100) e raggio 25?
5. Quale è una usequenza di istruzioni per disegnare la lettera "V" all’origine (0,0) componendo due segmenti di linea?
6. Quale è la sequenza di istruzioni per disegnare la stringa costituita dalla lettera "V" ?
Risposte
4. 5.
6.
Line2D.Double segm1 = new Line2D.Double(0, 0, 10, 30);g2.draw(segm1);Line2D.Double segm2 = new Line2D.Double(10, 30, 20, 0);g2.draw(segm2);
g2.draw(new Ellipse2D.Double(75, 75, 50, 50);
g2.drawString("V", 0, 30);
Colori
• Colori standard Color.BLUE, Color.RED, …
• Nuovi colori: formato rgb settando i valori delle componenti red, green, blue tra 0.0F e 1.0F
• setColor setta il colore del Graphic Contexts
• Usa il colore con i metodi draw e fill
g2.setColor(magenta);
g2.fill(rectangle); // riempito con il colore corrente
Color magenta = new Color(1.0F,0.0F,1.0F), // F = float
Domanda
7. Quale è la sequenza di istruzioni per disegnare un quadrato giallo su uno sfondo rosso?
Risposta
7. Disegna un quadrato giallo all’interno di un quadrato rosso:
g2.setColor(Color.RED);g2.fill(new Rectangle(0, 0, 200, 200));g2.setColor(Color.YELLOW);g2.fill(new Rectangle(50, 50, 100, 100));
Progetto di applicazioni grafiche
Disegno di forme complesse
• Prassi : un classe per ciascuna forma
• Progetta la forma individuando le componenti base
class Car{ . . . public void draw(Graphics2D g) { // Istruzioni per il disegno . . . }}
Esempio: due automobili
Progetto della Forma
Origine e punto di riferimento della forma
File Car.java01: import java.awt.Graphics2D;02: import java.awt.Rectangle;03: import java.awt.geom.Ellipse2D;04: import java.awt.geom.Line2D;05: import java.awt.geom.Point2D;06: 07: /**08: Una forma di auto posizionabile in un un punto qualunque di una finestra.09: */10: public class Car11: {12: /**13: Costruisce una auto a partire da una data origine 14: @param x la coordinata x dell’origine 15: @param y la coordinata y dell’origine 16: */
Continua…
File Car.java17: public Car(int x, int y)18: {19: xLeft = x; 20: yTop = y;21: }22: 23: /**24: Disegna l’auto.25: @param g2 il contesto grafico per il disegno 26: */27: public void draw(Graphics2D g2)28: {29: Rectangle scocca 30: = new Rectangle(xLeft, yTop + 10, 60, 10); 31: Ellipse2D.Double ruotaAnteriore 32: = new Ellipse2D.Double(xLeft + 10, yTop + 20, 10, 10);33: Ellipse2D.Double ruotaPosteriore Continua…
File Car.java34: = new Ellipse2D.Double(xLeft + 40, yTop + 20, 10, 10);35: 36: // estremo inferiore del parabrezza37: Point2D.Double p1 38: = new Point2D.Double(xLeft + 10, yTop + 10);39: // estremo anteriore del tetto40: Point2D.Double p2 41: = new Point2D.Double(xLeft + 20, yTop);42: // estremo posteriore del tetto43: Point2D.Double p3 44: = new Point2D.Double(xLeft + 40, yTop);45: // estremo inferiore del lunotto 46: Point2D.Double p4 47: = new Point2D.Double(xLeft + 50, yTop + 10);48: 49: Line2D.Double parabrezza 50: = new Line2D.Double(p1, p2);
Continua…
File Car.java
51: Line2D.Double tetto 52: = new Line2D.Double(p2, p3);53: Line2D.Double lunotto54: = new Line2D.Double(p3, p4);55: 56: g2.draw(scocca);57: g2.draw(ruotaAnteriore);58: g2.draw(ruotaPosteriore);59: g2.draw(parabrezza); 60: g2.draw(tetto); 61: g2.draw(lunotto); 62: }63: 64: public static int WIDTH = 60;65: public static int HEIGHT = 30;66: private int xLeft;67: private int yTop;68: }
Costruiamo l’applicazione
JComponent contenente il disegno
• Ricordiamo: istruzioni per il disegno nel metodo paintComponent
• Posizione in basso a dx:
• getWidth e getHeight chiamati sull’oggetto che esegue paintComponent
• Se cambia la dimensione della finestra paintComponent viene invocato e la posizione dell’auto ricalcolata
int x = getWidth() – Car.WIDTH;int y = getHeight()– Car.HEIGHT;Car bottomCar = new Car(x, y);
Continua…
File CarComponent.java01: import java.awt.Graphics;02: import java.awt.Graphics2D;03: import javax.swing.JComponent;04: 05: /**06: This component draws two car shapes.07: */08: class CarComponent extends JComponent09: { 10: public void paintComponent(Graphics g)11: { 12: Graphics2D g2 = (Graphics2D) g;13: 14: Car topCar = new Car(0, 0);15:
Continua…
File CarComponent.java
16: int x = getWidth() - Car.WIDTH;17: int y = getHeight() - Car.HEIGHT;18: 19: Car bottomCar = new Car(x, y);20: 21: topCar.draw(g2);22: bottomCar.draw(g2); 23: }24: }
• Il metodo draw della classe Car invoca i metodi del contesto grafico g2 per comporre il disegno
L’applicazione CarViewer.java
01: import javax.swing.JFrame;02: 03: public class CarViewer04: {05: public static void main(String[] args)06: {07: JFrame frame = new JFrame();08: 09: final int FRAME_WIDTH = 300;10: final int FRAME_HEIGHT = 400;11: 12: frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);13: frame.setTitle("Two cars");14: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Continua…
File CarViewer.java
15: 16: CarComponent component = new CarComponent();17: frame.add(component);18: 19: frame.setVisible(true);20: }21: }
Domanda
8. Quale classe dobbiamo modificare per ottenere un disegno in cui le auto sono disposte una vicino all’altra?
Risposta
8. CarComponent
Altre forme grafiche
Rectangle fasciaVerde = new Rectangle(100, 100, 30, 60);Rectangle fasciaRossa = new Rectangle(160, 100, 30, 60);Line2D.Double topLine = new Line2D.Double(130, 100, 160, 100);Line2D.Double bottomLine = new Line2D.Double(130, 160, 160, 160);
Lettura da un dialog box
• In una una applicazione grafica possiamo dare input mediante un JOptionPane
• Il metodo showInputDialog attiva una finestra che dà un prompt e attende
input restituisce la stringa fornita dall’utente
Continua…
String input = JOptionPane.showInputDialog("Enter x");double x = Double.parseDouble(input);
Un dialog box
ColorViewer
• Una applicazione che permette all’utente di comporre un colore decidendo i parametri del formato rgb
• I valori vengono richiesti in seguenza mediante dialog boxes
• Al termine l’applicazione attiva una finestra con un quadrato del colore composto dall’utente
File ColorViewer.java
01: import java.awt.Color;02: import javax.swing.JFrame;03: import javax.swing.JOptionPane;04: 05: class ColorViewer06: {07: public static void main(String[] args)08: {09: JFrame frame = new JFrame();10: 11: final int FRAME_WIDTH = 300;12: final int FRAME_HEIGHT = 400;13: 14: frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);15: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);16: 17: String input;18: Continua…
File ColorViewer.java19: // Chiedi all’utente I valori di red, green, blue 20: 21: input = JOptionPane.showInputDialog("red:");22: double red = Double.parseDouble(input);23: 24: input = JOptionPane.showInputDialog("green:");25: double green = Double.parseDouble(input);26: 27: input = JOptionPane.showInputDialog("blue:");28: double blue = Double.parseDouble(input);29: 30: Color coloreScelto = new Color(31: (float) red, (float) green, (float) blue); 32: ColorComponent component 33: = new ColorComponent(coloreScelto);34: frame.add(component);35: 36: frame.setVisible(true);37: } 38: }
File ColorComponent.java
01: import java.awt.Color;02: import java.awt.Graphics;03: import java.awt.Graphics2D;04: import java.awt.Rectangle;05: import javax.swing.JComponent;06: 07: /**08: Una componente che include un quadrato colorato09: */10: class ColorComponent extends JComponent11: {
private Color fillColor; // colore di riempimento 12: /**13: Costruisce la componente14: @param c il colore di riempimento del quadrato15: */16: public ColorComponent(Color c) Continua…
File ColorComponent.java
17: { 18: fillColor = c;19: }20: 21: public void paintComponent(Graphics g)22: { 23: Graphics2D g2 = (Graphics2D) g;24: 25: // Seleziona il colore del contesto grafico26: 27: g2.setColor(fillColor);28: 29: // Costruisci e colora un quadrato al centro30: // della finestra31:
Continua…
File ColorComponent.java
32: final int LATO = 100;33: 34: Rectangle quadrato = new Rectangle(35: (getWidth() - LATO) / 2,36: (getHeight() - LATO) / 2,37: LATO,38: LATO);39: 40: g2.fill(quadrato);41: }43: }
Output
Domande
9. Sarebbe possibile chiedere i tre valori per r,g, e b in un unico dialog box?
10. Perché l’applicazione invoca showInputDialog dal metodo main main della classe ColorViewer e non dal metodo paintComponent della classe ColorComponent?
Risposte
9. Certo, ma in quel caso è necessario estrarre poi le singole componenti … un utile esercizio di semplice su stringhe
10. Perchè in quel caso i dialog box verrebbero rilanciati tutte le volte che la finestra viene mossa / resized / deiconificata /…