反应-计算圆圈中的圆点位置

Question

我有个轮子看起来像这样：

​

​

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

Answer 1

您可以使用以下函数根据圆的大小及其中心得到X和Y的和弦。

例如一个半径为100 px的圆：

​

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

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

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

console.log("X coord at 90 degree:", getCircleX(Math.PI / 2, 100));
console.log("Y coord at 90 degree:", getCircleY(Math.PI / 2, 100), "(= 0)");

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

// Angle as radians on a circle (radius 100px)
//      
//       x <-- 0°, 2π or 0 radians => x: 0px, y: 100px
//       |
//       |
// x-----0-----x <-- 90°, π / 2 radians => x: 100px, y: 0px
//       |
//       |
//       x <-- 180°, π radians => x: 0px, y: -100px

​

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