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

基本上,我在屏幕上有一个由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度,则转另一种方法。

关于javascript - 选择最短的旋转以对齐两个图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11821118/

10-11 13:16