javascript - Canvas 油漆桶/洪水填充工具卡在循环中

Question

我正在使用 this tutorial 中的代码。我还让用户使用 <input type="color"> 选择颜色(我将其转换为 RGB，因为它返回一个十六进制值)。如果颜色保留为默认值(初始化时设置为黑色)，填充似乎工作得很好。如果使用 input 更改颜色不过，有时它最终会卡住。据我所知，它陷入了这个循环:

while (pixelStack.length) {...}

循环中有一个部分将新值推送到 pixelStack数组:

while (y++ < height - 1 && matchStartColor(pixelPos)) {
   colorPixel(pixelPos);
   if (x > 0) {
      if (matchStartColor(pixelPos - 4)) {
         if (!reachLeft) {
            pixelStack.push([x - 1, y]);
            reachLeft = true;
         }
      } else if (reachLeft) {
            reachLeft = false;
         }
   }

   if (x < width - 1) {
      if (matchStartColor(pixelPos + 4)) {
         if (!reachRight) {
            pixelStack.push([x + 1, y]);
            reachRight = true;
         }
      } else if (reachRight) {
            reachRight = false;
        }
      }
      pixelPos += width * 4;
   }

据我了解，这是它不断推向pixelStack的唯一原因。数组是如果 matchStartColor函数永远不会返回错误。

function matchStartColor(pixelPos) {
   var r = imageData.data[pixelPos];
   var g = imageData.data[pixelPos + 1];
   var b = imageData.data[pixelPos + 2];

   return (r && g && b);
}

但我不明白为什么这有时有效，有时无效。

基本上是pixelStack数组最终会不断增长，因此它永远无法退出循环。我做了一个jsFiddle有一个工作示例(尽管如果您更改颜色并尝试填充，它最终会锁定)。当颜色改变时，它似乎并不是 100% 失败，但是改变足够的颜色并填充，它最终会失败(有些颜色似乎比其他颜色失败更多。左上角的粉红色/红色例如，颜色选择器窗口就是一个糟糕的窗口)。

Answer 1

您的问题似乎出在 matchStartColor 的实现上。

通过以下实现:

function matchStartColor(pixelPos) {
    var r = imageData.data[pixelPos];
    var g = imageData.data[pixelPos + 1];
    var b = imageData.data[pixelPos + 2];

    return (r && g && b);
}

仅当 r、g 或 b 为 0 时，此函数才会返回 false。当您使用黑色(或任何带有0 组件)，这有效。如果您选择的颜色的所有分量都不为 0，则此函数永远不会返回 false。

我认为您在这里真正想要做的是将图像的颜色与您选择的颜色进行比较。

根据您如何使用此功能，我认为这应该有效:

function matchStartColor(pixelPos) {
    var r = imageData.data[pixelPos];
    var g = imageData.data[pixelPos + 1];
    var b = imageData.data[pixelPos + 2];

    return (r !== curColor.r || g !== curColor.g || b !== curColor.b);
} 

https://jsfiddle.net/6Uy3U/4/