检测不规则形状 [英] Detecting irregular Shape

问题描述

从这个问题开始精确地检测鼠标坐标，在过去的几天里，我学到了很多东西.以下是我选作该主题的最佳学习资源:

Leading up from this question Detecting mouse coordinates with precision, I have learnt quite a bit in the past few days. Here are what I picked as best learning resources on this topic:

1. http://www .gamedev.net/page/resources/_/technical/graphics-programming-and-theory/quadtrees-r1303
2. http://jsfiddle.net/2dchA/2/

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

(3)中的代码可在JSFiddle中使用，但在我的测试环境(VS2012)的本节中有所中断:

The code in (3) works in JSFiddle but breaks at this section in my testing environment (VS2012):

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

带有消息Quadp的

在IE中未定义. FF& Chrome只是在上面遮盖并显示空白页面.我无法解决. 问题1:有人可以帮忙吗?

with the message Quadtree is undefined in IE. FF & Chrome just gloss over it and display an empty page. I couldn't sort it out. Question 1: Can someone help out with that?

我的主要问题: 我有一个区域(像地图一样的土地)，大约有1500个用html5绘制的地块，而不是jpg或png图像.需要完成很多代码行，但是渲染效果很好，所以我会保持这种状态.我打算进行一次鼠标悬停事件，告诉我鼠标停下时我站在哪个包裹上.正如您将在上一个问题中看到的那样，我以前的尝试并没有给人留下深刻的印象.根据我一直在学习的经验，并感谢Ken J的回答/评论，我想采用这种新方法，将我的画布切成15个四边形(每个100个对象).但是，在我以错误的方式进行另一次野蛮潜水之前，我需要一些指导.

My main question: I have a region (parcels of land like a map) with about 1500 parcels drawn in html5, not jpg or png images. It is a lot of lines of code to complete that but the rendering is great, so I am keeping it that way. I intend to have a mouseover event tell me which parcel I am standing on when the mouse stops. As you will see in the previous question referred my previous attempts were not impressive. Based on the learning I have been doing, and thanks to Ken J's answer/comments, I would like to go with this new approach of slicing up my canvas into say 15 quads of 100 objects each. However, I would like some guidance before I take another wild dive the wrong way.

问题2:我应该在创建时对其进行切片，还是应该在鼠标悬停在某个区域(即跟踪鼠标)上时进行切片?后者对我来说听起来更好，但我认为我可以提出一些建议，如果可能的话，可以从一些代码入手.四叉树的概念对我来说是全新的.谢谢.

Question 2: Should I slice it up at creation or should the slicing happen when the mouse is over a region, ie, trail the mouse? The latter sounds better to me but I think I can do with some advice and, if possible, some start out code. The quadtree concept is completely new to me. Thanks.

推荐答案

鉴于您的绘制区域广为人知的事实，我认为QuadTree与空间哈希函数相比没有优势.此函数将为您提供(x，y)点之外的整数.

Given the fact that your draw area is well know i see no advantage in a QuadTree over a spacial hash function. This function will give you an integer out of an (x,y) point.

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

构建完后，将数组中的所有地块散列:

once you built that, hash all your parcels within an array :

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]) };

现在，如果您有鼠标位置，则可以在 与:相同的块:

now if you have a mouse position, you can retrieve all the parcels in the same block with :

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

这篇关于检测不规则形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！