Bagaimana untuk mencipta sektor bulatan CSS yang sempurna

Baru-baru ini, saya membina rolet jackpot CSS, sebuah projek yang memberikan cabaran yang unik: menyerlahkan sektor secara dinamik seperti yang ditunjuk oleh jarum kepadanya. Rolet memerlukan responsif dan kiraan sektor berubah-ubah, menolak imej mudah atau penyelesaian SVG. Pengiraan geometri adalah penting.

Pendekatan saya melibatkan pusingan rentang mengelilingi pusat bulatan dan memotongnya di sepanjang jejari. Persediaan awal, diperincikan di bawah (dan tersedia sepenuhnya melalui pautan lebih jauh ke bawah), melibatkan penggayaan asas dan putaran tambahan rentang (360/sectors.length degrees). Ia tidak canggih secara visual pada peringkat ini.

Untuk menyerlahkan sektor, saya memerlukan jarak antara dua titik pada bulatan, diberi jejari dan sudut. Formulanya ialah:

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

di mana θ ialah sudut dalam radian. Ditukar untuk kegunaan:

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

Seterusnya, saya menangani keratan sektor untuk mengelakkan pertindihan. Percubaan pertama saya menggunakan laluan klip pepenjuru:

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

Ini berfungsi dengan baik dengan banyak sektor, tetapi kelemahan menjadi ketara dengan sektor yang lebih sedikit, terutamanya dengan hanya tiga, seperti yang ditunjukkan:

Penyelesaian melibatkan pengiraan titik persilangan antara rentang dan bulatan, memotong dari titik itu ke pusat. Ini membetulkan keratan:

Penyelidikan menghasilkan formula untuk segmen yang dicipta pada sinar mendatar oleh garis yang menghubungkan titik persilangan:

Segmen tengah:

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

Segmen luar:

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

(θ dalam radian)

Nisbah antara segmen ini menentukan titik keratan, yang membawa kepada:

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

Yang diperbetulkan clip-path:

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

Hasil akhir berasaskan Vue membenarkan putaran rawak melalui klik tengah dan putaran disasarkan melalui klik sektor. (Pautan ke kod lengkap ditinggalkan, seperti dalam teks asal). Projek ini memberikan pelajaran berharga dalam trigonometri praktikal.

Atas ialah kandungan terperinci Bagaimana untuk mencipta sektor bulatan CSS yang sempurna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!