Admettons que nous voulons monitorer et afficher sous forme de courbe le fps d'une application.

La manière la plus simple à mettre en place est de passer par un Shape sur lequel on utilise l'API de dessin.

Cependant, si nous commencons à avoir plusieurs courbes à afficher en meme temps sur une grosse application, cela peut nous reduire de maniere importante les performances.

Une manière moins couteuse de dessiner un graphe est donc de passer par un BitmapData sur lequel on remplit les pixels nécessaires avec la bonne couleur.

Par exemple, admettons que nous avons les valeurs stockées sous la forme d'un vecteur:

var fpsValues : Vector.< Int >;

Nous partons du principe que nous remplissons le vecteur en ayant toujours un nombre maximal d'entrée inférieurs ou égal à la taille max du graphe, pour éviter d'avoir trop de données inutiles.

Attention: comme nous parlons en pixel, nous ne pouvons pas avoir de réels, seulement des entiers.

Pour optimiser encore plus la chose, nous n'allons pas redessiner a chaque frame le BitmapData. A la place, nous allons utiliser la fonction scroll() qui permet de decaler les pixels en x et/ou en y.

var bmp : Bitmap = new Bitmap( new BitmapData(GRAPH_WIDTH, GRAPH_HEIGHT, true, 0x0) ); // creation d'un bitmap transparent de la taille de notre graphe
addChild(bmp);

// Points qui vont nous permettre de dessiner le graphe
var px : int;
var py : int;

// boucle principale sur l'évènement ENTER_FRAME
private function loop(pEvt:Event):void
{
    bmp.bitmapData.lock();
    bmp.bitmapData.scroll(-1, 0); // decalage du graphe d'un pixel vers la gauche
    
    px = GRAPH_WIDTH - 1;
    py = fpsValues[ fpsValues.length - 1 ]; // derniere valeur de notre tableau
    
    bmp.bitmapData.fillRect(new Rectangle(px, 1, 1, GRAPH_HEIGHT), 0x00FF0000); // on ajoute une colonne de pixel transparent pour supprimer les pixels que nous avons dupliqués et décalés vers la gauche via la fonction scroll()
    bmp.bitmapData.setPixel32(px, py, 0xFFFF0000);
    
    bmp.bitmapData.unlock();
}

Du coup via cette technique, nous ne dessinons qu'un seul pixel du graphe par rafraichissement (passage dans la boucle loop). Nous avons maintenant une ligne de points à l'instant t.

Pour completer la courbe avec les lignes verticales, il suffit de comparer les deux points, et de tracer la ligne :

var previous_py : int = fpsValues[ fpsValues.length - 2 ];
if( Math.abs(py - previous_py) > 1 )
{
    bmp.bitmapData.fillRect(new Rectangle(px-1, (py > previous_py ? previous_py : py) + 1, 1, Math.abs(py - previous_py) - 1 ), 0xFFFF0000);
}

Bien entendu, nous prenons la valeur la plus basse comme point d'origine.

Attention: ne pas oublier de vérifier que la valeur en n-1 existe bien, pour ne pas soulever une exception