Javascript 计算车轮数据XY位置

我尝试使用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

更新

在尝试了@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);
    })
)

所有数据均旋转0度

子div仍然没有放置到父div内的正确位置

对于顺时针，它从10开始

---

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

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
常数n=12；
常数r=500；
const radiusList=Array.from（Array（n）.keys（））.map（x=>（360/n）*x）；
const positionPairList=radiusList.map（项=>({
x:Math.sin（（Math.PI*项）/180）*r，
y:Math.cos（（Math.PI*项）/180）*r
}));
返回(
{positionPairList.map（（项，索引）=>{
常数偏移=索引===0？n:0；
返回(
{索引+偏移量}
);
})}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

这是否回答了您的问题@keikai您提到的链接，为计算提供了45度角，我不确定如何计算每个数据的每个度，因为输入数据长度也可能不同。只需将

45

替换为您的计算角度，就完成了。@keikai，如上所述，我已经提到我不确定如何计算每个数据的每个角度Hi，感谢您发布答案，在尝试您的答案时，我面临两个问题，1）所有数据都旋转0度2）值r不等于div parent的宽度，对吗？因为我的方向盘是一个大圆div（例如700px），我尝试将半个350px放在值r中，但子div仍然没有放在父divOK中的正确位置，然后忘记0度，我更新了我的问题，尝试你的答案，x和y仍然不正确的位置，我使用你的x和y表示顶部和左侧，它与父div不匹配，为什么它从10开始？我可以标记你是正确的，似乎你的答案真的很有帮助，但它应该从1开始，而不是12，虽然它是按时钟的，但不是时钟格式，对不起that@FeelRightz如果要从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);