Comment dessiner à l'écran ?▲
Fonctions de dessin▲
Nous savons déjà comment dessiner un texte à l'écran en utilisant drawText.
Pour rappel :
procedure drawText(text: string, xPos, yPos: integer);Vous pouvez dessiner du texte à l'écran avec différentes polices.
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
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.
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
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)
procedure drawLine(x1, y1, x2, y2: integer);- drawRect dessine un rectangle
procedure drawRect(x, y, width, height: integer);- fillRect dessine un rectangle plein, vous pouvez également choisir la couleur de fond avec setColor
procedure fillRect(x, y, width, height: integer);- drawRoundRect dessine un rectangle avec des bords arrondis
procedure drawRoundRect(x, y, width, height, arcWidth, arcHeight: integer);- fillRoundRect dessine un rectangle plein avec des bords arrondis
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)
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
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.
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.
function getColorsNum:integer;Exemple
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.
function loadImage(resource: string): imageCette 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
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
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
function getImageHeight(img: image): integer;- getImageWidth qui retourne la largeur d'une image
function getImageWidth(img: image): integer;Autres fonctions
- getWidth qui retourne la taille en largeur de l'écran.
function getWidth: integer;- getHeight qui retourne la taille en hauteur de l'écran
function getHeight: integer;Exemple
begin
drawRec(0, 0, getWidth, getHeight);
Repaint;
Delay(1000);
end.- imageFromImage permet de créer une partie d'une autre image chargée.
function imageFromImage(sourceImg: image; x: integer; y: integer; width: integer;height: integer ): image ;Exemple
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.
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.