8
votes

Point central sur la courbe quadratique HTML

J'ai une courbe quadratique dessinée sur toile HTML utilisant context.QuadraticCurveto (ControlX, contrôly, endx, endy); . .

J'ai le point de contrôle et les points de départ et de fin, qui ne sont pas nécessairement les uns avec les autres horizontalement.

Comment puis-je trouver le point central sur la courbe en utilisant ces paramètres?

En fait, je veux mettre une balise diviser sur ce point central. Existe-t-il une résolution d'équation impliquée dans ce processus?


4 commentaires

Veuillez expliquer ce que vous entendez par «point de contrôle» et «démarrage» et «finir».


Le point de contrôle est un point responsable de la forme de la courbe, le point de départ est le point où la courbe démarre et l'extrémité ponte est une fois où la courbe se termine.


Aucun point unique ne peut être responsable de la forme de la courbe - la forme de la courbe est définie par des valeurs d'A, B, C lorsqu'il est écrit sous formulaire général. Vos points de départ et de fin - sont-ils les uns avec les autres horizontalement? Avez-vous une équation que vous complotez?


Veuillez jeter un oeil sur la fonction QudraticCurveto (A, B, C) dans HTMLCANVAS / JavaScript. Il dessine la courbe en fonction des points de contrôle et du point d'extrémité


3 Réponses :



22
votes

quadracicurveto code> dessine un Quadratique Curve Bézier .

Les formules pour calculer les coordonnées d'un point à une position donnée (de 0 à 1) sur la courbe sont p> xxx pré>

où (x1, y1) est le point de départ (x2, y2) est le point de contrôle et (x3, y3) est le point d'extrémité. p>

donc, tournant cela en javascript, nous finissons avec quelque chose comme p> xxx pré>

si vous passez les points de démarrage, de fin et de contrôle sur getquadraticcurvepoint code> là, ainsi que 0.5 code> pour la mi-chemin Position, vous devez obtenir un objet avec les coordonnées X et Y. P>

Exemple h1>

p>

<canvas id="c" width="500" height="500">


0 commentaires

0
votes

une manière possible: xxx

et le jsfiddle correspondant: jsfiddle.net/ptccl /


0 commentaires