La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Elementi di programmazione grafica. Contenuti Programmazione di semplici applicazioni grafiche che Disegnano semplici forme geometriche Utilizzano colori.

Presentazioni simili


Presentazione sul tema: "Elementi di programmazione grafica. Contenuti Programmazione di semplici applicazioni grafiche che Disegnano semplici forme geometriche Utilizzano colori."— Transcript della presentazione:

1 Elementi di programmazione grafica

2 Contenuti Programmazione di semplici applicazioni grafiche che Disegnano semplici forme geometriche Utilizzano colori Compongono forme semplici per formare figure complesse Utilizzano input dialogs per ottenere input dallutente Sviluppo di test per validare la correttezza delle applicazioni

3 Frames La classe JFrame import javax.swing.*; JFrame frame = new JFrame(); frame.setSize(300, 400); frame.setTitle(Un frame vuoto"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true);

4 Frames

5 File EmptyFrameViewer.java 01: import javax.swing.*; 02: 03: class EmptyFrameViewer 04: { 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: }

6 Mini Test 1.Come disegnamo un frame quadrato con titolo "Hello, World!" ? 2.Come scriviamo un programma che lancia due frames?

7 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!");

8 Disegno di forme geometriche JComponent La classe che definisce contenitori generici, al al cui interno includiamo forme geometriche Figure geometriche incluse in nuovi JComponent Un nuovo JComponent class ShapeComponent extends JComponent {... }

9 Disegno di forme geometriche paintComponent il metodo invocato (automaticamente) tutte le volte che il componente per il quale e` definito viene ridisegnato è in questo metodo che si produce il disegno class ShapeComponent extends JComponent { public void paintComponent(Graphics g) { // Converti in Graphics2D Graphics2D g2 = (Graphics2D) g;... } }

10 Disegno di forme geometriche Graphics classe che permette di manipolare lo stato della componente grafica (posizione/colore corrente) Graphics2D classe con metodi per la creazione e il disegno di figure geometriche Usa un cast per ottenere un oggetto di tipo Graphics2D dal parametro di tipo Graphics package java.awt Rectangle r = new Rectangle(5, 10, 20, 30); g2.draw(rect);

11 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 JComponent 11: { 12: public void paintComponent(Graphics g) 13: { 14: // Ottieni un graphics2D 15: Graphics2D g2 = (Graphics2D) g; 16: Continua…

12 File ShapeComponent.java 17: // Costruisci un rettangolo e disegna 18: 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 traslato 25: g2.draw(r); 26: } 27: }

13 Applicazioni ShapeViewer classe che lancia una finestra allinterno della quale vengono raffigurate Ie componenti Lapplicazione è costruita interamente allinterno del metodo main della classe Disegna due rettangoli Continued…

14 Applicazione ShapeViewer

15 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);

16 File ShapeViewer.java 01: import javax.swing.JFrame; 02: 03: class ShapeViewer 04: { 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(Due rettangoli"); 14: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 15: Continua…

17 File ShapeViewer.java 16: ShapeComponent component = new ShapeComponent(); 17: frame.add(component); 18: 19: frame.setVisible(true); 20: } 21: }

18 Mini Test 3.Che succede se sostituiamo la chiamata g2.draw(box) con g.draw(box) ?

19 Risposta 3.Il compilatore segnala un errore g : Graphics non ha un metodo draw

20 Applets Applets sono applicazioni eseguite allinterno di un browser Limplementazione di un 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... } }

21 Applets La struttura è molto simile a quella di un JComponent, con due differenze: 1.Estendiamo JApplet, invece di JComponent 2.IL codice del disegno è parte del metodo paint, invece che del metodo paintComponent Per eseguire un applet, dobbiamo creare un file HTML ed inserire il codice che lancia lapplet mediante la tag applet

22 Applets Un file HTML può avere diversi applets, ciascuno dei quali introdotto da una corrispondente tag (di tipo applet) Un applet può essere lanciato mediante l appletviewer, o allinterno di un browser in cui Java sia stato abilitato. appletviewer RectangleApplet.html

23 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 JApplet 10: { 11: public void paint(Graphics g) 12: { 13: // Ottieni un contesto grafico 14: Graphics2D g2 = (Graphics2D) g; Continua…

24 File ShapeApplet.java 17: // Costruisci un rettangolo e disegna 18: 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 traslato 25: g2.draw(r); 26: } 27: }

25 File ShapeAppletViewer.html Due rettangoli Ecco qui il mio primo applet:

26 Applets

27 Forme Geometriche Rectangle, Ellipse2D.Double, Line2D.Double fornite dal package java.awt Alcune di queste classi, e.g. Line2D.Double, sono interne. Per il momento ignoriamo questo aspetto, ma notiamo la dichiarazione import Per disegnare 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

28 bounding box Una ellisse e la sua bounding box

29 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);

30 Stringhe g2.drawString("Message", 50, 100);

31 Domande 4.Quale è la sequenza di istruzioni per disegnare un cerchio con centro (100, 100) e raggio 25? 5.Quale è la sequenza di istruzioni per disegnare la lettera "V" con due segmenti di linea ? 6.Quale è la sequenza di istruzioni per disegnare la stringa costituita dalla lettera "V" ?

32 Risposte 4. 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);

33 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

34 Domanda 7.Quale è la sequenza di istruzioni per disegnare un quadrato giallo su uno sfondo rosso?

35 Risposta 7.Disegna un quadrato giallo allinterno 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));

36 Forme complesse Best practice: costruisci un classe per ciascuna forma Progetta la forma individuando le componenti base class Car {... public void draw(Graphics2D g2) { // Istruzioni per il disegno... } }

37 Due automobili

38 Progetto della Forma Origine e punto di riferimento della forma

39 File Car.java 01: 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 posizionabibile in un un punto qualunque di una finestra. 09: */ 10: public class Car 11: { 12: /** 13: Costruisce una auto a partire da una data origine x la coordinata x dellorigine y la coordinata y dellorigine 16: */ Continua…

40 File Car.java 17: public Car(int x, int y) 18: { 19: xLeft = x; 20: yTop = y; 21: } 22: 23: /** 24: Disegna lauto. 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…

41 File Car.java 34: = new Ellipse2D.Double(xLeft + 40, yTop + 20, 10, 10); 35: 36: // estremo inferiore del parabrezza 37: Point2D.Double p1 38: = new Point2D.Double(xLeft + 10, yTop + 10); 39: // estremo anteriore del tetto 40: Point2D.Double p2 41: = new Point2D.Double(xLeft + 20, yTop); 42: // estremo posteriore del tetto 43: 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 frontWindshield 50: = new Line2D.Double(p1, p2); Continued…

42 File Car.java 51: Line2D.Double roofTop 52: = new Line2D.Double(p2, p3); 53: Line2D.Double rearWindshield 54: = 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: }

43 Costruiamo lapplicazione

44 JComponent contenente il disegno Ricordiamo: istruzioni per il disegno nel metodo paintComponent Posizione in basso a dx: getWidth e getHeight chiamati sulloggetto che esegue paintComponent Se cambia la dimensione della finestra paintComponent viene invocato e la posizione dellauto ricalcolata int x = getWidth() – Car.WIDTH; int y = getHeight()– Car.HEIGHT; Car bottomCar = new Car(x, y); Continua…

45 File CarComponent.java 01: 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 JComponent 09: { 10: public void paintComponent(Graphics g) 11: { 12: Graphics2D g2 = (Graphics2D) g; 13: 14: Car topCar = new Car(0, 0); 15: Continua…

46 File CarComponent.java 16: int x = getWidth() - Car.WIDTH; 17: int y = getHeight() - Car.HEIGHT; 18: 19: Car bottoCar = 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

47 Lapplicazione CarViewer.java 01: import javax.swing.JFrame; 02: 03: public class CarViewer 04: { 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…

48 File CarViewer.java 15: 16: CarComponent component = new CarComponent(); 17: frame.add(component); 18: 19: frame.setVisible(true); 20: } 21: }

49 Domanda 8.Quale classe dobbiamo modificare per ottenere un disegno in cui le auto sono disposte una vicino allaltra?

50 Risposta 8. CarComponent

51 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);

52 Lettura da un dialog box In una una applicazione grafica può possiamo interagire con lutente chiedendo input mediante un JOptionPane Il metodo showInputDialog attiva una finestra che dà un prompt e attende input Il metodo showInputDialog restituisce la stringa fornita dallutente Continua… String input = JOptionPane.showInputDialog("Enter x"); double x = Double.parseDouble(input);

53 Un dialog box

54 ColorViewer Una applicazione che permette allutente di comporre un colore decidendo i parametri del formato rgb I valori vengono richiesti in seguenza mediante dialog boxes Al termine lapplicazione attiva una finestra con un quadrado del colore composto dallutente

55 File ColorViewer.java 01: import java.awt.Color; 02: import javax.swing.JFrame; 03: import javax.swing.JOptionPane; 04: 05: class ColorViewer 06: { 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…

56 File ColorViewer.java 19: // Chiedi allutente 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: DemoColorComponent component 33: = new DemoColorComponent(fillColor); 34: frame.add(component); 35: 36: frame.setVisible(true); 37: } 38: }

57 File DemoColorComponent.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 colorato 09: */ 10: class DemoColorComponent extends JComponent 11: { private Color fillColor; // colore di riempimento 12: /** 13: Costruisce la componente c il colore di riempimento del quadrato 15: */ 16: public DemoColorComponent(Color c) Continua…

58 File DemoColorComponent.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 grafico 26: 27: g2.setColor(fillColor); 28: 29: // Costruisci e colora un quadrato al centro 30: // della finestra 31: Continua…

59 File DemoColorComponent.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: }

60 Output

61 Domande 9.Sarebbe possibile chiedere i tre valori per r,g, e b in un unico dialog box? 10.Perché lapplicazione invoca showInputDialog dal metodo main main della classe ColorViewer e non dal metodo paintComponent della classe ColorComponent ?

62 Risposte 9.Certo, ma in quel caso è necessario estrarre poi le singole componenti … un utile esercizio di semplice programmazione su stringhe 10.Perchè in quel caso i dialog box verrebbero rilanciati tutte le volte che la finestra viene mossa / resized / deiconificata /…


Scaricare ppt "Elementi di programmazione grafica. Contenuti Programmazione di semplici applicazioni grafiche che Disegnano semplici forme geometriche Utilizzano colori."

Presentazioni simili


Annunci Google