Kaedah untuk memaparkan sektor bulat secara dinamik tanpa menggunakan kanvas HTML5

Question

Saya sedang membuat roda nasib dan saya perlu mencipta roda atau bulatan berdasarkan bilangan sektor dan mengisinya dengan nama hadiah.

Saya telah melengkapkan kod untuk bulatan dengan bilangan sektor yang tetap. Berikut adalah contoh bulatan yang mengandungi 6 sektor.

.wheel_container {
  kedudukan: relatif;
  
  --saiz roda: 360px;
  lebar: var(--saiz roda);
  ketinggian: var(--saiz-roda);
  
  jidar bawah: 2.4em;
}

.roda {
  paparan: flex;
  justify-content: pusat;
  
  kedudukan: relatif;
  limpahan: tersembunyi;
  
  lebar: 100%;
  ketinggian: 100%;
  
  jejari sempadan: 50%;
  warna latar belakang: aquamarine;
  --segmen-deg: 60deg;
}

.wheel div {
  paparan: flex;
  justify-content: pusat;
  align-item: tengah;
  
  jawatan: mutlak;
  
  lebar: calc((2 * 3.141592653589793 * (var(--saiz roda) / 2)) / 6);
  ketinggian: 50%;
  laluan klip: poligon(0 0, 50% 100%, 100% 0);
  
  transform-asal: bawah;
  mod penulisan: menegak-rl;
}

.wheel div >
  berat fon: 500;
  saiz fon: 1rem;
  text-align: tengah;
  warna: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  warna latar belakang: kuning air;
  ubah: putar(calc(-1 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(2) {
  warna latar belakang: biru ungu;
  ubah: putar(calc(-3 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(3) {
  warna latar belakang: merah tua;
  ubah: putar(calc(-5 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(4) {
  warna latar belakang: oren;
  ubah: putar(calc(-7 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color:violet;
  ubah: putar(calc(-9 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(6) {
  warna latar belakang: kuning;
  ubah: putar(calc(-11 * var(--segmen-deg) / 2));
}

<div class='wheel_container'>
  <div class='roda'>
    <div><span>Apple</span></div>
    <div><span>Durian</span></div>
    <div><span>Pisang</span></div>
    <div><span>Mangga</span></div>
    <div><span>Strawberi</span></div>
    <div><span>Naka</span></div>
  </div>
</div></pra>


</p>
<p>Saya cuba menentukan <kod>lebar</kod> sifat <kod>.wheel div</code> dengan mengira lilitan roda dibahagikan dengan bilangan sektor. Walau bagaimanapun, ini tidak berfungsi kerana poligon dalam <code>clip-path</code> tidak melengkung, manakala <code><div></code> </p>
<p>Saya dapat mencapai kesan yang saya inginkan daripada 6 kalangan sektor dengan menambahkan beberapa piksel pada lebar <code><div></code>. </p>
<p>

<pre class="brush:css;toolbar:false;">.wheel_container {
  kedudukan: relatif;
  --saiz roda: 360px;
  lebar: var(--saiz roda);
  ketinggian: var(--saiz-roda);
  jidar bawah: 2.4em;
}

.roda {
  paparan: flex;
  justify-content: pusat;
  kedudukan: relatif;
  limpahan: tersembunyi;
  lebar: 100%;
  ketinggian: 100%;
  jejari sempadan: 50%;
  warna latar belakang: aquamarine;
  --segmen-deg: 60deg;
}

.wheel div {
  paparan: flex;
  justify-content: pusat;
  align-item: tengah;
  jawatan: mutlak;
  
  /* Pengubahsuaian */
  lebar: calc((2 * 3.141592653589793 * ((var(--saiz roda) + 37px) / 2)) / 6);
  ketinggian: 50%;
  laluan klip: poligon(0 0, 50% 100%, 100% 0);
  transform-asal: bawah;
  mod penulisan: menegak-rl;
}

.wheel div>span {
  berat fon: 500;
  saiz fon: 1rem;
  text-align: tengah;
  warna: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  warna latar belakang: kuning air;
  ubah: putar(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  warna latar belakang: biru ungu;
  ubah: putar(calc(-3 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(3) {
  warna latar belakang: merah tua;
  ubah: putar(calc(-5 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(4) {
  warna latar belakang: oren;
  transform: putar(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color:violet;
  transform: putar(calc(-9 * var(--segmen-deg) / 2));
}

.wheel div:nth-child(6) {
  warna latar belakang: kuning;
  ubah: putar(calc(-11 * var(--segmen-deg) / 2));
}

  

    
Apple
    
Durian
    
Pisang
    
Mangga
    
Strawberi
    
Naka
  




Namun, kod yang berfungsi untuk 6 sektor tidak akan berfungsi untuk 8 sektor dan seterusnya...
Saya rasa penyelesaiannya mungkin dalam peraturan padding SVG menggunakan clip-path. Walau bagaimanapun, pengetahuan saya tentang SVG hanya setakat ini dan saya memerlukan bantuan. Penyelesaian lain juga dialu-alukan. 

Answer 1

Masalah yang anda hadapi ialah pengiraan .wheel div 的宽度和高度的方式不正确。如果高度是圆的半径：--radius: calc(var(--wheel-size) / 2 );，那么宽度就是 width: calc( 2 * var(--radius ) / 1.732);，其中 1.732 是 Math.sqrt(3). Ini berfungsi untuk roda dengan 6 bahagian, dengan segi tiga (untuk laluan keratan) ialah segi tiga sama sisi.

Dalam contoh anda, lebar adalah sama dengan jejari. Ini tidak mencukupi kerana div melebihi bulatan dan anda mengira laluan keratan berdasarkan saiz div.

Untuk melihat apa yang berlaku, alih keluar jejari sempadan: 50% dan tambahkan bahagian separa lutsinar yang tidak diklip pada roda (laluan klip: tiada;)

console.log(Math.sqrt(3))

*{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}

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>Apple</span></div>
    <div><span>Durian</span></div>
    <div><span>Banana</span></div>
    <div><span>Mango</span></div>
    <div><span>Strawberry</span></div>
    <div><span>Jackfruit</span></div>
  </div>
</div>

Untuk melakukan roda 8 segmen, anda memerlukan --segmen-deg:45 dan .wheel div 的宽度。我使用的是 width: calc( 2 * var(--radius ) / 2.414); yang berbeza, dengan 2.414 ialah tangen (180 - 45) / 2.

let a = 67.5;
const rad = Math.PI / 180;

console.log((Math.tan( a * rad)))

*{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));
}

<kelas div='bekas_roda'>
  <div class='roda'>
    <div><span>Apple</span></div>
    <div><span>Durian</span></div>
    <div><span>Pisang</span></div>
    <div><span>Mangga</span></div>
    <div><span>Strawberi</span></div>
    <div><span>Naka</span></div>
    
    <div><span>merah</span></div>
    <div><span>biru</