In my attempt to develop a lucky draw wheel using reactjs, I needed to position all the input data at specific XY coordinates. Below is an example of the expected output XY positions that I require.
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);
})
)
Using createElement, I created a div for each piece of data and set the XY position using the top and left attributes.
To calculate the XY position for each div:
Update
After following @keikai's suggestion:
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);
})
)
https://i.sstatic.net/hAxXF.png
- All data are rotated at 0 degrees.
- The child divs are still not positioned correctly inside the parent div.
- For clockwise rotation, does it start from 10?