检测不规则形状(Detecting irregular Shape)

从这个问题通往检测鼠标精确坐标，我已经在过去的几天里学到了很多。下面是我挑的关于这个主题最好的学习资源：

http://gamedev.tutsplus.com/tutorials/implementation/quick-tip-use-quadtrees-to-detect-likely-collisions-in-2d-space/
http://www.gamedev.net/page/resources/_/technical/graphics-programming-and-theory/quadtrees-r1303
http://jsfiddle.net/2dchA/2/

在代码（3）作品中的jsfiddle，但在我的测试环境（VS2012）此分节符：

var myTree = new Quadtree({
  x: 0,
  y: 0,
  width: 400,
  height: 300
});

与消息四叉树在IE未定义。 FF和铬只是粉饰它，并显示一个空白页。我无法把它清除出来。 问题1：是否有人可以帮帮忙吗？

我的主要问题：我有一个区域（像地图地块）在HTML5中，没有JPG或PNG图像绘制的约1500宗。这是一个很多行代码来完成这一点，但渲染是很大的，所以我保持这种方式。我打算有一个鼠标悬停事件告诉我，我站在鼠标停止时在其包裹。正如您将在上一问题中看到提到我以前的尝试没有令人印象深刻。基于学习我一直在做，并感谢肯·J的答案/评论，我想一起去切了我的画布的这种新方法将各说100名对象的15个四边形。不过，我想一些指导之前，我再大胆潜水走错了路。

问题2：我应该切片它在创建或当鼠标移动到一个区域的切片应该发生，即落后的鼠标？后者听起来更好给我，但我想我可以用一些建议做，如果可能的话，有些开始了代码。四叉树的概念是完全新的给我。谢谢。

Answer 1:

不能与问题1帮助。

你一定要尽可能早地建立了树，因为其目标是让页面尽可能快速响应一旦用户点击某个地方。

保持树，只要用户与2D区域相互作用。更新四叉树应该不会太辛苦，所以即使面积变化的内容，你应该能够重用现有的树（只更新）。

Answer 2:

鉴于您的绘图区是众所周知我在空间散列函数看到一个四叉树没有优势。这个功能会给你出（X，Y）点的整数。

var blocWidth   = 20;
var blocHeight  = 20;
var blocsPerLine = ( 0 | ( worldWidth / blocWidth) ) + 1 ; 
function hashPoint(x,y) {
   return ( 0 | (x/blocWidth)) + blocsPerLine*(0|(y/blocHeight));
}

一旦你建立了，散列一个阵列内所有的包裹：

parcelHash = [];

function addHash(i,p) {
   if (!parcelHash[i]) { parcelHash[i]=[ p ]; return; }
   if (parcelHash[i].indexOf(p) != -1 ) return;
   parcelHash[i].push(p);
}

function hashParcel (p) {
     var thisHash = hashPoint(p.x,p.y); // upper left
     addHash( thisHash, p);
     thisHash = hashPoint(p.x+width, p.y); // upper right
     addHash(thisHash, p);
     thisHash = hashPoint(p.x, p.y+p.height); // lower left
     addHash(thisHash, p);
     thisHash = hashPoint(p.x+width, p.y+p.height); // lower right
     addHash(thisHash, p);         
};

for (var i=0; i<allParcels.length; i++) { hashParcel(allParcels[i]) };

现在，如果你有一个鼠标的位置，你可以检索在同一块与所有的包裹：

  function getParcels(x,y) {  
       var thisHash = hashPoint(x,y); 
       return parcelHash[thisHash]; 
    }

Answer 3:

我只是给你，除了别人说一些提示。

......有一个鼠标悬停事件告诉我，我站在这包裹...

从您的其他消息我得出结论，包裹会有不规则的形状。与矩形一般工作四叉树，所以你必须计算周围包裹的形状的边框并插入四叉树是矩形。然后是当你要确定鼠标是否是在一个包裹，你会查询，这将给你一套包裹，可能是鼠标下的四叉树，但你必须然后做你自己更精确的检查看它是否确实是。

......当鼠标停止。

从您的其他问题，我看到你尝试当鼠标已经“停止”来检测。也许你应该看看这样说：鼠标光标一动不动，它的瞬移在屏幕上从以前的点到下一个。它总是停了下来，一动不动。这似乎有点哲学，但它会保持你的代码更简单。你一定要能够达到你的原意，没有任何的setTimeout检查。

......切了我的画布到每说100名对象的15个四边形。
......我应该切片它在创建或当鼠标移动到一个区域的切片应该发生

你不会（也不能）做切片，四叉树实现不执行自动（这是它的目的），当您插入或从中删除项（注意，移动该项目实际删除然后重新插入它）。

我没有考虑您使用四叉树的实现，但这里是在情况下，两个MX-CIF四叉树实现一个不适合你的工作：

https://github.com/pdehn/jsQuad
https://github.com/bjornharrtell/jsts/tree/master/src/jsts/index/quadtree

问题1，问题可能是因为的jsfiddle（HTTP）网页正试图访问quadtree.js这是对HTTPS

文章来源: Detecting irregular Shape