[js] Click in Rechteck erkennen

Hallo,

ich sitze gerade an einem JS-Problem, was etwas mit Mathe und Grafiken zu tun hat ;)

Problem: Ich habe diverse dynamische Arrays mit 4 Koordinaten für eine Grafik. Aus diesen 4 Koordinaten werden dann Rechtecke gezeichnet. Nun kann der Admin (soll ein Tool für das ACP werden) auf diese Karte klicken und das Script soll prüfen, ob der Klick innerhalb des Rechteckes erfolgte. Wenn ja, sollen weitere Optionen erscheinen. War der Klick dort, wo kein Rechteck ist, passiert nichts. Das ist die Theorie.

Ich finde keine einfache und elegante Lösung, wie überprüft werden kann, ob der Klick innerhalb des Rechteckes erfolgte. Vorschläge, Tipps? Wäre super.

Hätte ich einen Kreis, könnte man ja mit dem Kreismittelpunkt usw. arbeiten, so ähnlich wie bei Kreiscaptchas, aber wie geht da bei einem Rechteck?

Gruß,
Biki :D 

schau mal hier

http://www.wendenburg.de/jstipps/mousepos.php

Danke, aber die Positionen und alles was dazu gehört, habe ich bereits griffbereit ;)

Ich suche einen Weg, per Abfrage oder sowas festzustellen, ob der Klick (x und y Koordinaten) innerhalb eines Rechteckes waren (x und y und x2 und y2).

Ich hab mal schnell gegoogelt: nach "Punkt in Polygon" und "Algorithmus"

(Ich hab dich so verstanden, dass du nicht ein einfaches Rechteck sondern ein Polygon mit 4 Ecken meinst, sonst würden die 4 Koordinaten keinen Sinn machen...) :

http://www-lehre.inf.uos.de/~cg/2006/skript/node33.html

http://rw7.de/ralf/inffaq/polygon.html

was wenn du aus deinen 4 punkten ein div erstellst und mit js prüfst ob du innerhalb des divs geklickt hast?

Warscheinlich verstehe ich das Problem nicht richtig,
aber musst du nicht einfach nur prüfen,
ob dein Klick zwischen xmin und xmax UND ymin und ymax liegt?

p1(10,10)
p2(20,10)
p3(10,20)
p4(20,20)

Ist dein Klick beispielsweise bei p(15,15) liegt er im Rechteck.

Im Grunde brauchst du dafür eigentlich nur 2 Koordinaten.
Die der linken oberen und der rechten unteren Ecke.

@tector: Es sind in der Tat einfach nur Rechtecke, siehe Bild: http://666kb.com/i/bbfhusjb7rgt4fqkl.jpg

Aber danke für deine Links, sind interessant! =)

Der Mausklick soll nun erstmal überprüft werden ob er in Rechteck #1 bis #5 liegt. Jeder von diesen 5 Rechtecken hat eben 4 Punkte, die ich alle in jeweils einem Array vorliegen habe.

@scorp: Ja, das wäre eine Möglichkeit, aber mir zu viel Umstand, ich habe nach was leichtem gesucht, wie if/else ;)

@Amun Ra: Mein Hauptproblem ist, das ich kein sonderlich gutes Verständis für Mathe habe. Ich werde deinen Vorschlag mal probieren, danke!

Ich habe mir das so vorgestellt:

px und py sind deine mauskoordinaten.
p1x und p1y sind die koordinaten der linken oberen ecke,
p2x und p2y sind die koordinaten der rechten unteren ecke. 

WENN px GRÖßER p1x UND px KLEINER p2x
UND
WENN py GRÖßER p1y UND py KLEINER p2y

-> klick im Rechteck. 

Danke euch allen, ich habe es hinbekommen =)

Original von Amun Ra

Ich habe mir das so vorgestellt:

px und py sind deine mauskoordinaten.
p1x und p1y sind die koordinaten der linken oberen ecke,
p2x und p2y sind die koordinaten der rechten unteren ecke. 

WENN px GRÖßER p1x UND px KLEINER p2x
UND
WENN py GRÖßER p1y UND py KLEINER p2y

-> klick im Rechteck. 

braucht er eigentlich nicht p1startX p2endX oder gehen wir davon aus dass sein rechteck immer bei 0/0 beginnt?

Ein Punkt ist ein Punkt und hat kein Start und auch kein Ende denn es ist ein Punkt. Siehe dazu auch http://de.wikipedia.org/wiki/Punkt_(Geometrie)