如何創建完美的 CSS 圓形扇區

最近，我建立了一個 CSS 大獎輪盤賭，該專案提出了一個獨特的挑戰：當指針指向扇區時動態突出顯示扇區。 輪盤賭需要響應能力和可變扇區計數，排除了簡單的圖像或 SVG 解決方案。 幾何計算是必不可少的。

我的方法涉及圍繞圓心旋轉跨度並沿著半徑剪裁它們。 以下詳細介紹了初始設定（可透過下面的連結查看完整內容），涉及基本樣式和跨度增量旋轉（360/sectors.length 度）。 這個階段的視覺效果並不複雜。

為了突出顯示一個扇區，我需要給定半徑和角度的圓上兩點之間的距離。 公式為：

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

其中 θ 是以弧度表示的角度。 轉換使用：

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

接下來，我解決了扇區剪切問題以防止重疊。我的第一次嘗試使用了對角線剪輯路徑：

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

這對許多扇區都有效，但缺陷在扇區較少時變得明顯，特別是只有三個扇區，如圖所示：

解決方案涉及計算跨度和圓之間的交點，從該點到中心進行裁剪。這修正了剪輯：

研究得出了連接交點的線在水平射線上創建的線段的公式：

中心部分：

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

外段：

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

（θ，以弧度表示）

這些片段之間的比例決定了剪切點，導致：

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

更正後的clip-path：

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

基於 Vue 的最終結果允許透過中心點擊進行隨機旋轉，並透過磁區點擊進行定向旋轉。 （省略了完整程式碼的鏈接，按照原文）。 這個計畫提供了實用三角學的寶貴課程。

以上是如何創建完美的 CSS 圓形扇區的詳細內容。更多資訊請關注PHP中文網其他相關文章！