jquery - 鼠标作为消失点

Question

在此Fiddle你可以看到我的实现。

基本上可以正常使用，但有一些地方 Angular 变化突然且不平滑。玩你的鼠标，找出答案。 (当鼠标的 X 位置在消失线的 X 位置附近时)。我也不明白为什么消失的线没有跟随鼠标超过 45°。

lineRad = Math.asin(Math.sin(vertDist / mouseLineDist));

lineRad = (mouseX - lineX) >= 0 ? lineRad : -lineRad  + Math.PI;
lineRad = (mouseY - lineY) >= 0 ? lineRad : -lineRad;

这可能是跳跃的起源，但我不确定。

我刚刚在 Firefox 下检查过这个。它似乎有主要的性能问题。所以这个原型(prototype)适用于 Chrome。对于性能和浏览器兼容性的任何建议也将受到赞赏。

Answer 1

你缺少函数atan2，它在一行中完美地解决了你的问题:

horDist = (mouseX - lineX);
vertDist = (mouseY - lineY);

lineRad = Math.atan2(vertDist, horDist);

fiddle

此外，将变换原点设置为合适的，而不是设置额外的平移 Y，您可能会获得更好的性能