JavaScript-Sweep-Line-Algorithmus findet alle Elemente mit der gleichen x-Koordinate
Ich versuche, einen Zeilenablenkalgorithmus zu implementieren, indem ich PURE Javascript (keine anderen Frameworks) benutze, das im Grunde von links nach rechts durch den Bildschirm scannt und alle Elemente (einschließlich überlappender Elemente) betrachtet gleiche X-Koordinate.
Zum Beispiel
Ich habe 6 div Elemente mit schwarzem Rand, und sie alle Layout zufällig auf dem Bildschirm. Zu Illustrationszwecken verwende ich eine vertikal gepunktete blaue Linie, um quer durch die Ebene von links nach rechts zu scannen. Das Ziel ist, dass alle Elemente gemeldet werden, die die Linie durchlaufen hat. Für das obige Beispiel, wie melden wir das Div A , Div E , Div D und auch das hyperlink D in Div D mit JavaScript?
2 Antworten
Sie können die Position von Elementen mit der Methode getBoundingClientRect ermitteln. Überstreiche sie dann und überprüfe, ob sie zu deinem Scan passen:
Kürzere, funktionale Art:
%Vor%Wenn Sie eine Schnellzugriffsfunktion für häufige Verwendung benötigen, würden Sie alle Elemente (mit ihren Koordinaten) in einer sortierten Datenstruktur speichern, a Segmentbaum , wo Sie nach ihnen suchen können.
Auch wenn sichergestellt ist, dass untergeordnete Knoten von DOM-Elementen ihre Elterngrenzen nicht überschreiten, können Sie das DOM selbst als Suchbaum verwenden:
%Vor%- Sammeln Sie alle DOM-Elemente
- Finden Sie ihre Positionen und verstauen Sie sie in einem Array (so Sie kann die Daten erneut verwenden, ohne das DOM zu durchlaufen)
- Schleife durch das Array und löse nach x
Tags und Links javascript algorithm