Javascript：优化精灵和精灵数组之间的碰撞检测

Question

我有一个画布，用户可以上传并放置自己的图像（支持透明度）。

我的目标是不允许与任何其他现有图像重叠的提交。

为此我会做以下（伪代码）：

for(let i = 0; i < images.length; i++){
    const existingImage = images[i]
    for(let y = 0; y < existingImage.pixels.length; y++){  
        for(let x = 0; x < newImage.pixels.length; x++){  
            if(newImage.pixels[x] === existingImage.pixels[y])    
              return false;
        }    
    }

}

return true

然而，画布分辨率为1200 x 1200.假设所有可用像素中只有一半被覆盖，那么我们将拥有已覆盖的720.000像素。鉴于提交的内容类似于300 x 300（保守估计），那么我们最终将720.000现有像素与30.000新像素进行比较，这给我们提供了大约36.000.000.000次迭代。对我的笔记本电脑进行快速测试最终需要花费一分钟进行20亿次迭代。一次碰撞检测15分钟对我来说是不可接受的。

所以我的问题是，如何在不降低准确性的情况下优化碰撞检测？

Answer 1

首先进行边界框碰撞测试，然后仅在边界框重叠时测试像素。

for ( var existingImage of images ) {
    if ( !(
        existingImage.left > newImage.right || 
        existingImage.right < newImage.left || 
        existingImage.top > newImage.bottom ||
        existingImage.bottom < newImage.top
    )) {
        if ( pixelsOverlap( existingImage, newImage ) ) return false;
    }
}