Contrôle de la distorsion lors de la mise à l’échelle

En règle générale, lorsqu’un objet d’affichage est mis à l’échelle (s’il est étiré horizontalement, par exemple), la distorsion résultante est répartie équitablement dans l’objet, de sorte que chaque partie soit soumise à un étirement identique. Pour les graphiques et éléments de conception, cette technique correspond probablement au résultat escompté. Toutefois, il est parfois préférable de garder le contrôle sur les parties de l’objet qui seront étirées et celles qui ne le seront pas. Un exemple courant est celui d’un bouton représenté par un rectangle aux angles arrondis. Lors d’une mise à l’échelle normale, les angles du bouton sont étirés, entraînant ainsi la modification de leur rayon lorsque le bouton est redimensionné.

Mais dans ce cas précis, il serait préférable de contrôler la mise à l’échelle, c’est-à-dire de pouvoir désigner certaines zones qui seront mises à l’échelle (les côtés) et celles qui ne le seront pas (les angles), afin que le changement d’échelle ne provoque pas de distorsion visible.

Vous disposez de la mise à l’échelle à 9 découpes (Echelle-9) pour créer des objets d’affichage dont vous contrôlez le mode de mise à l’échelle. La mise à l’échelle à 9 découpes permet de diviser l’objet d’affichage en neuf rectangles distincts (grille de 3 sur 3). Ces rectangles ne sont pas obligatoirement de la même taille, car l’utilisateur choisit l’emplacement des lignes de séparation. Tout contenu placé dans les quatre rectangles de coin (tels que les angles arrondis d’un bouton) n’est ni étiré, ni comprimé lors de la mise à l’échelle de l’objet d’affichage. Les rectangles placés en haut au centre et en bas au centre sont mis à l’échelle horizontalement, mais non verticalement, tandis que les rectangles centraux de gauche et de droite sont mis à l’échelle verticalement, mais non horizontalement. Le rectangle central est mis à l’échelle horizontalement et verticalement.

Ainsi, si vous créez un objet d’affichage et souhaitez qu’une partie du contenu ne subisse jamais de mise à l’échelle, il vous suffit de placer les lignes de séparation de la grille de mise à l’échelle à 9 découpes de telle sorte que ce contenu se trouve dans l’un des rectangles des angles.

En ActionScript, il suffit de définir une valeur pour la propriété scale9Grid d’un objet d’affichage pour activer la mise à l’échelle à 9 découpes pour cet objet et définir la taille des rectangles de la grille. Vous utilisez une occurrence de la classe Rectangle en tant que valeur de la propriété scale9Grid , comme suit :

myButton.scale9Grid = new Rectangle(32, 27, 71, 64);

Les quatre paramètres du constructeur Rectangle sont la coordonnée x, la coordonnée y, la largeur et la hauteur. Dans cet exemple, l’angle supérieur gauche du rectangle est placé au point x : 32, y : 27 sur l’objet d’affichage appelé myButton . Le rectangle mesure 71 pixels de large et 64 pixels de haut (son bord droit correspond à la coordonnée x 103 sur l’objet d’affichage et son bord inférieur à la coordonnée y 92 sur l’objet d’affichage).

La zone figurant dans la région définie par l’occurrence de Rectangle représente le rectangle central de la grille Echelle-9. Les autres rectangles sont calculés par Flash Player et AIR en prolongeant les côtés de l’occurrence de Rectangle, comme indiqué :

Dans ce cas de figure, lorsque la mise à l’échelle du bouton augmente ou diminue, les angles arrondis ne sont ni étirés, ni comprimés, mais les autres zones sont ajustées en conséquence.

Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.