0

假设我有一个特定的 div(目标),我可以使用输入设备四处移动(在我的情况下,div 使用 Leap Motion 根据我手指的位置移动),我想知道 div 何时与其他页面上的 div(障碍)。

我编写了一个简单的函数来测试两个 div 何时重叠,如果页面上只有几个障碍 div,我们可能会使用该函数来测试页面上的所有障碍 div 与目标 div . 但是,当页面上有很多项目时,这会很快变得昂贵,尤其是当我们在每个刻度上调用该函数时(Leap Motion 每秒调用该函数 60 次)。

我想知道我们可以使用哪些方法来加快这个过程?我在想 a) 由于页面上的障碍物 div 不会移动,我们可以只计算一次障碍物 div 的坐标,然后缓存结果而不是在每次调用时重新计算,b) 我们可以将障碍物 div 建模为按 x 坐标排序的二叉树。这样,我们就不需要测试所有的障碍物 div,只测试那些靠近移动 div 的障碍物。

只是想问是否有更好的方法来做到这一点?

function overlapHelper($obj, $obstacle) {
  var xAxisOverlapping, yAxisOverlapping;

  var $objCoordinates = {
    left: parseInt($obj.css('left'), 10),
    top: parseInt($obj.css('top'), 10),
    right: parseInt($obj.css('left'), 10) + $obj.width(),
    bottom: parseInt($obj.css('top'), 10) + $obj.height()
  };

  var $obstacleCoordinates = {
    left: parseInt($obstacle.css('left'), 10),
    top: parseInt($obstacle.css('top'), 10),
    right: parseInt($obstacle.css('left'), 10) + $obstacle.width(),
    bottom: parseInt($obstacle.css('top'), 10) + $obstacle.height()
  }


  xAxisOverlapping = ($objCoordinates.left >= $obstacleCoordinates.left && $objCoordinates.left <= $obstacleCoordinates.right)
    || ($objCoordinates.right >= $obstacleCoordinates.left && $objCoordinates.right <= $obstacleCoordinates.right);


  yAxisOverlapping = ($objCoordinates.bottom >= $obstacleCoordinates.top && $objCoordinates.bottom <= $obstacleCoordinates.bottom)
    || ($objCoordinates.top >= $obstacleCoordinates.top && $objCoordinates.top <= $obstacleCoordinates.bottom);

  return xAxisOverlapping && yAxisOverlapping;
}
4

1 回答 1

1

您的需求似乎与此类似:

JavaScript 冲突检测

除了链接中的信息之外,如果障碍 div 的数据来自脚本中的某个位置,您可以尝试在此处缓存值并将 DOM 访问减少到最低限度。

于 2014-03-14T03:34:38.850 回答