Extrait
Figure 4-13. Courbe de Bézier quadratique
Pour mieux comprendre ce qu'est une courbe de Bézier quadratique, nous partons d'un segment de droite P1 P2 et ajoutons un troisième point C12 en dehors de ce segment. La courbe de Bézier passe par les points de contrôle P1 et P2, et approche seulement le point C12. Imaginons que C12 exerce une certaine attraction sur le segment et le déforme en une courbe régulière.
Voici une approche possible pour définir la courbe obtenue. Nous partons du triangle P1C12P2.
Figure 4-14. Construction de la quadratique de Bézier
Nous plaçons un point A1 à 30% du segment P1 C12 ainsi que A2 à 30% de C12 P2. Nous joignons ces points et plaçons B à 30% du segment A1 A2 obtenu. Ce point B appartient à la courbe de Bézier.
En répétant cette construction en changeant le rapport de 0% à 100% avec un pas de 10%, nous obtenons la figure centrale. Tous les segments construits sont des tangentes à la courbe - ils constituent l'enveloppe convexe de la courbe - et tous ces points B appartiennent à la courbe de Bézier qui n'est dans ce cas qu'une simple parabole. Voici ses caractéristiques:
La tangente à la courbe en P1 est dirigée vers C12. La tangente en P2 est également dirigée vers C12. La courbe est contenue dans triangle P1C12P2. Si les points P1,C12,P2 sont colinéaires (alignés), la courbe est un segment de droite. La courbe est convexe.
Utilisons maintenant cette courbe en SVG en la plaçant dans un élément <path>.
Nous avons donc de nouvelles commandes quadratic Bézier curveto Q et q.
Syntaxe:
Q|q x1, y1, x, y
x1 = x du point de contrôle
y1 = x du point de contrôle
x = x du nouveau point
y = y du nouveau point
La commande Q nécessite comme paramètres les coordonnées de deux points. La première paire de coordonnées définit notre point de contrôle C12 et la seconde le point de fin de tracé P2 . P1 est défini par le point courant de notre tracé. Utilisons cette commande pour dessiner un vase.
Figure 4-15. Vase fait de courbes de Bézier quadratiques
( voir cette image comme svg )
<path
stroke="sienna" stroke-width="2" fill="none"
d="M 80,180
Q
50,120 80,60
Q
90, 40 80,20
Q 100, 20 120,20
Q 110, 40 120,60
Q 150,120 120,180
Z" />
Nous démarrons notre tracé au point (80,180) avec la commande M . Ensuite nous traçons la courbe de Bézier contrôlée par le point (50,120) et se terminant en (80,60). Nous continuons avec une autre commande Q avec le point de contrôle (90,40) et se terminant en (80,20). La commande suivante pourrait être remplacée par L120,20 pour tracer le haut du vase.
Notez que si nous voulons préserver la continuité du tracé en passant d'une courbe de Bézier à la suivante, les tangentes doivent être les mêmes et les points de contrôle alignés. La figure 4-16 illustre bien notre propos, seule la figure de gauche garde sa continuité.
Figure
4-16.
Tangentes
aux points de raccordement
( voir cette image comme svg )
Comme nous avons souvent besoin de tels tracés continus, SVG propose une commande spécifique smooth quadratic bézier curveto T ou t.
Syntaxe:
T|t x, y
x = x du nouveau point
y = y du nouveau point
Figure
4-17. Points
de contrôle automatiques
( voir cette image comme svg )
Cette
commande T demande simplement les
coordonnées du nouveau point, fin de tracé de la courbe de Bézier.
Le point de contrôle pour ce tracé est créé automatiquement, il est le symétrique
du précédent point de contrôle par rapport au point courant.
Ceci
suppose évidemment qu'une commande Q soit utilisée avant les commandes T.
Et maintenant notre automobile avec
des courbes de Bézier quadratiques.
Figure 4-18. Automobile et quadratiques de Bézier