选择最短的旋转来排列两个图像

Choosing the shortest rotation to line up two images

本文关键字：两个 图像 排列 旋转 选择      更新时间：2023-09-26

我已经为这个问题挣扎了一段时间，尽管一开始看起来并不难。

基本上，我在屏幕上有一个由javascript动态旋转的三角形。在动画的每一帧中，三角形都会尝试在"正确的方向"上旋转1度，这样它的尖端就会指向屏幕上的另一个div，我可以用箭头键四处移动。这个三角形有以下css属性

#triangle {
    position: absolute;
    left: x;
    top: y;
    -webkit-transform: rotate(degrees)
}

我可以很好地使三角形的点遵循div，只是我不知道如何使点总是采用最短的旋转。有时它会朝着"错误"的方向旋转355度，而不是朝着正确的方向旋转5度。

我有点被卡住了。有人能帮我解决这个问题吗？

谢谢！

我会尝试这样的东西：

function optimal_angle(degrees) {
  degrees = degrees % 360;
  if (degrees > 180) {
    return degrees - 360;
  } else {
    return degrees;
  }
}

还有一些测试：

> optimal_angle(355);
-5
> optimal_angle(-5);
-5
> optimal_angle(124373984);
104

如果你仔细想想，你在任何方向上最多能转180度。因此，为了"优化"一个角度，你可以去除重复的转数（degrees % 360），如果角度超过180度，你可以转向另一个方向。

相关文章：