Courber du texte autour d'un cercle avec un canvas, et pourquoi cela échoue pour les ovales

L'un des outils de bureau de notre propre tableau de bord d'administration est un créateur de tampons : le genre de chose qui dessine un tampon encreur circulaire ou ovale avec du texte courbé autour du bord, comme se lit un vrai tampon en caoutchouc. C'est une petite fonctionnalité, mais c'est un bon exemple d'un problème qui paraît simple (« il suffit de courber le texte ») jusqu'à ce qu'on essaie réellement de le dessiner.

La technique rotation-translation

On ne peut pas courber une ligne de texte le long d'une courbe directement : un canvas dessine les glyphes en ligne droite. L'astuce classique consiste à dessiner un caractère à la fois : faire pivoter le système de coordonnées du canvas d'un petit angle, translater vers le rayon du cercle, dessiner un seul caractère, puis annuler la rotation et recommencer pour le caractère suivant à un angle légèrement plus grand. Faites cela pour chaque caractère de l'étiquette et le résultat se lit comme un texte courbé harmonieusement, même si chaque glyphe individuel a été dessiné parfaitement droit : ce sont les petites rotations accumulées entre les caractères qui créent la courbe, pas quoi que ce soit de courbé dans les glyphes eux-mêmes.

Où cela échoue

Le bord d'un tampon ovale utilise une astuce différente : mettre à l'échelle l'ensemble du canvas de manière non uniforme (l'aplatir verticalement, disons), dessiner un cercle simple avec la fonction normale de dessin de cercle, puis annuler la mise à l'échelle. Comme les calculs de tracé (dessiner un cercle ici) survivent très bien à une visualisation à travers un système de coordonnées étiré, ce cercle ressort ressemblant à une ellipse une fois la mise à l'échelle annulée. C'est une façon élégante et peu coûteuse d'obtenir une géométrie ovale en n'utilisant que du code de dessin de cercle.

Essayez de combiner les deux astuces, du texte courbé à l'intérieur d'un espace de coordonnées mis à l'échelle de manière anisotrope (aplati), et tout s'effondre. Faire pivoter un caractère à l'intérieur d'un système de coordonnées étiré davantage dans une direction que dans l'autre ne fait pas que déplacer le caractère, cela le cisaille, de la même manière qu'un carré pivoté ressemble à un parallélogramme si le papier sur lequel il est dessiné avait déjà été étiré de façon inégale avant la rotation. Le bord ressemble toujours à une ellipse propre, car un tracé n'a jamais été pivoté à l'intérieur de cet espace étiré, seulement mis à l'échelle puis remis à l'échelle normale. Mais le texte nécessite une véritable rotation par caractère, et c'est exactement l'opération qui ne survit pas au trajet.

La solution honnête n'était pas une transformation plus astucieuse, c'était de reconnaître que les deux formes ont besoin d'un traitement différent. Les tampons circulaires reçoivent un texte correctement courbé, grâce à la technique rotation-translation. Les tampons ovales reçoivent à la place des étiquettes horizontales droites placées au-dessus et en dessous du bord, plutôt que de forcer un texte courbé à travers une transformation qui le déforme silencieusement. Parfois, la bonne réponse à « comment faire en sorte que cette technique gère un cas de plus » est qu'elle n'y arrive pas, et que la conception devrait le dire plutôt que de livrer un texte subtilement déformé que personne n'a demandé.