Android, disegnare con i Canvas

Nella programmazione Android, siamo abituati a vedere le immagini come dei contenuti statici, collocati nella cartella delle risorse Drawable. In alcuni casi, però può rivelarsi utile disegnarle dinamicamente tramite codice Java. Quello che ci serve è una sorta di foglio su cui poter imprimere delle forme geometriche in base alle nostre configurazioni: tutto ciò esiste e passa sotto il nome di Canvas.
In questo esempio, illustreremo l’utilizzo di un Canvas disegnando su una Bitmap per poi utilizzarla come contenuto di una ImageView.
Il layout dell’app è il seguente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/immagine"/>
</RelativeLayout>

Nel metodo onCreate dell’Activity, dopo aver recuperato il riferimento all’ImageView, chiediamo un Canvas per poter disegnare una nostra immagine. Supponiamo che il nostro scopo sia quello di avere uno sfondo blu ed un cerchio giallo in posizione centrale, quello che ci serve è:

richiedere un oggetto Bitmap che costituirà il nostro prodotto finale. Nell’impostazione diremo di quanti punti vogliamo che sia composto sia orizzontalmente che verticalmente;
costruiamo un Canvas che usi come base di lavoro la Bitmap appena istanziata;
istanzieremo un Paint che costituisce lo strumento di disegno sul Canvas;
disporremo che il Canvas disegni sulla Bitmap le forme che vorremo utilizzando i parametri da noi passati di volta in volta ed il Paint configurato.
assegneremo la Bitmap come contenuto della ImaView posizionata nel layout.

Questo il codice per fare apparire sfondo e cerchio che desideriamo:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ImageView img= (ImageView) findViewById(R.id.immagine);

// 1. preparazione Bitmap
Bitmap bmp=Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);

// 2. istanziamo Canvas basato sulla Bitmap
Canvas canvas=new Canvas(bmp);

// 3. assegniamo sfondo blu al Drawable
canvas.drawColor(Color.BLUE);

// 4. per disegnare il cerchio, abbiamo bisogno di un Paint
Paint paint=new Paint();

// 5. il Paint userà il colore giallo
paint.setColor(Color.YELLOW);

// 6. usando il Paint disegniamo un cerchio nella Drawable
canvas.drawCircle(200,200, 100, paint);

// 7. la Bitmap disegnata con il Canvas diventa il contenuto della ImageView
img.setImageBitmap(bmp);
}

Dalla righe di codice appena viste, notiamo che il Paint non serve per assegnare un colore di sfondo alla Bitmap mentre ha un ruolo indispensabile per definire il tratto con cui il Canvas disegnerà.
Il Canvas possiede molti metodi di cui drawCircle è quello definito per il disegno di un cerchio. Le coordinate utilizzate sono rapportate al sistema di punti (400X400) che abbiamo posto alla base del nostro Bitmap. Per questo motivo, la coppia di coordinate ascissa e ordinata che rappresentano il centro del cerchio (valgono entrambe 200) costituiranno anche il centro dell’area a disposizione. Il raggio del cerchio sarà invece di 100 punti.
Per assegnare la nuova immagine all’ImageView, basterà utilizzare il riferimento al Drawable senza chiedere alcuna elaborazione al Canvas o ad altro oggetto.
Per arricchire l’immagine di nuovi tratti, si dovrà eventualmente riconfigurare il Paint.

Ad esempio, per aggiungere un cerchio celeste più piccolo sopra quello giallo avremo bisogno del seguente codice:

paint.setColor(Color.CYAN);
canvas.drawCircle(200,200, 50, paint);

Si presti attenzione che le immagini sono realizzate in sequenza perciò invertendo i comandi che disegnano i cerchi (mettendo, quindi, prima quello più piccolo e poi quello più grande) vedremmo apparire solo il secondo in quanto risulterebbe sovrapposto al primo.

Per il disegno di linee, si usa analogamente il metodo drawLine al quale passeremo due coppie di coordinate rappresentanti gli estremi del segmento.

Ad esempio, per avere una linea di colore verde e spessore di 5 punti, che tagli il Drawable dall’angolo in altro a sinistra (coordinate: x=0 e y=0) a quello in basso
a destra (coordinate: x=400 e y=400) dovremo utilizzare le seguenti righe di codice Java:

paint.setColor(Color.GREEN);
paint.setStrokeWidth(5);
canvas.drawLine(0,0,400,400, paint);

L’intuitività dell’uso delle coordinate in questi metodi nonché il loro formato numerico permettono di utilizzarli in maniera più dinamica come il seguente ciclo che offre una sorta di piccolo esercizio geometrico:

for(int i=0;i<400;i+=20)
{
   canvas.drawLine(i,0,400,i, paint);
   canvas.drawLine(400,i,400-i,400, paint);
   canvas.drawLine(400-i,400,0,400-i, paint);
   canvas.drawLine(0,400-i,i,0, paint);
}

Da ogni lato partiranno linee consecutive che raggiungeranno il lato adiacente. L’intreccio di tali forme comporrà il disegno visibile in figura:

Conclusioni

I Canvas offrono la possibilità di scendere un pò più in profondità rispetto all’alto livello cui è abituato il programmatore. Con questi elementi riusciamo a gestire delle immagini da vicino ma con la comodità di tanti metodi intuitivi messi a disposizione dalla classe Canvas.

Ora tocca a voi: provate ad utilizzarli e fateci sapere cosa ne pensate.

Alla prossima!