javascript - Javascript 或 Coffeescript 中的 "Bucket Fill"算法

Question

我正在编写一个小coffeescript/js应用程序，允许用户设计图标(16x16像素或32X32像素)。 该图标实际上是一个带有颜色单元的二维数组。单元格可以有颜色或为空。

我希望用户能够使用“桶油漆”工具填充空白单元格。

这意味着

• 如果用户单击空白单元格，则单击的单元格旁边的所有空白单元格都会填充所选的颜色，直到到达彩色单元格

• 如果用户单击彩色单元格，则被单击单元格旁边且共享相同颜色的所有单元格都将被填充，但空白单元格和彩色单元格(使用另一种颜色)都不会被填充。

该应用程序已经允许用户使用所选颜色逐一填充单元格，或使用钢笔工具删除彩色单元格。

有什么建议吗？

(ps:我没有使用 html canvas 来绘制)

Answer 1

由于这只是 16x16 或 32x32，因此您可以使用递归解决方案:

假设您的起点是将像素 x/y 从颜色 A 更改为颜色 B(A 或 B 可以为空)。

伪代码:

function floodfill(x,y,A,B) {
  if ((x<0) || (x>15) || (y<0) || (y>15)) return;
  if (get_color(x,y)!=A) return;
  set_color(x,y,B);
  floodfill(x-1,y-1,A,B);
  floodfill(x-1,y,A,B);
  floodfill(x-1,y+1,A,B);
  floodfill(x,y-1,A,B);
  floodfill(x,y+1,A,B);
  floodfill(x+1,y-1,A,B);
  floodfill(x+1,y,A,B);
  floodfill(x+1,y+1,A,B);
}