[FRAGE] Koordinaten bestimmen in TL, TR, BR, BL

[salazar]

Hi,

ich positioniere 4 Punkte in meiner Canvas:

var p1 = { x:Math.random() * w, y:Math.random() * h };
var p2 = { x:Math.random() * w, y:Math.random() * h };
var p3 = { x:Math.random() * w, y:Math.random() * h };
var p4 = { x:Math.random() * w, y:Math.random() * h };

Die Koordinaten dieser Punkte verändern sich stetig.
Ich brauche die Info welcher Punkt wo ist. Aber nach dem Schema TL, TR, BR, BL (Top Left, Top Right, Bottom Right, Bottom Left).
Also z.B. ob p1 gerade TL ist, oder ist vielleicht p2 im Moment TL, oder p3, oder p4? Ich brauche von jedem der vier Punkte immer die Info ob dieser TL, TR, BR oder BL ist.
Ich komme hier aktuell nicht weiter, bzw. die Ergebnisse bisher waren schrott, oder viel zu ungenau. Und irgendwie habe ich jetzt ein Brett vorm Kopf.

Kann einer von euch helfen? Vielen Dank!

Edit: Nachdem ich meinen Post jetzt nochmal gelesen habe, ist mir klar geworden, dass ich das noch etwas konkretisieren muss.

Die vier Punkte können zufällig positioniert werden. Oder aber es sind von 3D in 2D umgerechnete Koordinaten. Wenn das der Fall ist, dann sind es die Eckpunkte von einem Plane. Und auch in diesem fall würde ich gerne wissen welcher der vier (Eck)-Punkte TL, TR, BR oder BL ist. Ich hatte die Idee das vom Zentrum aus zu messen. Also wenn ein Punkt x < center.x ist und y < center.y, dann müsste dieser TL sein. Das funktioniert auch bis zu einem gewissen grad ganz gut, aber es gibt auch den Fall das mehrere Punkte diese Bedingung erfüllen und dann stimmt die Anzeige nicht mehr.

so gehts noch:


aber so haut das schon nicht mehr hin:

Hier wäre bei der beschriebenen Methode nicht der marktierte Punkt TL, sonder der darunter.

Wie könnte man das anstellen?

Edit2: Und, wenn wir schon dabei sind. Wie kann ich das Zentrum der Vier Punkte korrekt berechnen? Also den Schnittpunkt der beiden Diagonalen? Bisher diente als Grundlage für Berechnungen einfach das Zentrum/Center der Canvas. Wäre schon schöner das Center vom Plane/Shape berechnen zu können.

 

[kkapsner]

Ich verstehe die Anforderung schon nicht so wirklich. Wenn du ein beliebiges Viereck hast, gibt generell kein TL, TR, etc. Schon ein dem einfachen Fall, dass du ein Quadrat hast, das um 45° verdreht ist, ergibt das schon einen Sinn mehr. Wie soll das dann bei einem beliebigen funktionieren. Was du angeben kannst, ist z.B. der Punkt, der am höchsten liegt.

Für was brauchst du die Information denn überhaupt?

 

[salazar]

Du hast recht. ich glaube ich drehe mich im Kreis, bzw. hab mir schon einen Knoten ins Hirn gedacht

Es geht darum, dass ich gerne die Fläche zwischen diesen vier Punkten füllen möchte. Gearbeitet wird hier mit ImageData. Daher müsste ich jedes Pixel einzelnd setzen. Das übliche lineTo() und fill() funktioniert in diesem Fall nicht.

 

[kkapsner]

Es geht darum, dass ich gerne die Fläche zwischen diesen vier Punkten füllen möchte.

Was heißt das denn genau? Es ist doch gar nicht garantiert, dass sich aus diesen vier zufälligen Punkten ein konvexes Viereck bilden lässt. Und sobald du konkav bist, ist das Viereck nicht mehr eindeutig.

Gearbeitet wird hier mit ImageData. Daher müsste ich jedes Pixel einzelnd setzen. Das übliche lineTo() und fill() funktioniert in diesem Fall nicht.

Warum machst du nicht zuerst das lineTo() und fill() und holst dir erst danach das ImageData?

Aber sehe ich das richtig, dass du diese vier Punkte einfach nur in eine sinnvolle Reihenfolge bringen willst? Dann nimm doch einfach drei in irgendeiner Reihenfolge und füge den vierten zwischen den beiden ein, die zu ihm am nächsten sind. Das sollte dann eine Kontur ohne Überschneidung ergeben.