完全な CSS 円セクターを作成する方法

最近、私は CSS ジャックポット ルーレットを構築しました。これは、針が指すセクターを動的に強調表示するという、ユニークな課題を提示したプロジェクトです。 ルーレットには応答性と可変セクター数が必要で、単純な画像や SVG ソリューションは除外されました。 幾何学的な計算は不可欠でした。

私のアプローチでは、円の中心を中心にスパンを回転し、半径に沿ってクリップする必要がありました。 以下に詳しく説明されている初期設定 (さらに下のリンクから完全に入手できます) には、基本的なスタイル設定とスパンの増分回転 (360/sectors.length 度) が含まれていました。 この段階ではまだ視覚的に洗練されていませんでした。

セクターを強調表示するには、半径と角度を指定した円上の 2 点間の距離が必要でした。 式は次のとおりです:

<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>

これは多くのセクターで適切に機能しましたが、以下に示すように、セクターが少なく、特に 3 つだけのセクターでは欠陥が明らかになりました。

解決策には、スパンと円の間の交点を計算し、その点から中心までクリッピングすることが含まれていました。これによりクリッピングが修正されました:

研究により、交点を結ぶ線によって水平線上に作成されるセグメントの式が得られました。

中央セグメント:

<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 中国語 Web サイトの他の関連記事を参照してください。