Courbe De Bézier: Calculer Les Points
Je voudrais calculer un point sur une courbe quadratique. À utiliser avec l'élément canvas de HTML5.
Lorsque j'utilise le quadraticCurveTo()
fonction en JavaScript, j'ai un point de départ, un point cible et un point de contrôle.
Comment puis-je calculer le point sur l'courbe quadratique à disons t=0.5
avec "seulement" sachant cela, trois points?
Vous devez vous connecter pour publier un commentaire.
Utiliser le Bézier formule, on trouve, par exemple, sur la page Wikipedia pour Les Courbes De Bézier:
En pseudo-code, c'est
p[0]
est le point de départ,p[1]
est le point de contrôle, etp[2]
est le point de fin.t
est le paramètre qui va de 0 à 1.3 P = [3 * P.x, 3 * p.y]
etP1 + P2 = [P1.x + P2.x, P1.y + P2.y]
. Enfin, à carré quelque chose, vous multipliez avec lui-même: x2 =x * x
. La dernière partie, "t ∈ [1,0]", signifie que t est censé être entre 0 et 1.Dans le cas où quelqu'un a besoin de la forme cubique:
Dans le cas où quelqu'un a besoin de la nième forme, voici l'algorithme. Vous nourrissez il N points et il retournera un tableau de
N + (N-1) + (N-2) ...
points, cela résout à(N * (N*1)) /2
. Le dernier point est la position sur la courbe de la valeur de T.On nourrit l'algorithme 0 1 2 3 points de contrôle, et ces postes serait le reste de la matrice. Le dernier point (9) est la valeur que vous souhaitez.
C'est aussi la façon de diviser une courbe de bézier, vous lui donnez la valeur de
t
vous voulez vous déclarer la subdivisé courbe que les côtés de la pyramide. Ensuite, vous indexer les différents points sur le côté de la pyramide et de l'autre côté de la pyramide construite à partir de la base. Ainsi, par exemple dans quintic:(Pardon pour l'hexagone, je l'ai voulu assez)
Vous répertorierait les deux parfaitement subdivisé les courbes de 0, 5, 9, C, E et E, D, B, 8, 4. Prenez note spéciale pour voir la première courbe commence avec un point de contrôle (0) et se termine sur un point de la courbe (E) et la deuxième courbe commence sur la courbe (E) et se termine sur le point de contrôle (4) en raison de cela, vous pouvez parfaitement diviser une courbe de bézier, c'est ce que vous attendez. Le nouveau point de contrôle de liaison entre les deux courbes est sur la courbe.
Vous remarquerez que c'est juste la formule de la somme dans chaque ensemble de points. Pour les N solutions, vous obtenez (N-1) points centraux à la valeur (t) puis, à partir de ce que vous prenez les milieux de ceux-ci et d'obtenir des (N-2) points, alors (N-3) points, etc jusqu'à ce que vous avez juste un point. Ce point est sur la courbe. Afin de résoudre la chose pour des valeurs comprises entre 0, 1 t, vous donnera l'ensemble de la courbe. Sachant cela, ma mise en œuvre il y a tout juste propage les valeurs de l'avant dans un tableau d'économie recalculer plus d'une fois. Je l'ai utilisé pour 100s de points et c'est toujours aussi rapide que l'éclair.
(dans le cas où vous êtes étonnant, non, c'est pas vraiment la peine. SVG est en droit de s'arrêter au cube).
J'ai créé cette démo :
Exemple complet ici
peut aider quelqu'un.
cubic
fonction. il renvoie 3 réponses que j'ai utilisé juste de première réponse. voir 1728.org/cubic.htmJ'ai édité talkhabis réponse (courbe cubique) de sorte que la courbe est affichée avec les bonnes coordonnées. (Ne pouvait pas les commentaires)
Les coordonnées Y a besoin d'être modifié (-p[].y+150). (Une nouvelle variable pour que peut-être un plus agréable et plus efficace de la solution, mais vous voyez l'idée)
http://jsfiddle.net/u214gco8/1/
J'ai également créé quelques C-Code pour tester les résultats pour le cube de la courbe. Il suffit d'entrer les coordonnées X et Y dans la fonction principale.
https://ideone.com/glLXcB
Juste une remarque: Si vous utilisez les habituelles formules présentées ici, alors ne vous attendez pas t = 0,5 pour revenir au point à la moitié de la courbe de longueur.. Dans la plupart des cas, il ne sera pas.
Plus sur ce ici sous "§23 de Traçage d'une courbe à des intervalles de distance" et ici.