计算车轮数据XY位置

Question

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

geom_errorbar

因此，我使用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用于XY位置。

如何计算每个left的XY位置

更新

尝试了@keikai答案

div

1. 所有数据都旋转0度
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);