So erstellen Sie perfekte CSS-Kreissektoren

Kürzlich habe ich ein CSS-Jackpot-Roulette erstellt, ein Projekt, das eine einzigartige Herausforderung darstellte: Sektoren dynamisch hervorzuheben, während eine Nadel auf sie zeigt. Das Roulette erforderte Reaktionsfähigkeit und variable Sektorzahlen, sodass einfache Bild- oder SVG-Lösungen ausgeschlossen waren. Geometrische Berechnungen waren unerlässlich.

Mein Ansatz bestand darin, Spannen um den Mittelpunkt eines Kreises zu drehen und sie entlang des Radius zu beschneiden. Die anfängliche Einrichtung, die unten detailliert beschrieben wird (und vollständig über den Link weiter unten verfügbar ist), umfasste grundlegendes Styling und eine schrittweise Drehung der Spannen (360/Sektoren.Länge Grad). Zu diesem Zeitpunkt war es optisch noch nicht anspruchsvoll.

Um einen Sektor hervorzuheben, benötigte ich den Abstand zwischen zwei Punkten auf einem Kreis, gegebener Radius und Winkel. Die Formel lautet:

<code>2 * radius * Math.sin(θ / 2)</code>

wobei θ der Winkel im Bogenmaß ist. Zur Verwendung konvertiert:

<code>2 * radius * Math.sin(Math.PI / sectors.length)</code>

Als nächstes habe ich mich mit dem Sektor-Clipping beschäftigt, um Überlappungen zu verhindern. Mein erster Versuch verwendete einen diagonalen Clip-Pfad:

<code>clip-path: polygon(100% 0, 0 50%, 100% 100%);</code>

Dies funktionierte bei vielen Sektoren ausreichend, bei weniger Sektoren, insbesondere bei nur drei, traten jedoch Mängel auf, wie gezeigt:

Die Lösung bestand darin, den Schnittpunkt zwischen der Spanne und dem Kreis zu berechnen und von diesem Punkt zum Mittelpunkt zu schneiden. Dadurch wurde der Ausschnitt korrigiert:

Untersuchungen ergaben Formeln für die Segmente, die auf einem horizontalen Strahl durch die Linie erzeugt werden, die Schnittpunkte verbindet:

Mittelsegment:

<code>radius * (1 - Math.cos(θ / 2))</code>

Äußeres Segment:

<code>radius * Math.cos(θ / 2)</code>

(θ im Bogenmaß)

Das Verhältnis zwischen diesen Segmenten bestimmt den Clipping-Punkt und führt zu:

<code>const clipPosition = Math.cos(Math.PI / sectors.length) * 100</code>

Das korrigierte clip-path:

<code>{
  'clip-path': `polygon(100% 0, ${clipPosition}% 0, 0 50%, ${
    clipPosition
  }% 100%, 100% 100%)`
}</code>

Das endgültige, Vue-basierte Ergebnis ermöglicht zufällige Drehungen über Mittelklicks und gezielte Drehungen über Sektorklicks. (Link zum vollständigen Code weggelassen, gemäß Originaltext). Dieses Projekt lieferte eine wertvolle Lektion in praktischer Trigonometrie.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie perfekte CSS-Kreissektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!