[canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能

    var dx = new Array(0, 0, -1, 1, -1, -1, 1, 1);
    var dy = new Array(1, -1, 0, 0, -1, 1, -1, 1);
    var threshold = 0;
    $(‘#range‘).attr("value", 0);
    $(‘#range‘).unbind();
    $(‘#range‘).change(function()
    {
        threshold = parseInt($(‘#range‘).val()) * 4;
    });


    $(‘#myCanvas‘).unbind();
    $(‘#myCanvas‘).click(function(e)
    {
        var ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        var fillR = 0;
        var fillG = 255;
        var fillB = 255;
        var R = ppImgData.data[(mouseY * ppCanvasWidth + mouseX) * 4];
        var G = ppImgData.data[(mouseY * ppCanvasWidth + mouseX) * 4 + 1];
        var B = ppImgData.data[(mouseY * ppCanvasWidth + mouseX) * 4 + 2];
        var ppQueue = new Array();
        var ppVisit = new Array();
        var ppField = dx.length;
        ppQueue.push(new ppPoint(mouseX, mouseY));
        while(ppQueue.length != 0)
        {
            var u = ppQueue.shift();
            for(var i = 0; i < ppField; i++)
            {
                var X = u.x + dx[i];
                var Y = u.y + dy[i];
                if(X < 0 || Y < 0 || X > ppCanvasWidth || Y > ppCanvasHeight || ppVisit[Y * ppCanvasWidth + X])continue;
                ppVisit[Y * ppCanvasWidth + X] = true;
                if(Math.abs(ppImgData.data[(Y * ppCanvasWidth + X) * 4] - R) > threshold)continue;
                if(Math.abs(ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 1] - G) > threshold)continue;
                if(Math.abs(ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 2] - B) > threshold)continue;
                ppImgData.data[(Y * ppCanvasWidth + X) * 4] = fillR;
                ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 1] = fillG;
                ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 2] = fillB;
                ppQueue.push(new ppPoint(X, Y));
            }
        }
        context.putImageData(ppImgData, 0, 0);
    });