HTML5 캔버스를 사용하지 않고 원형 섹터를 동적으로 렌더링하는 방법
<p>행운의 바퀴를 만드는 중인데 섹터 수에 따라 바퀴나 원을 만들고 상품 이름을 채워야 합니다. </p>
<p>섹터 수가 고정된 원에 대한 코드를 완성했습니다. 다음은 6개 섹터를 포함하는 원의 예입니다. </p>
<p>
<pre class="brush:css;toolbar:false;">.wheel_container {
위치: 상대;
--휠 크기: 360px;
너비: var(--wheel-size);
높이: var(--wheel-size);
여백-하단: 2.4em;
}
.바퀴 {
디스플레이: 플렉스;
내용 정당화: 센터;
위치: 상대;
오버플로: 숨김;
너비: 100%;
높이: 100%;
테두리 반경: 50%;
배경색: 청록색;
--세그먼트 각도: 60deg;
}
.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(--segment-deg) / 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(--segment-deg) / 2));
}</pre>
<pre class="brush:html;toolbar:false;"><div class='wheel_container'>
<div class='wheel'>
Apple
두리안
<div><span>바나나</span></div>
<div><span>망고</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 {
위치: 상대;
--휠 크기: 360px;
너비: var(--wheel-size);
높이: var(--wheel-size);
여백-하단: 2.4em;
}
.바퀴 {
디스플레이: 플렉스;
내용 정당화: 센터;
위치: 상대;
오버플로: 숨김;
너비: 100%;
높이: 100%;
테두리 반경: 50%;
배경색: 청록색;
--세그먼트 각도: 60deg;
}
.wheel div {
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
위치: 절대;
/* 수정 */
너비: calc((2 * 3.141592653589793 * ((var(--wheel-size) + 37px) / 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(--segment-deg) / 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(--segment-deg) / 2));
}</pre>
<pre class="brush:html;toolbar:false;"><div class='wheel_container'>
<div class='wheel'>
Apple
두리안
<div><span>바나나</span></div>
<div><span>망고</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>
