FreeDrawing: disegnare e scrivere a mano libera (Android e iOS)

Una richiesta che spesso mi è stata fatta nelle ultime settimane è quella di poter far firmare un utente su un dispositivo mobile in una applicazione fatta con Delphi.
Al di là delle questioni legali relative, ho pensato che potesse essere interessante realizzare un’applicazione mobile che permettesse di disegnare a mano libera (o con un pennino).

Devo dire che è stato relativamente semplice, grazie agli strumenti messi a disposizione da FireMonkey.
L’idea di fondo è quella di sfruttare l’evento OnMouseMove di una TImage e disegnare sul canvas della Bitmap della TImage stessa.

Alcuni punti fondamentali che voglio brevemente evidenziare:

grazie all’evento OnMouseMove abbiamo a disposizione le coordinate X e Y dei punti attraversati durante l’azione di disegno effettuata dall’utente con il dito o con il pennino;
molte opzioni di disegno sono disponibili fra le proprietà dell’oggetto TStroke del canvas stesso;
sfruttiamo i metodi DrawLine e DrawEllipse di TCanvas per realizzare la linea spezzata che congiunge i punti rilevati nell’handler di OnMouseMove e per disegnare dei punti nel caso di tocchi singoli sulla superficie di disegno (ottimo per realizzare i puntini sulle i e la punteggiatura);
grazie ai componenti TColorPicker e ai TColorQuad, è facile permettere all’utente di personalizzare i colori dello sfondo e del tratto;
un semplice algoritmo per ridurre “glitches” nel disegno (soprattutto nella scrittura a mano libera) è stato implementato tenendo in considerazione la distanza fra due punti da unire nelle spezzate e il gap temporale fra due tocchi distinti (anche qui, usando i componenti TTrackBar, è facile dare un minimo di personalizzazione dei parametri dell’algoritmo all’utente);
l’uso di un Drawer (cfr. articolo e video tutorial di Josè Leon) ci permette di avere la massima superficie di disegno a disposizione e al contempo realizzare una GUI intuitiva per l’utente;
la TToolbar superiore permette facilmente di mettere a disposizione dei comandi rapidi all’utente fra cui troviamo anche i pulsanti per utilizzare una immagine scattata dalla fotocamera (o presa dalla galleria immagini del dispositivo) come sfondo; da notare come l’implementazione di questa funzionalità (utilizzare un’immagine già scattata o scattare un’immagine dalla fotocamera) non abbia richiesto che le tre righe di codice necessarie a disegnare (in stretch mode) l’immagine selezionata sulla nostra superficie di disegno, grazie all’uso delle TTakePhotoFromCameraAction e TTakePhotoFromLibraryAction a disposizione fra le standard action;
Ultima ma non meno importante, una volta completato il nostro disegno, l’utente può condividere il risultato attraverso lo ShareSheet standard di sistema, che permetterà di inviare il contenuto (la Bitmap) a qualunque applicazione installata sul nostro dispositivo (ottimo per inviarla via social networks o per email / instant messaging).

Conclusioni e materiale

Realizzare una semplice applicazione per il disegno a mano libera (e scrittura) è possibile con Delphi XE5 ed è possibile, con poco sforzo, realizzare le funzionalità fondamentali per offrire all’utente una buona esperienza d’uso. Grazie a FireMonkey molte di queste funzionalità sono realizzabili con pochissime righe di codice (scattare una foto dalla camera, usare un’immagine dalla libreria, condividere il risultato del disegno con altre applicazioni).

Trovate i sorgenti completi dell’applicazione qui: Link to sources DXE5
Demo: Link to Android APK

Di seguito qualche screenshot preso con il mio Nexus 7, e con l’occasione possiamo anche farvi i migliori auguri per un felice anno nuovo!