IT技术 - 计算车轮数据 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 位置。

如何计算每个的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 开始？

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