正确的车轮数据XY位置

时间:2019-12-19 16:50:54

标签: javascript reactjs

从我问Calculate Wheel Data XY Position的最后一个问题中,我得到了div子项的X,Y和Rotation。

可以说,父div宽度为414px,因此我将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);
    })
)

下面是输出结果

enter image description here

子X和Y仍然没有在正确位置上的位置,请注意,我无法手动添加顶部或右侧位置值,该值必须使用计算。

0 个答案:

没有答案