javascript - 像素网格上的递归填充函数？

Question

我正在寻找一种方法来创建一个函数，该函数用给定的颜色填充像素网格。

如果用户单击一个像素，我的想法是检查该像素的每个邻居(上、下、左、右)是否与单击的像素颜色相同。对于每个邻居，如果颜色相同，则将其更改为黑色。如果相邻像素与单击的原始像素颜色不同，则将成为停止条件。

我的每个像素都位于一个数组中，每个像素对象的结构如下:

{
  colour: 0xFFFFFF, // Or some other color
  neighbours: {
    l: PixelObj,
    r: PixelObj,
    u: PixelObj,
    d: PixelObj
  }
}

如果像素位于网格边缘 (40x40)，则其相邻对象之一将为 null，而不是对另一个像素的引用。

有没有办法创建一个函数，在网格中的每个像素都知道其邻居属性的情况下，递归地填充颜色？

Answer 1

您所描述的算法的名称称为 flood fill algorithm 。

有很多关于 SO 的示例可供您使用，例如:

• Flood fill algorithm in JavaScript - too much recursion
• Flood fill recursive algorithm
• Flood Fill in Python

它甚至有自己的标签:flood-fill .

如果您尝试实现其中一种算法并遇到更具体的问题，那么您可以回来提出另一个问题。