小鼠作为消失点

Question

在这个Fiddle中，您可以看到我的实现。

它基本上起作用了，但是有一些角度突然变得不平滑的点。用鼠标玩，找出答案。 （当鼠标的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下检查过这个。它似乎有重大的性能问题。 所以这个原型适用于Chrome。任何有关性能和浏览器兼容性的建议也表示赞赏。

Answer 1

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

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

lineRad = Math.atan2(vertDist, horDist);

fiddle

此外，您可能会获得更好的性能，将变换原点设置为apropiate，而不是设置aditional translateY