javascript - Flood Fill after clearRect -
i have script flood fill html5 canvas:
$("#crop-canvas-draw").on("click touchstart", function(e){ if(selectedtool != 'pbucket') return false; var pagex = device == 'touch' ? e.originalevent.touches[0].pagex:e.pagex; var pagey = device == 'touch' ? e.originalevent.touches[0].pagey:e.pagey; var x = parseint(pagex - $("#crop-canvas-primary").offset().left); var y = parseint(pagey - $("#crop-canvas-primary").offset().top); var r = 255, g = 0, b = 0; var cwidth = cvsdraw.width, cheight = cvsdraw.height; var layerdata = ctxdraw.getimagedata(0, 0, cwidth, cheight); var layerdataori = ctx.getimagedata(0, 0, cvs.width, cvs.height); var layerdatacopy = ctxcopy.getimagedata(0, 0, cvscopy.width, cvscopy.height); var pps = []; var match = function(pp){ // pp = pixelpos var lr = layerdata.data[pp]; var lg = layerdata.data[pp + 1]; var lb = layerdata.data[pp + 2]; var ac = layerdata.data[pp + 3]; // alpha channnel if(lr == r && lg == g && lb == b) return false; // match newcolor, skip if(lr == 0 && lg == 0 && lb == 0 && ac == 0) return true; } var colorpixel = function(pp){ // pp = pixelpos //pps.push(pp); layerdata.data[pp] = r; layerdata.data[pp + 1] = g; layerdata.data[pp + 2] = b; layerdata.data[pp + 3] = 150; } var oritocopy = function(){ while(pps.length > 0){ var pp = pps.pop(); layerdatacopy.data[pp] = layerdataori.data[pp]; layerdatacopy.data[pp + 1] = layerdataori.data[pp + 1]; layerdatacopy.data[pp + 2] = layerdataori.data[pp + 2]; layerdatacopy.data[pp + 3] = 255; } ctxcopy.putimagedata(layerdatacopy, 0, 0); } var scan = function(x, y){ stack = [[x, y]]; while(stack.length > 0){ var newpos, pixelpos, x, y, rl, rr; newpos = stack.pop(); x = newpos[0]; y = newpos[1]; pixelpos = (y * cwidth + x) * 4; while(y-- >= 0 && match(pixelpos)){ pixelpos -= cwidth * 4; } pixelpos += cwidth * 4; ++y; rr = false; rl = false; while(y++ < cheight - 1 && match(pixelpos)){ colorpixel(pixelpos); pps.push(pixelpos); if(x > 0){ if(match(pixelpos - 4)){ if(!rl){ stack.push([x - 1, y]); rl = true; } }else if(rl){ rl = false; } } if(x < cwidth - 1){ if(match(pixelpos + 4)){ if(!rr){ stack.push([x + 1, y]); rr = true; } }else if(rr){ rr = false; } } pixelpos += cwidth * 4; } } ctxdraw.putimagedata(layerdata, 0, 0); oritocopy(); if(selectedtool == 'pbucket'){ step++; if(step < drawstates.length){ drawstates.length = step; } drawstates.push([cvsdraw.todataurl(), cvscopy.todataurl()]); } } scan(x, y); });
anything good. try delete region clearrect, notice when re-fill deleted region there region not filled. please see following image
what causing this?
Comments
Post a Comment