Courbe de Bezier quadratique SVG: Un outil pour dessiner des bords lisses

Cet article explorera comment dessiner des bords lisses à l'aide des courbes de Bezier quadratiques dans HTML5 SVG. La courbe de Bezier quadratique est définie par l'instruction d dans l'attribut SVG Path Q, avec un point de départ et d'évaluation, et la courbe est pliée par un seul point de contr?le.

Points clés:

L'instruction
• dans l'attribut d svg path Q est utilisée pour définir une courbe de Bezier quadratique, qui contient trois coordonnées: le point de départ, le point de contr?le et le point final.
• Utilisez les lettres minuscules q pour spécifier des coordonnées relatives, tandis que les instructions T et t peuvent être utilisées pour connecter plusieurs courbes. la courbe.
• Bien que le codage et la visualisation des courbes quadratiques Bezier peuvent être difficiles, le code <path></path> peut être généré à l'aide de l'outil.
• Les courbes de Bezier quadrifères peuvent être utilisées pour créer des formes complexes et peuvent être animées via des éléments <animate></animate>, des animations CSS ou JavaScript.

L'article précédent "Comment créer des chemins complexes dans SVG" explore les éléments <path></path> et montre comment dessiner une série de segments de ligne et d'arcs pour créer n'importe quelle forme (souvent utilisé pour copier des polices sans télécharger la police complète). . La propriété d fournit quelques astuces supplémentaires pour dessiner des courbes lisses. Cet article discutera des courbes Quadratic Bezier, et vous pouvez également vous référer à "Comment dessiner des courbes Cubic Bezier sur les images SVG" pour des options plus complexes.

Qu'est-ce qu'une courbe de Bezier quadratique?

La courbe de Bezier quadratique a un point de départ (P0) et un point final (P2). Un seul point de contr?le (P1) détermine la courbure de la ligne. La page Curve Bezier de Wikipedia fournit une bonne illustration générée:

Les images proviennent de Wikipedia

Les amateurs de mathématiques peuvent également voir les équations induisant les maux de tête sur Wolfram Mathworld.

Les courbes quadrilatères sont idéales pour dessiner des bords lisses. Comme le montre la figure ci-dessous, il est facile de spécifier un point de contr?le, et généralement les bords d'angle droit apparaissent:

chemin complexe

La courbe de Bezier quadratique utilise la définition d'instruction d dans l'attribut Q du chemin SVG:

<path d="M100,250 Q250,100 400,250" />

initiale M déplace le stylo au premier point (100 250). Q est suivi de deux coordonnées: un seul point de contr?le (250,100) et le point de dessin final (400 250).

Vous pouvez également utiliser la lettre minuscule q pour représenter des coordonnées relatives au lieu de coordonnées absolues. La courbe suivante sera la même et peut être plus facile à coder:

<path d="M100,250 Q250,100 400,250" />

Enfin, il y a des instructions abrégées T et t (généralement, les lettres minuscules représentent des coordonnées relatives plut?t que des coordonnées absolues). Ces instructions acceptent les coordonnées finales supplémentaires pour connecter plusieurs courbes ensemble. Les points de contr?le sont déduits du dernier point utilisé pour assurer une courbe continue parfaite continue. Par exemple, considérez le chemin suivant:

<path d="M100,250 q150,-150 300,0" />

Il tire une courbe de 100 250 à 400 250 avec le point de contr?le à 250 100. Une autre courbe est ensuite dessinée, se terminant à 700 250, et le point de contr?le est déduit à 550 400.

Les points de contr?le inférés sont mathématiquement corrects, mais ne sont peut-être pas toujours ce dont vous avez besoin!

Les courbes quadratiques de Bezier peuvent être un peu difficiles à coder et à visualiser, vous pouvez donc utiliser l'outil de génération rapide pour générer un code <path></path> pour vous:

Codepen Link

Faites glisser les points de contr?le aux deux extrémités de la courbe. Cliquez sur la courbe elle-même pour basculer l'effet de remplissage, qui ajoute la commande fin Z.

Veuillez noter que cet outil doit convertir les coordonnées de page DOM en coordonnées SVG pour vous assurer qu'elle fonctionne correctement pour toutes les tailles d'écran. Cela peut être un peu plus compliqué que prévu, alors reportez-vous à "Comment convertir des coordonnées DOM en coordonnées SVG et retour" pour plus de détails.

Si vous êtes prêt à faire face à des problèmes plus complexes, essayez de créer une courbe Cubic Bezier sur une image SVG.

(La partie FAQ mentionnée dans le texte d'origine doit être ajoutée ici, le contenu a été donné dans le texte d'origine et ne sera pas répété ici)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!