计算车轮数据XY位置 [英] Calculate Wheel Data XY Position

问题描述

我试图使用reactjs创建一个幸运的转盘，首先，我需要将所有输入数据放置到某个XY位置。下面是我需要的预期输出XY位置示例。

I tried to create a lucky draw wheel using reactjs, first, I need to place all the input data to a certain XY position. Below is the expected output XY position example what I need.

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位置。

So I use createElement to create div for each of the data, then using top and left for XY position.

如何计算每个 div

更新

尝试了@keikai答案

After tried the @keikai answer

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

1. 所有数据均旋转0度


2. 子div仍未放在父div内正确的位置


3. 顺时针，它从10开始吗？

推荐答案

更新：以时钟样式旋转显示

Update: rotate display with clock styles

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

这篇关于计算车轮数据XY位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！