2016-11-29 27 views
0

Ich machte eine kleine Geige: https://jsfiddle.net/ahvonenj/yp0o728h/Wie zeichnet man "hübsche" Bezier-Kurven dynamisch?

Sie können der rote Kreis und die Bezier-Kurve zwischen den beiden Punkten werden aktualisiert, aber nicht in einer Art und Weise zu arbeiten, möchte ich es gezeichnet drücken die linke Maustaste nach unten zu bewegen.

Ich möchte die Kontrollpunkte dynamisch berechnen, so dass die Kurve etwas wie folgt aussieht:

Fall A: enter image description here

Fall B: enter image description here

Fall C: enter image description here

Also im Grunde möchte ich, dass die Kurve immer eine kleine, "hübsche" Kurve von Punkt A nach Punkt B macht, unabhängig davon, wie die Punkte positioniert sind. Das Zeichnen einer geraden Linie sieht nicht gut aus, also würde ich gerne eine Bezier-Kurve verwenden, um die Linie leicht gekrümmt zu machen.

Das Problem liegt in der Berechnung der Kontrollpunkte Positionen. Wie ist das erreicht und gibt es einen einfachen Weg, wie ich viele Anwendungen gesehen habe, die dynamische Bezier-Kurven überall zu verwenden scheinen.

Da Code erforderlich ist jsfiddle-Links zu begleiten, hier ist die Linie, die die Bezier-Kurve mit statischen Kontrollpunkten zur Zeit zieht:

ctx.bezierCurveTo(20, 100, 200, 100, c2.x, c2.y); 

ich Ich hoffe nicht massiven Berechnungen zu tun haben, zu kommen nach oben mit den Kontrollpunktpositionen.

Antwort

2

Nicht massiven Berechnungen: https://jsfiddle.net/khrismuc/6fjhLkbv/

var dx = c2.x - c1.x; 
var dy = c2.y - c1.y; 

ctx.beginPath(); 
ctx.moveTo(c1.x, c1.y); 
ctx.bezierCurveTo(c1.x + dx * 0.33, c1.y, c1.x + dx * 0.67, c2.y, c2.x, c2.y); 
ctx.stroke(); 

Wenn Sie wollen, dass sie so abgewinkelt werden, die Kontrollpunkte der Berechnung ist etwas komplizierter.

+0

Perfekt. Danke vielmals! Ich werde dies als beantwortet markieren, wenn ich dazu in der Lage bin. – Piwwoli