So erstellen Sie CSS / JavaScript Kreise Raster
Ich muss so etwas tun:
Das mag ziemlich einfach aussehen, aber es gibt einige Voraussetzungen: - Die Breite des enthaltenden div sollte von der Textlänge abhängen (ist das überhaupt möglich in CSS?) - Alle Kreise sollten zufällig positioniert sein - das ist der schwierigste Teil für mich.
Da ich border-radius zum Erstellen von Kreisen verwende (Höhe, Breite und border-radius von 50%), versuche ich in JavaScript eine Art Gitter zu erstellen, in dem ich jedes Element durchlaufe und seine Dimensionen erhalte. Dann erhalte ich die Position des vorherigen Elements (falls vorhanden) und füge sie zu den aktuellen Elementdimensionen hinzu. Durch das Hinzufügen einiger Ränder können Sie außerdem Kollisionen vermeiden. Ist es richtiger Ansatz?
Ich suche nur einen Vorschlag, wie ich meine zwei Probleme lösen kann.
1 Antwort
Kreise, die basierend auf der Größe des Inhalts skaliert werden.
-
Dies ist etwas, das Sie zuerst lösen müssen, weil Sie sie nicht irgendwo platzieren können, ohne zuerst ihre Dimensionen zu kennen.
-
Natürlich vergrößert sich die Größe eines DIV zuerst um Breite, dann um Höhe. Das heißt, die maximale Breite eines Containers muss zuerst genutzt werden, bevor mit der Höhenbeschränkung fortgefahren wird. Aus diesem Grund kann es sich als ziemlich schwierig erweisen, eine Kreisskala mit gleichem Radius zu erstellen, ohne eine relative Mittelung zu verwenden.
-
Bei der relativen Mittelung werden die durchschnittlichen Abmessungen Ihrer Höhe / Breite auf der Grundlage des exhistierenden Bereichs des Containers ermittelt, der Ihren Inhalt begrenzt. Zum Beispiel:
Die Breite und Höhe des DIV, der Ihren Inhalt begrenzt, kann mit Javascript erkannt werden. Lassen Sie uns annehmen, dass Sie diese Eigenschaften auch als 200px x 20px erkannt haben.
Ihre Gesamtfläche ist Breite * Höhe so 4000px; Aber wir versuchen ein Quadrat zu erreichen, damit wir abgerundete Ecken anwenden und einen runden Kreis bilden können. Wir wollen Dimensionen eines Rechtecks finden, das dem gleichen Bereich entspricht, und dann diese neuen Dimensionen anwenden.
Um denselben Bereich mit gleicher Breite * Höhe zu erreichen, können Sie Folgendes tun:
√ 4000 = 63.2455532 Also: 63.2455532 x 63.2455532 = 4000
Zufällige Platzierung von DIVs und Vermeidung von Kollisionen zwischen DIVs.
- Nachdem Sie Dimensionen gefunden haben, können Sie für Ihre Platzierung einen Rand für Ihre (X, Y) -Koordinaten verwenden. Schieben Sie diese Koordinaten und den Radius auf ein Array. Verwenden Sie auch Rekursion, um die verbleibenden Kreise bei Kollisionsfehlern zu platzieren. Ein Kollisionsfehler würde von einem Element kommen, das überlappende Elemente (X, Y) + Radius hat, die ebenfalls zu Elementen im Array gehören, die erfolgreich verschoben wurden.
Tags und Links javascript css css3