像素网格上的递归填充函数？答案

【问题标题】：Recursive fill function on a grid of pixels?像素网格上的递归填充函数？
【发布时间】：2018-03-27 03:33:29
【问题描述】：

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

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

我的每个像素都存在于一个数组中，每个像素对象的结构如下：

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

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

如果网格中的每个像素都知道它的邻居属性，有没有办法创建一个递归填充颜色的函数？

【问题讨论】：

听起来你想要一个flood fill algorithm。它甚至还有own tag。
太棒了，是的，这正是我想要的。如果您想将此作为答案发布，我会接受:)

标签： javascript recursion

【解决方案1】：

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

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

它甚至还有自己的标签：flood-fill。

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

【讨论】：

【解决方案2】：

看起来很简单，使用 Set 来检查您正在迭代的每个像素是否已经被检查过：

function recursiveFill(origPixel) {
  const checkedPixels = new Set();
  function fillPixelRec(pixel, clickedColor) {
    // nulls:
    if (!pixel) return;
    // pixels already checked:
    if (checkedPixels.has(pixel)) return;
    // make sure this pixel doesn't get checked again:
    checkedPixels.add(pixel);

    if (pixel.color === clickedColor) return;
    pixel.color = 0xffffff;
    fillPixelRec(pixel.l, clickedColor);
    fillPixelRec(pixel.r, clickedColor);
    fillPixelRec(pixel.u, clickedColor);
    fillPixelRec(pixel.d, clickedColor);
  }
  const origColor = origPixel.color;
  fillPixelRec(origPixel.l, origColor);
  fillPixelRec(origPixel.r, origColor);
  fillPixelRec(origPixel.u, origColor);
  fillPixelRec(origPixel.d, origColor);
}

【讨论】：