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

Question

我对以下游戏 map 有疑问:

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

这些对象都存储在一个大数组中。但是判断一个点在数组中(陆地区域)还是不在数组中(水域)需要很长时间。 (需要 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>