Comment créer des secteurs de cercle CSS parfaits

Récemment, j'ai construit une roulette à jackpot CSS, un projet qui présentait un défi unique : mettre en évidence dynamiquement les secteurs comme une aiguille les pointait. La roulette avait besoin de réactivité et de nombres de secteurs variables, excluant les solutions simples en image ou SVG. Les calculs géométriques étaient indispensables.

Mon approche consistait à faire pivoter les travées autour du centre d'un cercle et à les couper le long du rayon. La configuration initiale, détaillée ci-dessous (et disponible dans son intégralité via le lien plus bas), impliquait un style de base et une rotation incrémentielle des travées (360/secteurs, degrés de longueur). Ce n'était pas visuellement sophistiqué à ce stade.

Pour mettre en évidence un secteur, j'avais besoin de la distance entre deux points sur un cercle, étant donné le rayon et l'angle. La formule est :

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

où θ est l'angle en radians. Converti pour utilisation :

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

Ensuite, je me suis attaqué au découpage de secteurs pour éviter les chevauchements. Ma première tentative a utilisé un chemin de clip diagonal :

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

Cela a fonctionné de manière adéquate avec de nombreux secteurs, mais des défauts sont devenus apparents avec moins de secteurs, en particulier avec seulement trois, comme indiqué :

La solution consistait à calculer le point d'intersection entre la travée et le cercle, en coupant de ce point vers le centre. Cela a corrigé l'écrêtage :

La recherche a donné des formules pour les segments créés sur un rayon horizontal par la ligne reliant les points d'intersection :

Segment central :

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

Segment extérieur :

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

(θ en radians)

Le rapport entre ces segments détermine le point de détourage, conduisant à :

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

Le corrigé clip-path :

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

Le résultat final, basé sur Vue, permet des tours aléatoires via des clics centraux et des tours ciblés via des clics sectoriels. (Lien vers le code complet omis, selon le texte original). Ce projet a fourni une leçon précieuse de trigonométrie pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!