Question

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

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

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

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

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

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

Answer 1

看起来很简单，使用一个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);
}

Answer 2

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

在SO上有很多可用的例子，例如：

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

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

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

2 个答案: