为什么这个递归函数会给我一个“超出最大调用堆栈大小”的错误?

时间:2014-05-15 21:56:01

标签: javascript jquery html5 canvas

我正在创建一个带有HTML画布的绘图应用程序,我正在尝试实现一个“绘制桶”工具,它可以检测与所点击的像素颜色相同的任何相邻像素,并用新的填充它颜色。

我收到了“未捕获的RangeError:超出了最大调用堆栈大小”,但我无法弄清楚我的逻辑有什么问题:

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);
    }   

}

2 个答案:

答案 0 :(得分:1)

实际上第二眼看,我看到你的代码存在问题,它确实有无限递归!

让我们说你从x = 1开始,x可以从0到2.你先左转,然后递归调用函数。该功能最终会向右移动!那个循环将永远重复。您需要跟踪您访问过的位置,或者将递归函数传递给不继续的方向,或者沿着这些方向传递。

答案 1 :(得分:0)

因为它是一个递归函数,并且在每个if语句中你反复调用它......该函数没有基本情况。