HTML5キャンバスを使用せずに円形セクターを動的にレンダリングする方法

Question

<p>フォーチュン ホイールを作成しています。セクターの数に基づいてホイールまたは円を作成し、賞品の名前を記入する必要があります。 </p> <p>固定セクタ数の円のコードが完成しました。以下は 6 つのセクターを含む円の例です。 </p> <p> <pre class="brush:css;toolbar:false;">.wheel_container { 位置: 相対的; --ホイールサイズ: 360ピクセル; 幅: var(--wheel-size); 高さ: var(--wheel-size); マージン-ボトム: 2.4em; } 。車輪 { ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 位置: 相対的; オーバーフロー: 非表示; 幅: 100%; 高さ: 100%; 境界半径: 50%; 背景色: アクアマリン; --セグメント度: 60度; } .wheel div { ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; 位置: 絶対; 幅: calc((2 * 3.141592653589793 * (var(--wheel-size) / 2)) / 6); 高さ: 50%; クリップパス: ポリゴン(0 0, 50% 100%, 100% 0); 変換原点: 下; 書き込みモード: 垂直rl; } .wheel div > スパン { フォントの太さ: 500; フォントサイズ: 1rem; テキスト整列: 中央; 色: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { 背景色: ベージュ; 変換: 回転(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { 背景色: 青紫; 変換: 回転(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { 背景色: 深紅; 変換: 回転(calc(-5 * var(--セグメント度) / 2)); } .wheel div:nth-child(4) { 背景色: オレンジ; 変換: 回転(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { 背景色:紫; 変換: 回転(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { 背景色: 黄色; 変換: 回転(calc(-11 * var(--セグメント度) / 2)); }</pre> <pre class="brush:html;toolbar:false;"><div class='wheel_container'> <div class='wheel'> <div><span>Apple</span></div>

ドリアン

バナナ

<div><span>マンゴー</span></div> <div><span>ストロベリー</span></div>

ジャックフルーツ

</div> </div></pre> </p> <p>ホイールの円周をセクター数で割って計算することで、<code>.wheel div</code> の <code>width</code> プロパティを決定しようとしました。ただし、<code>clip-path</code> 内のポリゴンは曲がっていませんが、ポリゴンを含む <code><div></code> はまだボックスであるため、これは機能しません。 </p> <p><code><div></code> の幅にいくつかのピクセルを追加することで、6 つのセクター円の希望の効果を実現することができました。 </p> <p> <pre class="brush:css;toolbar:false;">.wheel_container { 位置: 相対的; --ホイールサイズ: 360ピクセル; 幅: var(--wheel-size); 高さ: var(--wheel-size); マージン-ボトム: 2.4em; } 。車輪 { ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 位置: 相対的; オーバーフロー: 非表示; 幅: 100%; 高さ: 100%; 境界半径: 50%; 背景色: アクアマリン; --セグメント度: 60度; } .wheel div { ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; 位置: 絶対; /* 修正 */ 幅: calc((2 * 3.141592653589793 * ((var(--wheel-size) 37px) / 2)) / 6); 高さ: 50%; クリップパス: ポリゴン(0 0, 50% 100%, 100% 0); 変換原点: 下; 書き込みモード: 垂直rl; } .wheel div>span { フォントの太さ: 500; フォントサイズ: 1rem; テキスト整列: 中央; 色: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { 背景色: ベージュ; 変換: 回転(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { 背景色: 青紫; 変換: 回転(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { 背景色: 深紅; 変換: 回転(calc(-5 * var(--セグメント度) / 2)); } .wheel div:nth-child(4) { 背景色: オレンジ; 変換: 回転(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { 背景色:紫; 変換: 回転(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { 背景色: 黄色; 変換: 回転(calc(-11 * var(--セグメント度) / 2)); }</pre> <pre class="brush:html;toolbar:false;"><div class='wheel_container'> <div class='wheel'> <div><span>Apple</span></div>

ドリアン

バナナ

<div><span>マンゴー</span></div> <div><span>ストロベリー</span></div>

ジャックフルーツ

</div> </div></pre> </p> <p>ただし、6 セクターで機能するコードは 8 セクターでは機能しません...</p> <p>解決策は <code>clip-path</code> を使用する SVG パディング ルールにあると思います。ただし、私の SVG に関する知識はこれまでしかなく、助けが必要です。他のソリューションも歓迎です。 </p>

Answer 1

あなたが抱えている問題は、.wheel div の幅と高さが正しく計算されていないことです。高さが円の半径である場合: --radius: calc(var(--wheel-size) / 2 );、幅は width: calc( 2 * var( --radius ) / 1.732);、1.732 は Math.sqrt(3) です。これは、三角形 (クリッピング パス用) が正三角形である 6 つの部分からなるホイールで機能します。

この例では、幅は半径と同じです。 div が円を超えており、div のサイズに基づいてクリッピング パスを計算したため、これでは十分ではありません。

何が起こっているのかを理解するために、border-radius: 50%; を削除し、半透明のクリップされていない部分をホイールに追加します (clip-path: none;)

リーリー リーリー リーリー

8 セグメント ホイールを実行するには、--segment-deg:45 と別の .wheel div 幅が必要です。 width: calc( 2 * var(--radius ) / 2.414); を使用しています。ここで、2.414 は (180 - 45) / 2 の正接です。

リーリー リーリー

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>Apple</span></div>
    
ドリアン
    
バナナ
    <div><span>マンゴー</span></div>
    <div><span>ストロベリー</span></div>
    
ジャックフルーツ
    
    
赤
    
青