Element finden, das dem angeklickten Punkt am nächsten ist

Ihr Algorithmus ist korrekt. Da Sie Hilfe im Code und nicht im Algorithmus benötigen, hier ist der Code:

Es ist vielleicht nicht die effizienteste Methode. Aber es funktioniert.

Sie können nach dem nächsten Eckpunkt aller Rechtecke suchen. Dies funktioniert in den meisten Fällen, ist schnell und einfach zu implementieren. Solange Ihre Rechtecke in einem regelmäßigen Raster ausgerichtet sind, gibt Ihnen diese Methode das nächste Rechteck.

Das Hinzufügen der relativ neuen elementFromPoint () API ermöglicht es uns ein alternativer, potentiell leichterer Ansatz: Wir können den Test um den Mauszeiger herum durchführen, indem wir in größere Kreise gehen, bis wir das nächste Element gefunden haben.

Ich habe hier ein schnelles, nicht produktionsbezogenes Beispiel zusammengestellt: Ссылка (Chrome / Safari nur aufgrund der Verwendung von webkitMatchesSelector). Die Leistung kann aufgrund der bei der Visualisierung des Algorithmus verwendeten Punkte verzögert werden.

Der Kern des Codes außerhalb der Lichtleistungsoptimierungen und der Ereignisbindungen ist dieses Bit:

Ich würde es nicht mit Zahlen machen, sondern mit Logik.

Ich nehme an, dass Sie mit etwas enden wollen, das sagt: "Wenn x das nächste Element ist, dann tu etwas, wenn ich anderswo klicke, dann tu etwas zu x"

Sie könnten dies tun, wenn jedes der Elemente, mit denen Sie etwas tun möchten, in einfachen <div> -Containern liegt, die größer sind als das Element, das Sie behandeln möchten, aber nicht größer als die Hälfte zwischen dem Objekt und dem nächsten Objekt. Ein Raster in der Tat.

Geben Sie allen Containern die gleiche Klasse.

Dann könnten Sie sagen: "Wenn y geklickt wird, machen Sie etwas mit x", Sie würden bereits wissen, welches Element in jedem Container ist.

Ich würde den Code schreiben, aber ich verlasse die Arbeit ...

Wenn Sie den Abstand zwischen zwei Punkten in einem 2D-Raster finden möchten, können Sie die folgende Formel verwenden:

(für 2D-Punkte A und B)

distanceX = A.x - B.x

EntfernungY = A.y - B.y

totalDistance = QuadratRoot ((distX * distX) + (distY * distY))

Sobald Sie den Abstand zwischen zwei Punkten überprüfen können, können Sie ziemlich leicht herausfinden, welche Ecke Ihres Mausklicks am nächsten ist. Es gibt viele Dinge, die Sie tun können, um Ihren beabsichtigten Algorithmus zu optimieren, aber das sollte Ihnen einen guten Start geben.

lol, die Frage ist, warum denkst du an Formen? Ihre Frage ist wirklich "wenn ich auf eine Koordinate klicke, finde ich den nächsten Knoten / Punkt zu meinem Klick", der eine Frage der verschiedenen Knoten und der Berechnung von Entfernungen ist.

Wenn dasselbe X verwendet wird, verwenden Sie die Differenz

Wenn dasselbe y, verwende x Unterschied

Verwenden Sie andernfalls hypotheuseuse

Sobald Sie den nächsten Punkt finden, können Sie die Elternform richtig bekommen? Dies funktioniert, weil Sie versuchen, den nächsten Punkt zu fangen. So wird es sogar mit ausgefallenen Formen wie Sternen funktionieren.