React - 计算圆圈中的点位置

Question

我有一个像这样的轮子：

我想把黄色灯泡放在圆圈上，我正在考虑用position: "absolute", top: xxx, left: yyy来实现这个，我想我需要一些数学来计算相应的top和left/right 每个灯泡，但我不知道如何。

Answer 1

您可以使用以下函数来获取 X 和 Y 坐标

半径为 100 像素的圆示例：

function getCircleY(radians, radius) {
  return Math.sin(radians) * radius;
}

function getCircleX(radians, radius) {
  return Math.cos(radians) * radius;
}

console.log("Y coord at 0 degree", getCircleY(0, 100));
console.log("X coord at 0 degree", getCircleX(0, 100));


console.log("Y coord at 180 degree", getCircleY(Math.PI, 100));
console.log("X coord at 180 degree", getCircleX(Math.PI, 100));

看看这个https://en.wikipedia.org/wiki/Radian

React - 计算圆圈中的点位置

React - calculate dots position in a circle

css

math

react-native