javascript - 将并排 react 连接到一个大Rect

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

我想把所有的陆地区域（接近黄色）保存在一个数组中，以便计算机以后知道用户的点击是在水上（鼠标指针的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}

这些obejct都存储在一个大数组中。但要确定数组中的某个点（陆地区域）是否在数组中（水域区域）需要太长时间。（花了45毫秒）我现在想合并这些单独的小矩形，这样就形成了更大的矩形，这可以与鼠标位置比较快。就像这个手工制作的例子：

如果可能的话，这些小矩形对象应该添加到一个大矩形（如绿色或棕色的矩形）。
直到我找不到任何东西做这件事，所以我希望你能帮助我还有一个问题：我保存所有小矩形的数组非常大（超过100000个元素）。它们都是这样存储的：

[{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分钟或类似的时间，这不是问题。

最佳答案

这里是@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>