無需使用HTML5畫布，實作動態渲染圓形磁區的方法

Question

我正在製作一個幸運輪盤，我需要根據扇區數量創建一個輪盤或圓圈，並填充獎品名稱。

我已經完成了固定扇區數量的圓圈的代碼。這是一個包含6個扇區的圓圈的範例。

.wheel_container {
  position: relative;
  
  --wheel-size: 360px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  margin-bottom: 2.4em;
}

.wheel {
  display: flex;
  justify-content: center;
  
  position: relative;
  overflow: hidden;
  
  width: 100%;
  height: 100%;
  
  border-radius: 50%;
  background-color: aquamarine;
  --segment-deg: 60deg;
}

.wheel div {
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  
  width: calc((2 * 3.141592653589793 * (var(--wheel-size) / 2)) / 6);
  height: 50%;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  
  transform-origin: bottom;
  writing-mode: vertical-rl;
}

.wheel div > span {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  background-color: beige;
  transform: rotate(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  background-color: blueviolet;
  transform: rotate(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:nth-child(3) {
  background-color: crimson;
  transform: rotate(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:nth-child(4) {
  background-color: orange;
  transform: rotate(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color: violet;
  transform: rotate(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:nth-child(6) {
  background-color: yellow;
  transform: rotate(calc(-11 * var(--segment-deg) / 2));
}

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>蘋果</span></div>
    <div><span>榴槤</span></div>
    <div><span>香蕉</span></div>
    <div><span>芒果</span></div>
    <div><span>草莓</span></div>
    <div><span>菠蘿蜜</span></div>
  </div>
</div>

我嘗試透過計算輪盤的周長除以扇區數量來確定.wheel div的width屬性。但是，這不起作用，因為clip-path中的多邊形不是彎曲的，而包含它的

仍然是一個盒子。

我可以透過在

的寬度上添加一些像素來實現我想要的6個扇區圓圈的效果。

.wheel_container {
  position: relative;
  --wheel-size: 360px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin-bottom: 2.4em;
}

.wheel {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: aquamarine;
  --segment-deg: 60deg;
}

.wheel div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  
  /* Modification */
  width: calc((2 * 3.141592653589793 * ((var(--wheel-size) 37px) / 2)) / 6);
  height: 50%;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: bottom;
  writing-mode: vertical-rl;
}

.wheel div>span {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  background-color: beige;
  transform: rotate(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  background-color: blueviolet;
  transform: rotate(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:nth-child(3) {
  background-color: crimson;
  transform: rotate(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:nth-child(4) {
  background-color: orange;
  transform: rotate(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color: violet;
  transform: rotate(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:nth-child(6) {
  background-color: yellow;
  transform: rotate(calc(-11 * var(--segment-deg) / 2));
}

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>蘋果</span></div>
    <div><span>榴槤</span></div>
    <div><span>香蕉</span></div>
    <div><span>芒果</span></div>
    <div><span>草莓</span></div>
    <div><span>菠蘿蜜</span></div>
  </div>
</div>

但是，適用於6個磁區的程式碼無法適用於8個磁區等等...

我認為解決方案可能在使用clip-path的SVG填充規則中。然而，我對SVG的了解僅限於此處，我需要一些幫助。其他解決方案也受歡迎。

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

console.log(Math.sqrt(3))

*{margin:0;padding:0}


.wheel_container {
  position: relative;
  
  --wheel-size: 360px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  margin-bottom: 2.4em;
}

.wheel {
  display: flex;
  justify-content: center;
  
  position: relative;
  overflow: hidden;
  
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  border-radius: 50%;
  background-color: aquamarine;
  --segment-deg: 60deg;
}

.wheel div {
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  
  
  --radius: calc(var(--wheel-size) / 2 );
  height: var(--radius);
  
  width: calc( 2 * var(--radius ) / 1.732);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  
  transform-origin: bottom;
  writing-mode: vertical-rl;
}

.wheel div > span {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  background-color: beige;
  transform: rotate(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  background-color: blueviolet;
  transform: rotate(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:nth-child(3) {
  background-color: crimson;
  transform: rotate(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:nth-child(4) {
  background-color: orange;
  transform: rotate(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color: violet;
  transform: rotate(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:nth-child(6) {
  background-color: yellow;
  transform: rotate(calc(-11 * var(--segment-deg) / 2));
}


..wheel div {transform:none!important}

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>Apple</span></div>
    <div><span>Durian</span></div>
    <div><span>Banana</span></div>
    <div><span>Mango</span></div>
    <div><span>Strawberry</span></div>
    <div><span>Jackfruit</span></div>
  </div>
</div>

為了進行 8 個部分的輪子，您將需要一個 --segment-deg:45 和不同的 .wheel div 的寬度。我使用的是 width: calc( 2 * var(--radius ) / 2.414);，其中 2.414 是 (180 - 45) / 2 的正切值。

let a = 67.5;
const rad = Math.PI / 180;

console.log((Math.tan( a * rad)))

*{margin:0;padding:0}


.wheel_container {
  position: relative;
  
  --wheel-size: 360px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  margin-bottom: 2.4em;
}

.wheel {
  display: flex;
  justify-content: center;
  
  position: relative;
  overflow: hidden;
  
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  border-radius: 50%;
  background-color: aquamarine;
  --segment-deg: 45deg;
}

.wheel div {
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  
  
  --radius: calc(var(--wheel-size) / 2 );
  height: var(--radius);
  
  width: calc( 2 * var(--radius ) / 2.414);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  
  transform-origin: bottom;
  writing-mode: vertical-rl;
}

.wheel div > span {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  background-color: beige;
  transform: rotate(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  background-color: blueviolet;
  transform: rotate(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:nth-child(3) {
  background-color: crimson;
  transform: rotate(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:nth-child(4) {
  background-color: orange;
  transform: rotate(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color: violet;
  transform: rotate(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:nth-child(6) {
  background-color: yellow;
  transform: rotate(calc(-11 * var(--segment-deg) / 2));
}


.wheel div:nth-child(7) {
  background-color: red;
  transform: rotate(calc(-13 * var(--segment-deg) / 2));
}

.wheel div:nth-child(8) {
  background-color: blue;
  transform: rotate(calc(-15 * var(--segment-deg) / 2));
}

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>Apple</span></div>
    <div><span>Durian</span></div>
    <div><span>Banana</span></div>
    <div><span>Mango</span></div>
    <div><span>Strawberry</span></div>
    <div><span>Jackfruit</span></div>
    
    <div><span>red</span></div>
    <div><span>blue</