1

我知道有这个问题建议在每次鼠标移动时循环遍历所有画布元素。

但是，有没有比遍历所有元素更有效的方法？

我在画布上有很多元素，每次鼠标移动时循环遍历它们可能非常非常慢。

4

2 回答 2

2

是的，您必须遍历所有元素。

这就是几乎所有命中测试/对象选择的工作原理。

现在您可以进行很多优化，例如在测试对象的实际边界之前确保鼠标坐标位于对象的矩形边界内（除非它们都是矩形，这将使一切变得方便快捷，即使有 10,000 个对象）。如果您有一百万个对象，您还可以将它们的位置分成象限，或者添加一层隔离。

但是在一天结束时，您需要遍历每个相关对象并询问其边界是否与鼠标点相交。没有办法解决这个问题。它应该很快，如果你实现了一些非常慢的东西，那么你应该发布它，这样我们就可以看看并给你指点。

如果您需要查看一个实时示例，我制作了一个关于在画布中挑选和移动形状的简单教程，以准确解释这种情况。

于 2012-10-09T15:45:14.650 回答
0

在 javascript 中循环遍历 10000 个元素仍然不费吹灰之力。

但是，您可能会考虑在每次鼠标移动时都以一定的间隔循环遍历它们。

var mouseX, mouseY;

$(document).on("mousemove", function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;

  /* dont do any probing there */

});

setInterval(function() {
  checkCollision();
}, 25);
于 2012-10-10T01:00:35.080 回答