向与光标相反的方向移动对象

Question

我正在尝试使用名为 paperscript 的 2D 图形库完成一个简单的任务。我有一个点网格，我想根据鼠标光标的位置重新计算这些点的位置，以便该点从其原始位置沿与鼠标光标从原始位置相反的方向移动，并且位移的距离与鼠标光标到原始位置的距离成反比。希望这张图能让它更清楚一点：

我知道如何获取鼠标的当前位置，以及每个点的位置。我一直遇到的麻烦是创建一个函数，该函数将采用这两个变量并使用它来计算每个点的新位置，从而产生上述效果。

我这里有一个 jsfiddle，其中包含我目前创建的内容。 https://jsfiddle.net/yc62k/247xwh8q/4/

function onFrame(event) {

     //Loop through all the dots
     for (i = 0; i < count; i++) {
     var item = project.activeLayer.children[i];

     //Update the position of the dot based on the mouse position
     ??????

     item.position = new Point(
         (newPosition.x),
         (newPosition.y)
     );
 }
}

任何人都可以建议我可以在这个函数中使用的算法来获得这种效果吗？或者指出我将用来解决这个问题的数学方向？任何帮助将不胜感激！

Answer 1

如果点的旧位置是pDot，鼠标的位置是pMouse，那么移动的方向是

dir = pDot - pMouse

要建立所需的比例（与距离成反比），只需除以平方长度即可。那么，新的位置是：

pDotNew = pDot + dir * (1.0 / squaredLength(dir))

注意更新位置的频率。如果您非常频繁地更新它们，这些点可能会移动得非常快。如果是这种情况，请将方向乘以一个小数字（0 到 1 之间）。理想情况下，这个数字应该取决于更新间隔，以保持一致的移动速度。

向与光标相反的方向移动对象

Moving an object in the opposite direction to the cursor

graphics

2d