Javascript 正确的车轮数据XY位置
从我问的最后一个问题中,我得到了Javascript 正确的车轮数据XY位置,javascript,reactjs,Javascript,Reactjs,从我问的最后一个问题中,我得到了div子对象的X、Y和旋转 比方说,父div宽度是414px,因此我除以2是207表示const r var renderData = ["1","2","3","4","5","6","7","8","9","10","11","12"]; const r = 207; const len = renderData.length; const radiusList = Array.from(Array(len).keys()).map(x => (360
div
子对象的X、Y和旋转
比方说,父div宽度是414px
,因此我除以2是207
表示const r
var renderData = ["1","2","3","4","5","6","7","8","9","10","11","12"];
const r = 207;
const len = renderData.length;
const radiusList = Array.from(Array(len).keys()).map(x => (360 / len) * x);
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:`${r - positionPairList[index].y.toFixed(0)}px`,
right:`${r - positionPairList[index].x.toFixed(0)}px`,
transform: `rotate(${radiusList[index]}deg)`},
},item);
})
)
下面是输出结果
子X和Y仍然没有正确的位置,请注意,我无法手动添加顶部或右侧位置值,该值必须使用计算。看起来需要为
r
和偏移量使用较小的值(添加一点)x和y值。圆圈太小,中心移到了左下角。@AndrewMorton但我不能添加x和y值,这必须在计算中完成,有什么建议吗?…或者太大-我不知道你想要的是里面还是外面的数字。@Zydnar在灰色的父项中