Je fabrique une roue de fortune et je dois créer une roue ou un cercle en fonction du nombre de secteurs et la remplir avec le nom du prix.
J'ai complété le code d'un cercle avec un nombre fixe de secteurs. Voici un exemple de cercle contenant 6 secteurs.
.wheel_container { position : relative ; --taille de la roue : 360 px ; largeur: var(--wheel-size); hauteur : var(--wheel-size); marge inférieure : 2,4em ; } .roue { affichage : flexible ; justifier-contenu : centre ; position : relative ; débordement caché; largeur : 100 % ; hauteur : 100 % ; rayon de bordure : 50 % ; couleur de fond : aigue-marine ; --segment-deg : 60deg ; } .roue div { affichage : flexible ; justifier-contenu : centre ; aligner les éléments : centre ; position : absolue ; largeur : calc((2 * 3.141592653589793 * (var(--wheel-size) / 2)) / 6); hauteur : 50 % ; chemin de détourage : polygone (0 0, 50 % 100 %, 100 % 0 ); transformation-origine : bas ; mode d'écriture : vertical-rl ; } .wheel div > poids de la police : 500 ; taille de police : 1rem ; alignement du texte : centre ; couleur : rgba(0, 0, 0, 0,7) ; } .wheel div:ntième-enfant(1) { couleur de fond : beige ; transformation : rotation(calc(-1 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(2) { couleur de fond : bleu-violet ; transformation : rotation(calc(-3 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(3) { couleur de fond : pourpre ; transformation : rotation(calc(-5 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(4) { couleur de fond : orange ; transformation : rotation(calc(-7 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(5) { couleur d'arrière-plan : violet ; transformation : rotation(calc(-9 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(6) { couleur de fond : jaune ; transformation : rotation(calc(-11 * var(--segment-deg) / 2)); } Pomme Durien Banane Mango Fraise Jacquier J'ai essayé de déterminer la propriété width du .wheel div Cependant, cela ne fonctionne pas car le polygone dans clip-path n'est pas courbé, alors que le J'ai pu obtenir l'effet souhaité avec 6 cercles sectoriels en ajoutant quelques pixels à la largeur de .
.wheel_container { position : relative ; --taille de la roue : 360 px ; largeur: var(--wheel-size); hauteur : var(--wheel-size); marge inférieure : 2,4em ; } .roue { affichage : flexible ; justifier-contenu : centre ; position : relative ; débordement caché; largeur : 100 % ; hauteur : 100 % ; rayon de bordure : 50 % ; couleur de fond : aigue-marine ; --segment-deg : 60deg ; } .roue div { affichage : flexible ; justifier-contenu : centre ; aligner les éléments : centre ; position : absolue ; /* Modification */ largeur : calc((2 * 3.141592653589793 * ((var(--wheel-size) + 37px) / 2)) / 6); hauteur : 50 % ; chemin de détourage : polygone (0 0, 50 % 100 %, 100 % 0 ); transformation-origine : bas ; mode d'écriture : vertical-rl ; } .wheel div>span { poids de la police : 500 ; taille de police : 1rem ; alignement du texte : centre ; couleur : rgba(0, 0, 0, 0,7) ; } .wheel div:ntième-enfant(1) { couleur de fond : beige ; transformation : rotation(calc(-1 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(2) { couleur de fond : bleu-violet ; transformation : rotation(calc(-3 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(3) { couleur de fond : pourpre ; transformation : rotation(calc(-5 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(4) { couleur de fond : orange ; transformation : rotation(calc(-7 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(5) { couleur d'arrière-plan : violet ; transformation : rotation(calc(-9 * var(--segment-deg) / 2)); } .wheel div:ntième-enfant(6) { couleur de fond : jaune ; transformation : rotation(calc(-11 * var(--segment-deg) / 2)); } Pomme Durien Banane Mango Fraise Jacquier Cependant, le code qui fonctionne pour 6 secteurs ne fonctionnera pas pour 8 secteurs et ainsi de suite...
Je pense que la solution pourrait résider dans les règles de remplissage SVG en utilisant clip-path. Cependant, mes connaissances en SVG sont limitées et j'ai besoin d'aide. D'autres solutions sont également les bienvenues.
-
À propos de nous
Clause de non-responsabilité
Sitemap
-
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！
Le problème que vous rencontrez est le calcul
.wheel div的宽度和高度的方式不正确。如果高度是圆的半径：--radius: calc(var(--wheel-size) / 2 );，那么宽度就是width: calc( 2 * var(--radius ) / 1.732);，其中 1.732 是Math.sqrt(3). Cela fonctionne pour une roue à 6 parties, où le triangle (pour le chemin de détourage) est un triangle équilatéral.Dans votre exemple, la largeur est égale au rayon. Cela ne suffit pas car le div dépasse le cercle et vous avez calculé le chemin de détourage en fonction de la taille du div.
Pour voir ce qui se passe, supprimez border-radius : 50 % ; et ajoutez une partie semi-transparente non clipsée à la roue (clip-path : none ;)
*{margin:0;padding:0} .wheel_container { position: relative; --wheel-size: 360px; width: var(--wheel-size); height: var(--wheel-size); margin-bottom: 2.4em; } .wheel { display: flex; justify-content: center; position: relative; overflow: hidden; width: var(--wheel-size); height: var(--wheel-size); border-radius: 50%; background-color: aquamarine; --segment-deg: 60deg; } .wheel div { display: flex; justify-content: center; align-items: center; position: absolute; --radius: calc(var(--wheel-size) / 2 ); height: var(--radius); width: calc( 2 * var(--radius ) / 1.732); clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: bottom; writing-mode: vertical-rl; } .wheel div > span { font-weight: 500; font-size: 1rem; text-align: center; color: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { background-color: beige; transform: rotate(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { background-color: blueviolet; transform: rotate(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { background-color: crimson; transform: rotate(calc(-5 * var(--segment-deg) / 2)); } .wheel div:nth-child(4) { background-color: orange; transform: rotate(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { background-color: violet; transform: rotate(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { background-color: yellow; transform: rotate(calc(-11 * var(--segment-deg) / 2)); } ..wheel div {transform:none!important}Pour faire une roue à 8 segments, vous aurez besoin d'un --segment-deg:45 et d'un autre
.wheel div的宽度。我使用的是width: calc( 2 * var(--radius ) / 2.414);, où 2,414 est la tangente de (180 - 45) / 2.*{margin:0;padding:0} .wheel_container { position: relative; --wheel-size: 360px; width: var(--wheel-size); height: var(--wheel-size); margin-bottom: 2.4em; } .wheel { display: flex; justify-content: center; position: relative; overflow: hidden; width: var(--wheel-size); height: var(--wheel-size); border-radius: 50%; background-color: aquamarine; --segment-deg: 45deg; } .wheel div { display: flex; justify-content: center; align-items: center; position: absolute; --radius: calc(var(--wheel-size) / 2 ); height: var(--radius); width: calc( 2 * var(--radius ) / 2.414); clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: bottom; writing-mode: vertical-rl; } .wheel div > span { font-weight: 500; font-size: 1rem; text-align: center; color: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { background-color: beige; transform: rotate(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { background-color: blueviolet; transform: rotate(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { background-color: crimson; transform: rotate(calc(-5 * var(--segment-deg) / 2)); } .wheel div:nth-child(4) { background-color: orange; transform: rotate(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { background-color: violet; transform: rotate(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { background-color: yellow; transform: rotate(calc(-11 * var(--segment-deg) / 2)); } .wheel div:nth-child(7) { background-color: red; transform: rotate(calc(-13 * var(--segment-deg) / 2)); } .wheel div:nth-child(8) { background-color: blue; transform: rotate(calc(-15 * var(--segment-deg) / 2)); }