Verschieben eines Punktes Entlang einer Linie, die in JavaScript-Canvas
Sagen wir mal so, ich habe die Koordinaten in einer Zeile (25,35 45,65, 30,85 - Es wäre eine zwei Teil-Linien). Ich brauche, um einen Punkt zu verschieben (Auto) entlang dieser Linie in einem Konstanten Abstand zu jedem Rahmen. Wie kann ich dies tun?
- Wissen Sie, wie um es zu bewegen entlang einer Strecke bei konstanter Geschwindigkeit?
- Nein, aber sobald ich mich bewegen kann entlang der einzelnen Liniensegmente es sollte einfach sein, wiederholen Sie einfach den Prozess vom Ende der vorherigen Zeile
- Wie tun Sie, tun Sie es mit nur einer einzigen Zeile dann?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sehen die Linie (25,35 45,65). Der Vektor vom Anfang bis zum Ende (20, 30). Um einen Punkt zu verschieben (x,y) in diese Richtung, wir könnten nur hinzufügen, dass vector:
V = (20, 30)
(x,y) => (x+20, y+30).
Wenn wir an den Anfang der Zeile, werden wir am Ende ankommt.
Aber das ist ein zu großer Schritt. Wir wollen etwas kleiner, aber in die gleiche Richtung, so multiplizieren wir den Vektor durch, sagen wir, 0.1:
V = (2, 3)
(x,y) => (x+2, y+3) => (x+4, y+6) => ...
Es ist bequem normalisieren,, ist auf seiner Länge 1, die wir durch Division durch seine Länge:
V => V/|V| = (2,3)/sqrt(22 + 32) = (7.21, 10.82)
Dann können Sie einfach multiplizieren Sie, dass durch jeden Schritt, die Größe, die Sie wollen.
Math.sqrt(X*X + Y*Y)
. So (20, 30) LängeMath.sqrt(20*20 + 30*30)
und (20, 30) normalisiert wäre(20 / length, 30 / length)
Hey, Sie hat also die Koordinaten (25,35) (45,65) (30,85) für Ihren 2 Linien, die den Punkt, Den Sie verschieben möchten, gehen gesetzt werden, auf dem ersten von diesen Koordinaten (25,35) und Sie wollen, es zu verschieben in Richtung auf die zweite Koordinate (45,65) (das Ende des ersten Liniensegments).
Der erste Schritt ist, um die Ausrichtung in die der Punkt sich bewegt, die Orientierung ist der Winkel zwischen der position und der Zielposition. Zu finden ist dieser Winkel, den Sie verwenden können, die
Math.atan2()
auf und übergibt als erstes argument dietarget position Y - the point position Y
, und als zweites argument dietarget position X - the point position X
.Erhalten jetzt die Sinus und Cosinus der Neigungswinkel, der Sinus ist der Wert, der zum verschieben entlang der Y-Achse, und der Kosinus ist, wie viel Bewegung auf der X-Achse. Multiplizieren Sie den Sinus und Cosinus durch den Abstand, den Sie verschieben möchten jeden frame.
Ok, was bleibt zu tun, jetzt ist nur setup die redraw-Methode, wo Sie fügen Sie den Sinus zu dem Punkt an der Y-position und der Cosinus an der Stelle X-position bei jedem Aufruf. Überprüfen Sie, ob der Punkt gekommen ist, ist es Ziel, dann tun Sie das gleiche Verfahren zum bewegen in Richtung auf das Ende des zweiten Liniensegments.
Manchmal ist es nicht so offensichtlich, wie das zu übersetzen, eine mathematische Formel in einen code. Im folgenden ist eine Implementierung einer Funktion, die bewegt sich ein Punkt angegebenen Abstand entlang einer Linie. Es nutzt Vektor-notation:
Und eine version ohne
Vector
Klasse:8 Jahre zu spät, aber jemand kann diese nützlich finden. Diese Methode ist wesentlich schneller gegeben, es nicht nutzt Sachen wie atan, cos, sin und Wurzel, die alle langsam sind.
Pass Prozentsatz als Wert zwischen 0 und 1, wobei 0 Beginn der Zeile und die 1 am Ende.