Programmazione J2ME. Lezione 3. La Grafica 2D. Di Blasi Gianpiero - D.M.I. - Università di Catania

Transcript

1 Di Blasi Gianpiero - D.M.I. - Università di Catania Programmazione J2ME Lezione 3 La Grafica 2D

2 Cosa impareremo oggi? L'API grafica di basso livello di J2ME La classe Canvas La classe Graphics Disegno di testo e figure geometriche Stili di disegno, trasformazioni di coordinate e ritaglio Il disegno di immagini

3 Introduzione (1) L'API di alto livello per la creazione delle GUI fornisce la massima portabilità e facilità di sviluppo Tuttavia alcune applicazioni richiedono un controllo più fine sulla GUI L'API di basso livello per la creazione delle GUI è progettata per quelle applicazioni che necessitano invece di un posizionamento e controllo preciso degli elementi grafici e di un accesso a basso livello agli eventi di input

4 Introduzione (2) Tipici esempi di componenti che dovrebbero necessitare di tale approccio sono un game board, un diagramma, un grafico, ecc. Usando tale API un'applicazione può: controllare con precisione cosa è disegnato sul display gestire gli eventi di basso livello (keypressed, keyreleased, ecc.) accedere direttamente alle key (tasti, softkey, ecc.) ed ad altri dispositivi di input

5 Introduzione (3) Le applicazioni realizzate usando l'api di basso livello possono rimanere portabili a patto di usare solo le caratteristiche standard Ciò vuol dire che dovrebbero usare solo le caratteristiche platform-independent dell'api Questo significa che: non dovrebbero direttamente assume la presenza di qualsiasi tasto oltre quelli definiti nella classe Canvas dovrebbero verificare sempre le dimensioni del display ed aggiustare i propri comportamenti di conseguenza

6 La classe Canvas (1) Per utilizzare direttamente l'api di basso livello bisogna conoscere le classi Graphics e Canvas Graphics è una classe molto simile (metodi e comportamento) alla sua omonima delle AWT Canvas invece fornisce: la superficie e le dimensioni del display le callback usate per gestire gli eventi ed i metodi per disegnare sul display Metodi e callback devono essere sovrascritti per gestire opportunamente eventi e disegno

7 La classe Canvas (2) La combinazione della capacità di gestire gli eventi del Canvas e delle capacità di disegno del Graphics permette di avere il completo controllo sullo schermo Queste classi possono essere usate per esempio per: creare nuovi schermi personalizzati implementare videogame manipolare immagini

8 Dimensioni del Canvas (1) Un Canvas non deve necessariamente avere accesso all'intero schermo di un dispositivo J2ME Certe aree dello schermo possono essere riservate per altri scopi (ad esempio visualizzare lo stato della rete o della batteria) Inoltre l'uso di un titolo, di un Ticker e/o di oggetti Command possono ulteriormente ridurre lo spazio disponibile al Canvas

9 Dimensioni del Canvas (2) Le dimensioni di un Canvas possono essere ottenute tramite i metodi di Displayable: int getwidth(), int getheight() Inoltre si può essere informati quando le dimensioni variano per qualche motivo tramite il metodo void sizechanged(int w, int h): lanciato quando variano le dimensioni del Canvas Ciò permette di (eventualmente) riadattare in tempo reale il layout dell'applicazione

10 Dimensioni del Canvas (3) Se un'applicazione vuole una visualizzazione a tutto schermo allora bisogna lanciare il metodo void setfullscreenmode(boolean mode): attiva/disattiva la visualizzazione a tutto schermo Quando tale visualizzazione è attiva, titolo e Ticker non sono visibili (anche se presenti) I comandi restano visibili sebbene il dispositivo potrebbe minimizzare lo spazio occupato Alcuni dispositivi potrebbero anche nascondere gli indicatori di stato del sistema

11 Dimensioni del Canvas (4) Esempio DimensionCanvasSample

12 Il modello di disegno Il modello di disegno in J2ME è molto simile a quello AWT Per dire al dispositivo cosa deve disegnare in un Canvas bisogna implementare il metodo void paint(graphics graphics): descrive cosa deve essere disegnato nel Canvas Quando si vuole che un Canvas si ridisegni non si deve chiamare direttamente tale metodo, ma il metodo void repaint(): forza il ridisegno del Canvas

13 Baco MIDP 1.0 Ogni volta che si implementa il metodo paint bisogna eseguire un clear screen manuale Se non lo si fa in caso di repaint il vecchio disegno rimarrebbe visualizzato sul display Per ottenere un clear screen è sufficiente: impostare il colore sul bianco riempire un rettangolo delle stesse dimensioni dello schermo Ovviamente a seconda delle necessità si possono anche utilizzare altri colori o metodi

14 La classe Graphics Graphics è una classe molto simile (metodi e comportamento) alla sua omonima delle AWT Fornisce metodi per le classiche operazioni di disegno già viste nelle AWT La maggior parte dei metodi sono identici, altri differiscono di poco Seguono delle slide con argomenti molto simili a quelli che sono stati trattati nei corsi del gruppo Interazione&Multimedia

15 Le coordinate del contesto grafico Anche in J2ME il sistema di riferimento è quello classico della grafica al computer 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

16 I colori (1) In J2ME i colori possono essere definiti solo: come terne di interi RGB come un unico intero opportunamente formattato (0x00RRGGBB) Esiste il solo modello di colore RGB Non esiste il concetto di trasparenza

17 I colori (2) Per impostare il colore della classe Graphics bisogna usare i metodi: void setcolor(int RGB), void setcolor(int red, int green, int blue): impostano il colore della classe Graphics Dopo questo comando tutto ciò che verrà disegnato userà il colore specificato Il colore di default è il nero

18 I colori (3) Esempio ColorHelloWorldSample

19 Testo e Font (1) Le stringhe in J2ME vengono disegnate mediante la classe Font contenente tutte le caratteristiche tipografiche necessarie Tale classe è simile alla sua omonima in AWT, ma può richiamare solo un numero limitato di font standard È possibile impostare gli stili corsivo, grassetto e sottolineato ed ovviamente la dimensione del font

20 Testo e Font (2) Per definire un Font si possono utilizzare i seguenti metodi statici: Font getdefaultfont(): restituisce il font di default del dispositivo Font getfont(int fontspecifier): restituisce un font standard del dispositivo (fontspecifier può essere FONT_INPUT_TEXT, FONT_STATIC_TEXT) Font getfont(int face, int style, int size): restituisce un font ad hoc

21 Testo e Font (3) face può essere FACE_SYSTEM, FACE_MONOSPACE, FACE_PROPORTIONAL style può essere STYLE_PLAIN, o una combinazione di STYLE_BOLD, STYLE_ITALIC e STYLE_UNDERLINED size può essere SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE Per impostare il Font bisogna usare il metodo void setfont(font f): imposta il Font del contesto grafico

22 Testo e Font (4) Esempio Arlecchino

23 Non solo lettere (1) È possibile disegnare: forme elementari (piene e vuote) linee e spezzate (chiuse e aperte) poligoni complessi È anche possibile impostare uno stile (linea solida o tratteggiata) Segue un elenco di metodi (la maggior parte di loro si spiega da se!)

24 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 Per disegnare un arco: void drawarc(int x, int y, int width, int height, int startangle, int arcangle): disegna un arco

25 Non solo lettere (3) Esempi Lines PacMan_a1

26 Non solo lettere (4) Per disegnare rettangoli: void drawrect(int x, int y, int width, int height): disegna un rettangolo Per disegnare rettangoli arrotondati: void drawroundrect(int x, int y, int width, int height, int arcwidth, int archeight): disegna un rettangolo arrotondato

27 Non solo lettere (5) Esempio Rect_a1

28 Considerazioni finali sulle primitive di disegno (1) Esistono una serie di metodi analoghi ai precedenti per il riempimento di forme: 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 fillroundrect(int x, int y, int width, int height, int arcwidth, int archeight)

29 Considerazioni finali sulle primitive di disegno (2) Esempi PacMan_b1 Rect_b1

30 Gli stili delle penne (1) J2ME permette di definire lo stile con cui tracciare le figure In effetti le opzioni sono piuttosto limitate Di default lo stile è una linea continua Per modificare lo stile bisogna usare il metodo di Graphics void setstrokestyle(int style): modifica lo stile della linea style può essere SOLID e DOTTED

31 Gli stili delle penne (2) Esempio Stroke

32 Trasformazione delle coordinate (1) J2ME permette di trasformare le coordinate dello schermo Attualmente però l'unica operazione possibile è traslare le coordinate dello schermo Questo può servire per semplificare il disegno di forme complesse Questa operazione può essere fatta tramite un metodo della classe Graphics void translate(int x, int y): trasla il sistema di riferimento

33 Trasformazione delle coordinate (2) Esempio Translate

34 Ritaglio (1) J2ME permette infine di impostare un rettangolo di ritaglio nel contesto grafico Tutte le operazioni di disegno saranno limitate a tale rettangolo di ritaglio Per impostare un ritaglio bisogna usare uno dei metodi della classe Graphics void setclip(int x, int y, int width, int height): imposta il rettangolo di ritaglio void cliprect(int x, int y, int width, int height): interseca il rettangolo di ritaglio con il rettangolo passato come parametro

35 Ritaglio (2) Esempio Clip

36 Immagini (1) J2ME può caricare, mostrare ed elaborare immagini A breve dedicheremo a questo argomento qualche minuto In questa fase però vogliamo solo mostrare come caricare e utilizzare le immagini in un Canvas Attualmente l'unico formato supportato in lettura da MIDP è il PNG, alcune implementazioni potrebbero comunque supportarne degli altri

37 Immagini (2) Per creare o caricare un'immagine in J2ME si usano i metodi statici della classe Image In particolare in questo momento ci interessa il metodo Image createimage(string name): carica un'immagine dal file specificato (il file deve trovarsi nel file JAR) Per disegnare un'immagine bisogna utilizzare un apposito metodo di Graphics void drawimage(image img, int x, int y, int anchor): disegna un'immagine

38 Immagini (3) Esempio ImageSample_a1

39 Immagini mutabili ed immutabili (1) Le immagini in MIDP possono essere mutabili o immutabili Le immagini immutabili possono essere create direttamente da un file, da dati binari o RGB e da altre immagini Una volta create le immagini immutabili non possono essere più modificate

40 Immagini mutabili ed immutabili (2) I metodi per creare immagini immutabili sono Image createimage(byte[] imagedata, int imageoffset, int imagelength): crea un'immagine da dati binari Image createimage(image source), Image createimage(image image, int x, int y, int width, int height, int transform): crea un'immagine da (una sottoparte di) un'altra immagine Image createimage(inputstream stream), Image createimage(string name): crea un'immagine da uno stream o da un file (che deve trovarsi nel file JAR) Image creatergbimage(int[] rgb, int width, int height, boolean processalpha): crea un'immagine da dati RGB

41 Immagini mutabili ed immutabili (3) Per creare immagini mutabili esiste il metodo Image createimage(int w, int h): crea un'immagine mutabile Metodi utili Graphics getgraphics(): crea un Graphics con cui disegnare (utilizzabile solo su immagini mutabili) int getwidth(), int getheight(): restituiscono larghezza ed altezza dell'immagine void getrgb(int[] rgbdata, int offset, int scanlength, int x, int y, int w, int h): ritorna l'array di valori RGB boolean ismutable(): verifica se l'immagine è mutabile

42 Immagini mutabili ed immutabili (4) Esempio ImageSample_b1