Écrire sur une toile
Un dessin a souvent besoin de mots : un titre, un score, une légende. La fonction label écrit du texte sur une toile. Bien la maîtriser fait toute la différence entre un dessin brouillon et une image soignée.
Écrire un texte
t est une toile
dimension(t, 400, 200)
remplir(t, #FFFFFF)
label(t, 20, 40, 'Texte par défaut')
label(t, 20, 80, 'En bleu', #1D9BF0)
label(t, 20, 130, 'En grand et en rouge', #E5484D, 28)
affiche t
label(toile, x, y, texte, couleur, taille) : la couleur et la taille sont facultatives. Sans elles, le texte est noir, en taille 14. La taille va de 1 à 100.
Où se place le texte ?
Pour un rectangle, x et y désignent le coin en haut à gauche. Pour un texte, c'est différent : le point (x, y) est le début de la ligne d'écriture, celle sur laquelle les lettres sont posées. Le texte s'écrit donc au-dessus de y.
t est une toile
dimension(t, 400, 160)
remplir(t, #FFFFFF)
ligne(t, 0, 100, 400, 100, #E5484D, 1)
cercle(t, 40, 100, 4, #E5484D)
label(t, 40, 100, 'Bonjour Coddy', #111827, 36)
affiche t
Le texte est posé sur la ligne rouge, et commence au point rouge. Seules les queues des lettres comme le j ou le y descendent en dessous.
Question : On écrit label(t, 10, 0, 'Titre', #000000, 20). Que voit-on ? — Presque rien : le texte est au-dessus de la toile. Le texte s'écrit au-dessus de y. Avec y à 0, il est hors de la toile. Pour un texte de taille 20 en haut de la toile, il faut un y d'environ 20.
Centrer un texte
Pour centrer, il faut connaître la largeur du texte. label_largeur(texte, taille) la donne en pixels. Le calcul : on retire cette largeur à celle de la toile, et on partage l'espace restant en deux.
t est une toile
dimension(t, 400, 200)
remplir(t, #0D1117)
procédure centrer(message, hauteur, teinte, corps)
largeur est un nombre vaut label_largeur(message, corps)
label(t, (400 - largeur) / 2, hauteur, message, teinte, corps)
fin procédure
appelle centrer('CoddyRun', 80, #58A6FF, 44)
appelle centrer('Apprendre à programmer', 125, #E6EDF3, 18)
appelle centrer('en français', 150, #8B949E, 14)
affiche t
La procédure centrer fonctionne pour n'importe quel texte et n'importe quelle taille. Change les mots : ils restent centrés.
De la même façon, pour aligner à droite, on place le texte à 400 - largeur - marge.
Une ombre
Pour qu'un titre ressorte, on l'écrit deux fois : d'abord en sombre, légèrement décalé, puis en clair par-dessus.
t est une toile
dimension(t, 400, 160)
dégradé(t, [#F97316, #EC4899])
label(t, 53, 98, 'Bravo !', #7C2D12, 72)
label(t, 50, 95, 'Bravo !', #FFFFFF, 72)
affiche t
Le décalage de 3 pixels vers la droite et vers le bas suffit à créer l'effet. L'ordre compte : l'ombre d'abord, le texte ensuite.
Incliner un texte
label accepte un dernier argument : un angle en degrés, entre -180 et 180. Le texte tourne autour de son point de départ.
t est une toile
dimension(t, 400, 240)
remplir(t, #FFFFFF)
label(t, 40, 200, 'Axe vertical', #6B7280, 14, -90)
label(t, 120, 200, 'Ça monte', #16A34A, 22, -30)
label(t, 120, 40, 'Ça descend', #E5484D, 22, 30)
affiche t
Un angle négatif fait monter le texte, un angle positif le fait descendre. Avec -90, le texte s'écrit de bas en haut : idéal pour le titre d'un axe vertical.
Des étiquettes sur un graphique
Tout réuni : un diagramme en barres, avec la valeur centrée au-dessus de chaque barre et le nom en dessous.
t est une toile
dimension(t, 400, 260)
remplir(t, #FFFFFF)
noms est un tableau vaut ['Léa', 'Tom', 'Inès', 'Sam']
points est un tableau vaut [120, 85, 150, 60]
gauche est un nombre
haut est un nombre
largeur est un nombre
label(t, 20, 30, 'Scores de la semaine', #111827, 18)
pour i de 0 à longueur(noms) - 1
gauche vaut 40 + i * 90
haut vaut 220 - points[i]
rectangle(t, gauche, haut, 60, points[i], tls(210, 80, 40 + i * 10))
largeur vaut label_largeur(points[i], 13)
label(t, gauche + (60 - largeur) / 2, haut - 6, points[i], #111827, 13)
largeur vaut label_largeur(noms[i], 13)
label(t, gauche + (60 - largeur) / 2, 240, noms[i], #6B7280, 13)
fin pour
affiche t
Chaque étiquette est centrée sur sa barre : on part du bord gauche de la barre, et on ajoute la moitié de l'espace libre, (60 - largeur) / 2.
label_hauteur(taille) donne la hauteur d'une ligne de texte. Pratique pour espacer régulièrement plusieurs lignes : on ajoute cette valeur à y à chaque nouvelle ligne.
En résumé
label(toile, x, y, texte, couleur, taille, angle) écrit un texte ; les trois derniers arguments sont facultatifs.- Le point (x, y) est le début de la ligne d'écriture : le texte est au-dessus.
label_largeur(texte, taille) permet de centrer ou d'aligner à droite.- Écrire deux fois, avec un petit décalage, crée une ombre.
