javascript - 为什么这个递归函数会给我一个 "Maximum call stack size exceeded"错误？

Question

我正在使用 HTML Canvas 创建一个绘画应用程序，我正在尝试实现一个“油漆桶”工具，该工具会检测与被点击像素颜色相同的任何相邻像素，并用新的颜色填充它颜色。

我收到“Uncaught RangeError: Maximum call stack size exceeded”，但我无法弄清楚我的逻辑出了什么问题:

function fillTool(){
    theCanvas.mousedown(function(e){
        var baseColor = paintUtilities.getPixelColor(e.offsetX, e.offsetY);
        context.fillStyle = color;
        fillNeighbors(e.offsetX, e.offsetY, baseColor);
    });
}

function fillNeighbors(x, y, baseColor) {
    context.fillRect(x, y, 1, 1);
    if (x > 0 && paintUtilities.getPixelColor(x - 1, y) === baseColor) {
        fillNeighbors(x - 1, y, baseColor);
    }
    if (y > 0 && paintUtilities.getPixelColor(x, y - 1) === baseColor) {
        fillNeighbors(x, y - 1, baseColor);
    }
    if (x < theCanvas.attr("width") - 1 && paintUtilities.getPixelColor(x + 1, y) === baseColor) {
        fillNeighbors(x + 1, y, baseColor);
    }   
    if (y < theCanvas.attr("height") - 1 && paintUtilities.getPixelColor(x, y + 1) === baseColor) {
        fillNeighbors(x, y + 1, baseColor);
    }   

}

Answer 1

实际上再看一眼，我发现你的代码有问题，它确实有无限递归!

假设您从 x = 1 开始，x 可以从 0 到 2。您首先向左移动，然后递归调用该函数。该功能最终将向右移动!然后这个循环将永远重复。您需要跟踪您访问过的位置，或者向递归函数传递一个不继续的方向，或者类似的东西。