以与光标

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之间）。理想情况下，此数字应取决于更新间隔，以保持一致的移动速度。