Dessiner sous Android

Pour dessiner dans une surface, vous pouvez utiliser une Classe Canvas, qui est une interface qui va permettre d'accéder à cette surface et d'y effectuer des opérations graphiques.

A partir d'un canevas récupéré depuis votre classe de rendu RenderView de la méthode onDraw, vous allez pouvoir dessiner des figures 2D élémentaires via une librairie graphique de bas niveau nommée Skia:

Image non trouvée ! Les opérations graphiques ne seront pas rendues immédiatement sur l'écran. Elles passeront d'abord par une sorte d'"écran logique" ou "backbuffer" avant d'être effectivement affichées.

Un canevas est initialisé avec un fond blanc. Mais il pourra aussi contenir des bitmaps.

Voir notion élémentaire de la 2D

Résolution de la surface du canevas

Pour connaître la résolution du canevas, vous avez deux méthodes à disposition:

int width = canvas.getWidth();
int height = canvas.getHeight();

Facile non ?

Image non trouvée ! Dans le cas où votre écran et en FullScreen, les informations qui seront retournées vous indiquerons la résolution de l'écran.

La classe Paint

Avant de dessiner quelque chose, il faut d'abord voir la classe Paint. Cette classe permet de positionner via de setters différents attributs qui seront utilisés pour dessiner à l'écran. Vous pourrez aussi relire les attributs via des getters.

Définir une couleur

Pour définir la couleur d'un point, il suffit d'instancier Paint, puis de positionner les attributs de la couleur au format alpha, rouge, vert et bleu via le setter ARGB ou via color:

Paint paint = new Paint();
paint.setARGB(alpha, red, green, blue);

setColor (int color)

Dans ce cas, color correspond à une valeur sur 32 bits qui se code très facilement en héxadécimal car le format sera alors AARRGGBB. Vous pourrez aussi utiliser la classe Color pour définir une couleur (par exemple Color.RED pour avoir la couleur rouge).

Exemple setColor (0xFFFF0000) : Alpha à 255 (FF), Rouge à 255 (FF), vert à 0 et bleu à 0. Ce qui donne la couleur rouge en sortie.

Image non trouvée ! Alpha à FF rend le point complètement opaque, à 00, totalement transparent.

Définir la taille d'un point

Paint.setStrokeWidth(float widthInPixels) permet d'indiquer la taille d'un point en pixel.

L'anti-aliasing

Paint.setAntiAlias(boolean) où boolean sera positionné à true pour activer ou false pour désactiver l'antialiasing (évidemment, l'antialiasing actif est plus beau, mais consomme aussi plus de temps de calcul !)

Paint.isAntiAlias() permettra de savoir si l'antialiasing est positionné ou non.

Style

Utilisé pour indiquer par exemple si l'on veut ou non une bordure autour d'un rectangle, que le rectangle doit être rempli, les deux à la fois...

Paint.setStyle(Style style); (import android.graphics.Paint.Style;)
Avec style poistionné à Style.FILL (rectangle rempli avec la couleur définie dans Paint), Style.STROKE (Uniquement la bordure sera dessinée, ou Style.FILL_AND_STROKE (bordure et remplissage du rectangle).

Remplir d'un couleur le fond de la cible du canevas

Pour remplir le fond (background) d'un Canvas avec une certaine couleur, vous utiliserez la méthode Canvas.drawRGB(int r, int v, int b) avec r, g et b les composantes rouge, vert et bleu de la couleur à obtenir (jusqu'à 25 niveaux par composantes, cf. la classe Color).

Pour un exemple cf. FullScreen sous android.

Mais dans certains cas (par exemple superposition d'objets graphiques qui doivent laisser transparaître l'image du canevas de l'objet en dessous), il sera nécessaire de remplir le canevas avec du vide:

Dans ce cas, vous utiliserez:

canvas.drawColor( 0, android.graphics.PorterDuff.Mode.CLEAR ); Pour effacer la surface

A associer avec un SurfaceHolder.setFormat(PixelFormat.TRANSLUCENT); pour rendre transparent la surface. Et certainement à l'affichage en avant plan forcé de la SurfaceView

Vous pouvez aussi avoir besoin de remplir le fond avec une image. Dans ce cas, vous utiliserez un bitmap.

Dessiner un Pixel

La méthode pour dessiner un pixel ou un point se nomme drawPoint(float x, float y, Paint paint)

Canvas.drawPoint(float x, float y, Paint paint);

x, y sont donc les coordonnées, en float. Dans l'immédiat, ils ne serviront pas, considérons donc uniquement les valeurs entières.

paint est une instance de la classe Paint. Cette classe contiendra la couleur du point ainsi que la taille de celui-ci (et bien d'autres choses, mais qui ne serviront pas pour dessiner un point).

package fr.free.supertos; import java.util.Random; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.os.Bundle; import android.view.View; import android.view.Window; import android.view.WindowManager; public class PixelActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Desactiver la barre de titre de notre application requestWindowFeature(Window.FEATURE_NO_TITLE); // Passer la fenêtre en full-creen == cacher la barre de notification getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(new RenderView(this)); } // Création d'une classe interne RenderView pour gérer un affichage simple permettant // de montrer que nous occupons bien tout l'écran class RenderView extends View { public RenderView(Context context) { super(context); } // Dessinons sur la totalité de l'écran protected void onDraw(Canvas canvas) { canvas.drawRGB(0, 0, 0); // Instance de Paint pour définir l'attribut couleur de notre point, ainsi que // sa taille. Paint paint = new Paint(); // Nous allons dessiner nos points par rapport à la résolution de l'écran int iWidth = canvas.getWidth(); // Largeur int iHeight = canvas.getHeight(); // Hauteur Random rand = new Random(); //Affichons 10000 points de toutes les couleurs for (int i=0; i < 10000; i++) { // Affecter une couleur de manière aléatoire paint.setARGB(255, rand.nextInt(256), rand.nextInt(256), rand.nextInt(256)); // Puis dessiner nos points dans le canevas canvas.drawPoint(rand.nextInt(iWidth), rand.nextInt(iHeight), paint); } } } }

Dessiner une ligne

Pour dessiner une ligne, vous utiliserez la méthode suivante du canvas:

Canvas.drawLine(float x, float y, float x1, float y1, Paint paint);

Plutôt classique, vous allez indiquer les coordonnées de départ et d'arrivée du segment...

Là encore, la classe Paint est utilisée pour définir la couleur, mais aussi la taille de la ligne ou l'antialiasing.

package fr.free.supertos;

import java.util.Random;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

public class LineActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Desactiver la barre de titre de notre application
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // Passer la fenêtre en full-creen == cacher la barre de notification
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(new RenderView(this));
    }

    // Création d'une classe interne RenderView pour gérer un affichage simple permettant 
    // de montrer que nous occupons bien tout l'écran
    class RenderView extends View {

        public RenderView(Context context) {
            super(context);
        }

        // Dessinons sur la totalité de l'écran
        protected void onDraw(Canvas canvas) {
            canvas.drawRGB(0, 0, 0);
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            
            // Nous allons dessiner nos points par rapport à la résolution de l'écran
            int iWidth = canvas.getWidth(); // Largeur
            int iHeight = canvas.getHeight(); // Hauteur
            
            Random rand = new Random();
            //Affichons 100 segments de toutes les couleurs
            for (int i=0; i < 100; i++)
            {
            	// Affecter une couleur de manière aléatoire
            	paint.setARGB(255, rand.nextInt(256), rand.nextInt(256), rand.nextInt(256));
            	// Définir l'épaisseur du segment
            	paint.setStrokeWidth (rand.nextInt(10));
            	// Puis dessiner nos points dans le cavenas
            	canvas.drawLine(rand.nextInt(iWidth), rand.nextInt(iHeight), rand.nextInt(iWidth), rand.nextInt(iHeight), paint);	
            }            
        }
    }	
}

Dessiner un rectangle

Dans le même principe, vous dessinerez des rectangles via Canvas.drawRect(float topleftX, float topleftY, float bottomRightX, float bottomRightY, Paint paint).

Image non trouvée ! N'oubliez pas le style pour avoir un simple rectangle ou un rectangle plein.

Vous indiquerez les coordonnées en haut à gauche et en bas à droite pour dessiner le rectangle correspondant.

Vous avez déjà suffisement d'exemples pour savoir faire celui-ci non ?

Dessiner un rectangle aux coins arrondies

Après le rectangle, voici le rectangle avec coins arrondies. Les coordonnées passeront cette fois-ci par une instance Rect de type flottant.

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

Image non trouvée ! La aussi, n'oubliez pas le style.

Dessiner un cercle

La méthode Canvas.drawCircle(float centerX, float centerY, float radius, Paint paint) vous permettra de dessiner un cercle.

Vous indiquez les coordonnées du centre du cercle ainsi que son rayon, et le tour est joué.

Image non trouvée ! Vous avez peut-être pris l'habitude depuis quelques années de dessiner une cercle à partir des coordonnées supérieure gauche et inférieure droit d'un carré. Hors, ici, il s'agit bien du centre du cercle. Voyez la méthode suivante pour dessiner à partir d'un rectangle !

Image non trouvée ! La aussi, n'oubliez pas le style.

Dessiner une ovale

Voici une méthode pour dessiner une ovale/ellipse. Cette fois-ci, vous positionnerez (via Rect) un rectangle dans lequel sera dessiné votre ovale.

drawOval(RectF oval, Paint paint)

Image non trouvée ! La aussi, n'oubliez pas le style.

Annexes

Il existe une solution plus statique pour dessiner dans le background d'un widget. Il s'agit d'utiliser un fichier xml dans lequel vous definissez les shapes.