HTML5キャンバスを使用せずに円形セクターを動的にレンダリングする方法
<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>
