将并排的Rects连接到一个大的Rect

Question

我对以下游戏地图有疑问：

我想保存数组中的所有陆地区域（接近黄色），以便计算机稍后知道用户的点击是否在水面上（鼠标指针的x / y坐标不在阵列中）或在国家（x / y坐标光标不在数组中）。我已经做过（基本的视觉表现）： 可以看出，陆地区域覆盖着同样大的矩形，这些矩形在数组中存储如下：

{x:upper left corner - X-postion, y: upper left corner - Ypostion, x1:width of the rect, y1: height of the rect}
example: {x:0, y:0, x1:3, y2: 2}

这些obejcts都存储在一个大数组中。但是确定阵列中的一个点（陆地区域）是否在阵列（水域）中是否需要太长时间。 （需要45毫秒）我现在想要合并这些小的单个矩形，从而形成更大的矩形，可以更快地与鼠标位置进行比较。像这个手工例子： 如果它可能这些小矩形对象应该添加到一个大矩形（如绿色或棕色）。 直到我找不到任何要做的事情，所以我希望你能帮助我。还有一个问题：我保存所有小部分的数组非常大（超过100.000个元素）。它们都存储如下：

[{x:0, y: 0, x1:3, y1:2},{x:0, y: 2, x1:3, y1:2},{x:0, y: 4, x1:3, y1:2}]

如果解决方案需要超过10分钟或类似的话，这不是问题。

Answer 1

这是@ m69的想法的实现。

创建一个表示每个像素island / isNotLand状态的数组。

您可以使用getImageData来获取每个像素的RGBA信息。淡黄色的土地具有较高的红色值，而海洋具有较低的红色值，因此使用红色值来确定土地与海洋的比较。将那些isLand / isNotLand值放入数组（land）。

var land;
var data=context.getImageData(0,0,canvas.width,canvas.height).data;
land=new Array(data.length/4);
for(var i=0;i<data.length;i+=4){
    var red=data[i];
    land[i/4]=(red>200)?true:false;
}

然后你可以像这样有效地测试鼠标是否在陆地或海洋上：

function isLand(x,y){
    return(land[mouseY*canvas.width+mouseX]);    
}

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

var land;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/map2.jpg";
function start(){   
    cw=canvas.width=img.width;
    ch=canvas.height=img.height;

    ctx.drawImage(img,0,0);

    var data=ctx.getImageData(0,0,cw,ch).data;
    land=new Array(data.length/4);
    for(var i=0;i<data.length;i+=4){
        var red=data[i];
        land[i/4]=(red>200)?true:false;
    }
    
    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}

function isLand(x,y){
    return(land[mouseY*cw+mouseX]);    
}

function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // is land under mouse?
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  if(isLand(mouseX,mouseY)){
      ctx.fillStyle='red';
      ctx.fillRect(mouseX,mouseY,1,1);
  }else{
      ctx.fillStyle='blue';
      ctx.fillRect(mouseX,mouseY,1,1);
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse over map.<br>Land draws a red rect. Ocean draws a blue rect</h4>
<canvas id="canvas" width=300 height=300></canvas>