javascript - 计算车轮数据 XY 位置

Question

我尝试使用reactjs创建一个幸运抽奖轮，首先，我需要将所有输入数据放置到某个XY位置。下面是我需要的预期输出 XY 位置示例。

var renderData = ["1","2","3","4","5","6","7","8","9","10","11","12"];
React.createElement('div', { className: '_data'},
    renderData.map((index,item)=>{
        var itemPosition = index / renderData.length * 360;
        var itemX = itemPosition * Math.PI/180;
        var itemY = itemPosition * Math.PI/180;
        return React.createElement('div', { className: '_items',
            style:{top:itemX,left:itemY}
        },item);
    })
)

因此，我使用 createElement 为每个数据创建 div，然后使用 top 和 left 创建XY 位置。

如何计算每个div的XY位置

更新

尝试了@keikai的答案后

var renderData = ["1","2","3","4","5","6","7","8","9","10","11","12"];
const r = 350;
const len = renderData.length;
const radiusList = renderData.map(x => (360 / len) * (x - 1));
const positionPairList = radiusList.map(x => ({
        x: Math.sin((Math.PI * x) / 180) * r,
        y: Math.cos((Math.PI * x) / 180) * r
}));
React.createElement('div', { className: '_data'},
    renderData.map((item, index) => {
        return React.createElement('div', { className: `_items`,
            style:{top:`${positionPairList[index].x.toFixed(2)}px`,left:`${positionPairList[index].y.toFixed(2)}px`}
        },item);
    })
)

1. 所有数据均旋转 0deg
2. 子 div 仍未放置在父 div 内的正确位置
3. 顺时针方向，从10开始？

Answer 1

更新:使用时钟样式旋转显示

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const n = 12;
  const r = 500;

  const radiusList = Array.from(Array(n).keys()).map(x => (360 / n) * x);
  const positionPairList = radiusList.map(item => ({
    x: Math.sin((Math.PI * item) / 180) * r,
    y: Math.cos((Math.PI * item) / 180) * r
  }));
  return (
    <div className="App">
      {positionPairList.map((item, index) => {
        const offset = index === 0 ? n : 0;
        return (
          <div
            className="Parts"
            style={{
              top: `${r - item.y.toFixed(0)}px`,
              right: `${r + 200 - item.x.toFixed(0)}px`,
              transform: `rotate(${radiusList[index]}deg)`
            }}
          >
            {index + offset}
          </div>
        );
      })}
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);