HTML5 캔버스를 사용하지 않고 원형 섹터를 동적으로 렌더링하는 방법

Question

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

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'>
    
Apple
    
두리안
    <div><span>바나나</span></div>
    <div><span>망고</span></div>
    <div><span>딸기</span></div>
    <div><span>잭프루트</span></div>
    
    
빨간색
    <div><span>파란색</