Border radius sur les textes
Les Fresques ont besoin d’un effet « bouton » ce qui correspond à avoir un border radius sur un rectangle d’arrière plan. À noter que dans Canva elles avaient un effet très étrange mais dans notre cas, on peut se contenter d’un grand rectangle "arrondi" du type de « agis pour le climat » (cf. capture d’écran).
Concrètement, il y a déjà quasiment ce qu’il nous faut avec le paramètre background
pour le texte.
Pour cet élément on peut :
- changer le padding (distance entre le texte et le bord du rectangle) ;
- l’activer ou le désactiver
- changer la couleur
- le déformer (transformation linéaire appliquée à chaque sommet).
Ces rectangles sont ensuite affichés dans le canvas en utilisant directement la fonction de dessin HTML Canvas :
context.beginPath();
context.moveTo(distortion[0][0], distortion[0][1]); // top-left
context.lineTo(distortion[1][0], distortion[1][1]); // top-right
context.lineTo(distortion[2][0], distortion[2][1]); // bottom-right
context.lineTo(distortion[3][0], distortion[3][1]); // bottom-left
context.lineTo(distortion[0][0], distortion[0][1]); // top-left
context.closePath();
// Konva specific method
context.fillStrokeShape(shape);
Pour l’export pdf, on fait exactement la même chose mais via un un élément svg:path
.
Je pense que le radius est la déformation sont deux choses qui ne seront pas activées en même temps : cela n’est pas très pertinent (?) et surtout un peu compliqué à faire (?).
La solution pour gérer le radius pourrait être d’utiliser la fonction arc
(voir cet exemple
On fait un lineTo
qui s’arrête un peu avant le coin, on dessine l’arc, et on reprend ensuite le lineTo
.
(pour faire la même chose en svg:path
, regarder la fonction makeHitformFunction
qui convertit un svg:path
en appels HTML5 canvas)
Tâches à faire :
- Ajouter un attribut dans la représentation
json
des eléments textes (background.radius
) - Décider de qui a la priorité entre la distortion et le radius. Est-ce qu’on affiche les deux ?
- Documenter l’argument
- Décider de l’unité pour l'angle de courbure
- Ajouter l’option
radius
dans le formulaire, sectionbackground
- Gérer l’affichage dans canvas
- Gérer l’export pdf