Canvas implémente la courbe de Bézier d'ordre élevé (générateur de courbe de Bézier d'ordre N)

Étant donné que le canevas natif ne prend en charge que les courbes de Bézier du troisième ordre, que dois-je faire si je souhaite ajouter plusieurs points de contrôle ? (Même les courbes les plus complexes peuvent être simulées avec Bézier de troisième ordre.) Dans le même temps, il nous est difficile de comprendre clairement la position des points de contrôle de Bézier de manière très intuitive. Dans quelle mesure pouvons-nous définir les points de contrôle pour former la courbe. on veut ? Afin de résoudre les deux problèmes ci-dessus, il ne semble pas y avoir de solution de niveau N (version js) dans la communauté, donc cette fois l'auteur est très sérieux au sujet de l'open source bezierMaker.js !

bezierMaker.js prend théoriquement en charge la génération de courbes de Bézier d'ordre N et fournit également un terrain de test permettant aux développeurs d'ajouter et de faire glisser des points de contrôle pour finalement générer un ensemble d'animations de dessin. Il est très intuitif pour les développeurs de connaître les différentes courbes de génération correspondant aux points de contrôle à différentes positions.

Si vous aimez ce travail, n'hésitez pas à jouer. Après tout, les étoiles se méritent durement. .

Adresse du projet : ici✨✨✨

Lorsque vous dessinez des courbes de Bézier complexes d’ordre élevé, vous ne pouvez pas connaître l’emplacement précis des points de contrôle de la courbe dont vous avez besoin. Lors de la simulation dans le champ de test, les valeurs des coordonnées des points de contrôle peuvent être obtenues en temps réel. Les coordonnées des points obtenues peuvent être converties en un tableau d'objets et transmises à la classe BezierMaker pour générer la courbe cible.

rendus

1. [x] N'importe quel nombre de points de contrôle peut être ajouté au site de test
2. [x] Le site de test prend en charge l'animation de formation du dessin de courbe.
3. [x] Les points de contrôle peuvent être déplacés librement
4. [x] Prend en charge l'affichage des lignes tangentes lors de la formation des courbes de Bézier
5. [x] Le dessin des courbes de Bézier d'ordre 3 et inférieur utilise une API native

 <script src=./bezierMaker.js></script>

Le rendu ci-dessus montre l'utilisation du site de test. Après avoir obtenu les coordonnées précises des points de contrôle via le site de test, vous pouvez appeler bezierMaker.js pour dessiner directement la courbe.

 /** * Objet DOM du canevas * Tableau de points de contrôle bezierCtrlNodesArr, y compris les coordonnées x, y * Couleur de la courbe de couleur */var canvas = document.getElementById('canvas')//Utiliser la méthode native pour implémenter avant le niveau 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]vararr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = nouveau BezierMaker(canvas, arr0, 'black')var bezier1 = nouveau BezierMaker(toile, arr1, 'rouge')var bezier2 = nouveau BezierMaker(toile, arr2, 'bleu')var bezier3 = nouveau BezierMaker(toile, arr3, 'jaune')var bezier4 = nouveau BezierMaker(toile, arr4, 'vert')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

Tracez les résultats

Lorsqu’il y a moins de 3 points de contrôle, l’interface API native sera utilisée. Lorsqu'il y a plus de 2 points de contrôle, la fonction que nous implémentons sera utilisée pour dessiner les points.

Tracer la courbe de Bézier

Le point central du dessin de la courbe de Bézier réside dans l'application de la formule de Bézier :

P0-Pn dans cette formule représente diverses opérations de puissance de chaque point et la proportion t du point de départ à chaque point de contrôle puis jusqu'au point final.

 BezierMaker.prototype.bezier = function(t) { //La formule de Bézier appelle var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //Tableau de points de contrôle n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (fonction (élément, index) { if (!index) { x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) } else { //factorial est la fonction factorielle x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math .pouvoir(( 1 - t ), n - index) * Math.pow(t, index) y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math. pow(( 1 - t ), n - index) * Math.pow(t, index) } }) return { x : x, y : y }}

Parcourez tous les points et calculez les coordonnées du point actuel x, y sur la courbe de Bézier en fonction de la valeur de la proportion actuelle t (0<=t<=1). L'auteur divise la valeur de t en 1000 parties, soit t+=0,01 pour chaque opération. Les x et y calculés à ce moment sont les points après que la courbe de Bézier soit divisée en 1000 parties. Lorsque la valeur t passe de 0 à 1 1 000 fois, 1 000 coordonnées x et y correspondantes sont générées et une courbe de Bézier d'ordre élevé peut être simulée en traçant des points et des lignes en séquence.

L'auteur expliquera spécifiquement le calcul de la formule de Bézier dans un article ultérieur. Il vous suffit maintenant de savoir que nous utilisons la formule de Bézier pour calculer que la courbe de Bézier réelle est divisée en 1000 points et que nous connectons ensuite les points avec des lignes droites. la courbe de classe peut être simulée.

Implémentation de l'animation générée par la courbe de Bézier dans le domaine de la simulation

Le code correspondant à cette pièce peut être trouvé ici

L'idée générale est d'utiliser une méthode récursive pour traiter chaque couche de points de contrôle comme une fonction de Bessel de premier ordre afin de calculer la couche de points de contrôle suivante et de les connecter en conséquence. L'auteur laissera la logique spécifique jusqu'à l'explication approfondie des principes de la formule de la courbe de Bézier pour démêler les principes de génération d'animation du site de test~

L'auteur a toujours voulu ouvrir quelque chose en source (mais il n'y a rien sur quoi il peut écrire). Cependant, tout ce qui est habituellement utilisé a été écrit par d'autres, et réinventer la roue ne peut pas être bien écrit par d'autres. Cette fois, j’ai trouvé une zone apparemment vide. J'ai donc pris la décision très solennelle de l'ouvrir en source libre. La plupart des applications avancées de Bézier dans gayhub sont des implémentations Android. Il existe encore de nombreux endroits dans le domaine front-end qui peuvent être développés. Les discussions sont les bienvenues ~ Beaucoup de critiques !

Adresse du projet : ici✨✨

Adresse du site de test : Assurez-vous de venir jouer✨✨✨

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.