Leinwand - Wie finde ich heraus, ob ein Punkt über oder unter einer diagonalen Linie liegt?

Question

In einem 2D-Spiel muss ich herausfinden, ob ein Objekt über oder unter einer diagonalen Linie ist.

Wer weiß, wie man das macht?

(i verwenden CreateJS Rahmen)

Answer 1

OK, verschrotten Sie meine vorherige Antwort und verwenden Sie stattdessen Kreuzung. Schießen Sie eine Linie von dem Punkt, um geradeaus zu testen. Wenn es einen Schnittpunkt gibt, liegt der Punkt darunter, wenn keiner vorhanden ist, befindet sich der Punkt entweder über oder neben der Linie.

Um Seitenfehler (kein Wortspiel) zu vermeiden, erweitern Sie die ursprüngliche Zeile mit Interpolation.

Hier ist eine Funktion zu tun line intersection. Dazu verwenden die lineare Interpolation der ursprünglichen Linie einfach einige Extremwerte:

var tx1 = x1 + (x2-x1) * -51000; 
var ty1 = y1 + (y2-y1) * -51000; 

var tx2 = x1 + (x2-x1) * 53200; 
var ty2 = y1 + (y2-y1) * 53200; 

aktualisieren ich ein bisschen in Eile war heute morgen hier ist also ein kleines Update. Wie blindman67 darauf hinweist, können Sie nur die d in der verknüpften Schnittpunktfunktion verwenden und s/t überprüfen, wenn sie im normalisierten Bereich liegen (oder verwenden Sie einfach ein Kreuzprodukt - siehe die Antwort, die besser passt).

Answer 2

ein Dreieck bauen die oberen Koordinaten unter Verwendung einer Form zu erstellen. Zum Beispiel, wenn Ihre Linie wie folgt aussehen:

Sie eine Form erstellen können, wenn x2 und y1 mit:

nun einfach auf das Dreieck auf den Pfad hinzufügen und machen ein isPointInPath(x, y), wenn es wahr ist, ist es oben, wenn es falsch ist, ist es unten.

Wenn Sie unten überprüfen müssen, den Prozess umgekehrt.

(wowa viele Pfeile dort ... aber Sie werden die Idee :) bekommen!)

Edge-Fälle (pun intended): wenn der Punkt ist sehr nah an einer der Enden -> verlängern Sie einfach die Linie oder machen Sie ein Polygon, das sich (x1, y1) bis zum Rand des Gebiets erstreckt.

Eigentlich darüber nachdenken: Dreiecke sind möglicherweise nicht so geeignet, verwenden Sie stattdessen die obere Kante der Leinwand als ein Segment von Polygon, dann wäre das nächste Segment vertikale Linie bis zum Ende der diagonalen Linie, die das letzte Segment vom Anfang der diagonalen Linie bis zur oberen linken Seite der Leinwand. Ich bin einfach zu faul, um die Grafiken zu wiederholen, aber Sie bekommen die Idee ..

Answer 3

Verwenden Sie das Kreuzprodukt des Punkts und der Linie.

Sie müssen das gesamte Koordinatensystem an den Anfang der Linie verschieben und dann das Kreuzprodukt der Linie und des Punktes erhalten. Wenn das Ergebnis negativ ist, ist der Punkt links von der Linie, wenn positiv, dann ist der Punkt rechts von der Linie, wenn Null, dann ist der Punkt auf der Linie.

// the point 
var px = 100; 
var py = 100; 

// the line 
var lx1 = 20; 
var ly1 = 20; 
var lx2 = 320; 
var ly2 = 120; 

// move line end and point so that line start is at 0,0 
lx2 -= lx1; 
ly2 -= ly1; 
px -= lx1; 
py -= ly1; 

// get cross product 
var cross = lx2 * py - ly2 * px; 
if(cross < 0){ // point is to the left (anticlockwise) 
}else if(cross > 0){ // point is to the right (clockwise) 
}else{ // cross must be zero then point is on the line  
}