Proseguiamo la serie di tutorial introduttivi su MIT App Inventor 2 per la creazione di applicazioni Android.
Il tutorial di oggi vi permetterà di realizzare un applicazione per il disegno a mano libera che chiameremo "Scarabocchio Digitale" (digital doodle in inglese).
Questo tutorial è molto semplice e vi servirà per familiarizzare con il componente Canvas di App Inventor.
Tutta la nostra app avrà quindi un solo elemento, il Canvas appunto, vediamo nel dettaglio la realizzazione di questa app...
Cominciando dal Design Editor trasciniamo un elemento "Canvas" dalla palette "Drawing and Animation" nel nostro Screen1.
Poi andiamo su "Upload File..." e selezioniamo lo sfondo per il nostro Canvas, potete scaricare il file che ho utilizzato cliccando qua
Per finire impostate questa immagine come sfondo del canvas cliccando su BackgroundImage nelle proprietà (properties) del Design Editor e selezionando Canvas_Background appunto.
Impostate i colori del Background color a "none" sia per Screen1 che per Canvas1.
La parte della UI (interfaccia grafica) è completa!
Passiamo quindi ora al Blocks Editor cliccando sul pulsante nell'angolo in alto a destra.
Nel Blocks Editor avremo un solo elemento, nello specifico posizioneremo un blocco di codice che viene eseguito ogni qualvolta l'utente scorre con il dito sul Canvas appena inserito.
Questo evento si chiama "Canvas1.Dragged" (drag = trascinare) e fornisce ad ogni trascinamento le seguenti informazioni alla nostra app:
startX = coordinate X del punto di contatto iniziale del dito sul canvas
startY = coordinate Y del punto di contatto iniziale del dito sul canvas
prevX = coordinate X del punto di contatto appena precedente del dito sul canvas
prevY = coordinate Y del punto di contatto appena precedente del dito sul canvas
currentX = coordinate X punto di contatto attuale del dito sul canvas
currentY = coordinate Y punto di contatto attuale del dito sul canvas
draggedSprite = valore dello sprite eventualmente trascinato e presente sul canvas
 |
| l'evento Canvas1.Dragged |
 |
| l'evento Canvas1.Dragged con al suo interno la chiamata al metodo DrawLine |
In pratica infatti ad ogni spostamento (drag) del dito, l'evento viene generato, e ad ogni evento diremo alla nostra app di disegnare un tratto di linea che avrà per coordinate iniziali la posizione X,Y appena precedente del dito e coordinate finali X,Y la posizione attuale del dito sullo schermo.
Tanti "piccoli" tratti di linea (infatti l'evento Dragged viene generato ad ogni piccolo movimento del dito) andranno a formare un disegno che seguirà abbastanza fedelmente la traiettoria del dito stessa.
 |
| ecco l'app finale in esecuzione |
Vi consiglio di approfondire e sperimentare voi stessi tutti gli eventi, i metodi e le proprietà disponibili nel componente Canvas, per farvi un idea guardate l'immagine sottostante che rappresenta solo alcuni di essi:
 |
| un estratto del componente Canvas, i suoi eventi (in marrone) e i suoi metodi (in viola) |
http://ai2.appinventor.mit.edu/reference/components/animation.html#Canvas
Con l'elemento Canvas è possibile disegnare anche dei punti, dei cerchi, del testo, cambiare lo spessore della linea e tante altre cose...
Come ulteriore esercizio vi suggerisco alcune modifiche che potete apportare a questa semplice app, come ad esempio l'inserimento di :
1) Pulsante per ripulire il canvas
2) Pulsante per la scelta del colore del tratto (suggerimento ... Canvas1.PaintColor)
3) Pulsante per salvare il canvas (suggerimento ... Canvas1.Save oppure Canvas1.SaveAs)
Fatemi sapere come vanno le cose e se avete commenti o domande usate i commenti qui sotto.
Per chi preferisce un apprendimento più visuale, trovate qui sotto il VideoTutorial corrispondente:
Ci sentiamo al prossimo tutorial!!!
ciao sebastiano, vorrei sapere se è possibile creare un app in cui sfiorando lo schermo si possa passare da un immagine all'altra senza il bisogno di cliccare su dei tasti.
RispondiEliminagrazie!!
si è possibile farlo, devi usare sempre un canvas e le immagini che vuoi visualizzare devo essere inserite come sprite
Eliminapoi con l'evento "flung" capisci se c'è stato swipe verso destra o sinistra e passi all'immagine precedente/successiva.
Questo è il concetto di massima, ti invito a sperimentare da te l'attuale implementazione,
la prossima volta per favore chiedi sul forum e non su post che non c'entrano con la tua domanda (come in questo caso) ;)
ciao
ciao sebastiano ti ringrazio per gli aiuti sempre precisi e puntuali, vorrei sapere come realizzare nel blocks editor l'evento flung,ci provo e riprovo ma non riesco a realizzare la sua logica ,:(
RispondiEliminaci sono finalmente riuscito! ma ora ho un altro problema. e spero di avere un tuo aiuto sebastiano. Nella mia app di disegno a mano praticamente ho inserito delle immagini da colorare e il passaggio da un immagine all'altra sono riuscito ad eseguirlo con l'evento flug.Ora il problema è che quando passo il dito per colorare un immagine questa cambia e passa alla successiva...come posso rimediare?
RispondiEliminaPotresti mettere un controllo sulla velocità dell'evento flung, se è "veloce" allora passi all'immagine successiva, se non lo è disegni il tratto...
Eliminapenso possa essere una soluzione... (scusa se non ho risposto prima...) :)
scherzi figurati !!! ci proverò!!! per me è ancora un pò complicato ma l'impegno sarà massimale grazie !!!
EliminaSupponendo di voler creare un sistema che permetta di cambiare il colore della linea,oppure di cancellare quanto disegnato, come potrei fare???
RispondiEliminaCiao Sebastiano scusa ma come faccio a creare un cerchio che deve avere un raggio variabile e non fisso.
RispondiEliminaScusate, per chi se lo chiedesse è una domanda
Eliminaaiutatemi vi prego non riesco a fare il pulsante per ripulire il canvas e quello per salvare il canvas mi aiutate per favore ?
RispondiElimina