Programmation avancée avec MIDlet Pascal


précédentsommairesuivant

Comment dessiner à l'écran ?

Fonctions de dessin

Nous savons déjà comment dessiner un texte à l'écran en utilisant drawText.
Pour rappel :

 
Sélectionnez
procedure drawText(text: string, xPos, yPos: integer);

Vous pouvez dessiner du texte à l'écran avec différentes polices.

 
Sélectionnez
procedure setFont(fontFace, fontStyle, fontSize);

Il est également possible de dessiner des formes :

  • drawArc dessine un arc couvrant un rectangle, débutant de startAngle et allant à arcAngle

Exemple

 
Sélectionnez
procedure drawArc(x, y, width, height, startAngle, arcAngle: integer);
begin 
   drawArc(0, 0, 20, 20, 0, 90); 
   repaint; 
   Delay(1000); 
end.
  • drawEllipse dessine une ellipse sur l'écran.
 
Sélectionnez
procedure drawEllipse(x, y, width, height: integer);
begin  
   drawEllipse(0, 0, 20, 20);  
   repaint;  
   delay(1000);  
end.
  • fillEllipse dessine une ellipse remplie d'un fond uni, vous pouvez choisir la couleur de fond en utilisant setColor
 
Sélectionnez
procedure fillEllipse(x, y, width, height: integer); 
begin 
    fillEllipse(0, 0, 20, 20); 
    repaint; 
    delay(1000); 
end.
  • drawLine dessine une ligne entre le point de coordonnées (x1, y1) et le point de coordonnées (x2, y2)
 
Sélectionnez
procedure drawLine(x1, y1, x2, y2: integer);
  • drawRect dessine un rectangle
 
Sélectionnez
procedure drawRect(x, y, width, height: integer);
  • fillRect dessine un rectangle plein, vous pouvez également choisir la couleur de fond avec setColor
 
Sélectionnez
procedure fillRect(x, y, width, height: integer);
  • drawRoundRect dessine un rectangle avec des bords arrondis
 
Sélectionnez
procedure drawRoundRect(x, y, width, height, arcWidth, arcHeight: integer);
  • fillRoundRect dessine un rectangle plein avec des bords arrondis
 
Sélectionnez
procedure fillRoundRect(x, y, width, height, arcWidth, arcHeight: integer);

Concernant l'utilisation de la procédure repaint : après chaque procédure (drawLine, drawText, etc) repaint effectue la copie sur l'écran de ce qui est dessiné dans le buffer par (drawText, drawLine, etc) sur l'écran.

Les couleurs

Une des questions qu'on aura tendance à se poser est : comment afficher un texte avec une certaine couleur?
Il existe différentes procédures ou fonctions pour manipuler et utiliser les couleurs avec MIDlet Pascal.

setColor qui permet de définir la couleur à utiliser pour dessiner sur l'écran. Le principe utilisé est la notation RGB (Red Green Blue)

 
Sélectionnez
procedure setColor(red, green, blue:integer);

Les couleurs peuvent prendre des valeurs comprises entre 0 et 255. Par exemple pour représenter la couleur noire, on fera setColor(0, 0, 0);.
Exemple

 
Sélectionnez
begin 
    setColor(0, 0, 255);  
    drawText('Hello world', 0, 0); 
    repaint; 
    delay(1000); 
end.

Il peut arriver de se demander si le téléphone cible d'une application peut afficher les couleurs utilisées dans l'application. La fonction isColorDisplay permet de le savoir.

 
Sélectionnez
function isColorDisplay:boolean;

Elle retourne true si l'écran peut afficher les couleurs et false sinon.
Une fois que nous savons que nous pouvons afficher les couleurs, il est possible de connaître le nombre couleurs que peut afficher l'écran avec la fonction getColorsNum.

 
Sélectionnez
function getColorsNum:integer;

Exemple

 
Sélectionnez
begin
	drawText (integerToString(getColorsNum), 0, 0);
   {affiche 4096 sur l'émulateur}
    repaint;
    delay(1000);
end;

Les images

Pour charger une image utilisez le menu import ressource file ou créez-en avec new image ressource. Vous ne pouvez afficher une image sans l'avoir chargée au préalable; la fonction à utiliser à cet effet est loadImage.

 
Sélectionnez
function loadImage(resource: string): image

Cette fonction charge une image et renvoie un objet image.

Quand vous allez déployer une application sur un téléphone portable, quand vous exécutez un code avec un émulateur ce sont les fichiers jar et jad qui sont appelés; le chargement d'une image a donc lieu à partir du jar, veillez donc à précéder le nom de fichier image du caractère slash /.

Exemple

 
Sélectionnez
begin 
    drawImage(loadImage('/icon.png'), 0, 0); 
    repaint;  
end.

Une fois l'image chargée comme vu dans l'exemple ci-dessus, affichez-la avec drawImage

 
Sélectionnez
procedure drawImage(img: image; x, y: integer);

Les propriétés que vous pouvez utiliser sur une image sont :

  • getImageHeight qui retourne la hauteur d'une image
 
Sélectionnez
function getImageHeight(img: image): integer;
  • getImageWidth qui retourne la largeur d'une image
 
Sélectionnez
function getImageWidth(img: image): integer;

Autres fonctions

  • getWidth qui retourne la taille en largeur de l'écran.
 
Sélectionnez
function getWidth: integer;
  • getHeight qui retourne la taille en hauteur de l'écran
 
Sélectionnez
function getHeight: integer;

Exemple

 
Sélectionnez
begin 
    drawRec(0, 0, getWidth, getHeight); 
    Repaint; 
    Delay(1000); 
end.
  • imageFromImage permet de créer une partie d'une autre image chargée.
 
Sélectionnez
 function imageFromImage(sourceImg: image; x: integer; y: integer; width: integer;height: integer ): image ;

Exemple

 
Sélectionnez
begin
  drawImage(imageFromImage ( loadImage('/icon.png'),0 ,0, 5, 5), 0, 0); 
  repaint;
  delay(1000);
end.

Maintenant que nous savons gérer l'appui des touches, dessiner sur l'écran, nous pouvons faire un exemple simple de menu.

 
Sélectionnez
Const nbMenus=5;

var    
       choix   :array[1..nbMenus] of String;
	     choixPos:integer;
	     y       :integer;
	      
  procedure choixMenus;
	var 
      x   :integer;
	    key :integer;
	   
	begin
	    key:=GetKeyClicked; {Récupérer la touche appuyée}
	   
      if (KeyToAction(key)=GA_RIGHT )  then {Si touche de direction droite appuyée}
      begin
         if ( (choixPos + 1) =6) then
            choixPos:=0;{position de l'index sur le 0}
          {Il s'agit de parcourir le tableau de chaînes représentant les menus}  
          choixPos:=choixPos + 1 ;  {Incrémenter l'index du tableau} 
          {On décide de dessiner le texte au milieu l'écran
           getStringWidth permet d'avoir la largeur de la chaîne dessinée }
          x:=(getWidth - getStringWidth(choix[choixPos]))/2;
          
          setcolor(255,255,255);
          DrawText(choix[choixPos],x,y);
          {Faire semblant d'effacer l'ancien texte dessiné}
          fillrect(0,y,getWidth,getStringHeight(choix[choixPos]));
           
          setcolor(0,0,0);
          DrawText(choix[choixPos],x,y);
          
          repaint
      end
      {Les explications précédentes sont les mêmes sauf qu'ici les opérations 
       s'effectuent lors de l'appui sur la touche de direction gauche}
      else if( (KeyToAction(key)=GA_LEFT ))  then
      begin
          if ( (choixPos - 1) =0) then
            choixPos:=6;
            
          choixPos:=choixPos - 1 ;
          x:=(getWidth - getStringWidth(choix[choixPos]))/2;
          
          setcolor(255,255,255);
          DrawText(choix[choixPos],x,y);
          fillrect(0,y,getWidth,getStringHeight(choix[choixPos]));
           
          setcolor(0,0,0);
          DrawText(choix[choixPos],x,y);
          repaint
         
      end
      
      if (KeyToAction(key)=GA_FIRE ) then
      begin
          {ACTION} 
      end
	
  end;

  //procedure pour quitter
  function quitter :boolean ;
  begin
    quitter:=((choixPos=5) and (KeyToAction(GetKeyPressed)=GA_FIRE ));
  end;

begin
  //Initialisations
    choix[1]:='< Jouer >';
	choix[2]:='< Options >';
	choix[3]:='< Aide >';
	choix[4]:='< A propos >';
	choix[5]:='< Quitter >';
	choixPos:=1;
	y := getHeight / 2;{milieu de l'écran sur la longueur}
	
	SetFont(FONT_FACE_SYSTEM, FONT_STYLE_BOLD , FONT_SIZE_LARGE);    
  drawText(choix[choixPos],(getWidth - getStringWidth(choix[choixPos]))/2,y);
  repaint;
         
  repeat
     choixMenus;
  until quitter;
end.

précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 AKAKPO-TOULAN Jules. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.