mmofacts.com

[js] Click in Rechteck erkennen

gepostet vor 15 Jahre, 2 Monate von Biki

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 

gepostet vor 15 Jahre, 2 Monate von Biki

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).

gepostet vor 15 Jahre, 2 Monate von BlackScorp

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

gepostet vor 15 Jahre, 2 Monate von Amun Ra

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.

gepostet vor 15 Jahre, 2 Monate von Biki

@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!

gepostet vor 15 Jahre, 2 Monate 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. 

gepostet vor 15 Jahre, 2 Monate von Biki

Danke euch allen, ich habe es hinbekommen =)

gepostet vor 15 Jahre, 2 Monate von BlackScorp

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?

Auf diese Diskussion antworten