Paola Magillo, Univestita' di Genova, Corso di Interfacce Utente per Informatica, a.a. 2009-2010.

LABORATORIO - INTERFACCE GRAFICHE IN JAVA

Contesto generale

Prendiamo l'impianto generale dell'editor di testi realizzato nello scorso laboratorio e questa volta carichiamo e visualizziamo un'immagine.
Poi disegneremo un poligono sovrapposto all'immagine.

Nella finestra principale troveremo:

Abbiamo visto a lezione come si fa a disegnare un'immagine in un componente.

Procederemo per gradi...

Grado 1: Caricare un'immagine e visualizzarla

Dovremo definire una sotto-classe di JPanel che memorizza un'immagine e ridefinisce la funzione di disegno paintComponent disegnando quell'immagine.

Dovremo disegnare l'immagine nel pannello, dopo aver dimensionato il pannello a coincidere con larghezza e altezza dell'immagine. Si noti che prima si carica l'immagine, poi si dimensiona il pannello, poi si chiede di ridisegnare (chiamando sul pannello la funzione repaint) e solo allora avviene (da parte di java) il disegno dell'immagine.

Per caricare un'immagine:

  Toolkit t = Toolkit.getDefaultToolkit();
  Immagine immagine = t.getImage(imageFile);
  try 
  {  MediaTracker track = new MediaTracker(this);
     track.addImage(immagine,0);
     track.waitForID(0);
  }
  catch (InterruptedException e)
  { .... }
La parte "try ... catch" segue serve per assicurarsi che l'immagine sia stata completamente caricata prima di andare avanti, altrimenti le sue dimensioni risulterebbero zero, e sarebbe impossibile usarle per dimensionare il pannello in cui andremo a visualizzarla.

Una volta che l'immagine e' stata caricata, possiamo leggerne le dimensioni con:

  int dimX = immagine.getWidth(this);
  int dimY = immagine.getHeight(this);
E usarle per assegnare il preferred size del pannello.

Grado 2: Zoom dell'immagine

Il nostro pannello deve memorizzare anche il fattore di zoom attuale e usarlo per disegnare l'immagine.

Quando cambia lo zoom, occorre reimpostare il preferred size del pannello e chiedere che sia ridisegnato (chiamando repaint).

Grado 3: Disegno del poligono sopra l'immagine

Per adesso potete codificare direttamente nel programma le coordinate dei vertici, oppure permettere all'utente di introdurle mediante un campo di testo, o da command-line al lancio del programma.
Non vi preoccupate che questo sia poco elegante, perche' nel prossimo laboratorio faremo introdurre all'utente i vertici in modo interattivo (cliccando sul pannello).

Nella paintComponent del pannello aggiungete le chiamate necessarie al disegno. Perche' venga disegnato sopra l'immagine, e' sufficiente metterle dopo il disegno dell'immagine.