binarymax / floodfill.js

HTML5 Canvas Floodfill via JavaScript
MIT License
57 stars 14 forks source link

maybe can use this code #9

Closed lhkzh closed 7 years ago

lhkzh commented 7 years ago

document.getElementById("canvas_star").getContext("2d").floodFill(65,20,[0x00,0xff,0xaa,0xff]);

ImageData.prototype.getColor=function(x,y){ var i=(x+y_this.width)_4; var d=this.data; return [ d[i],d[i+1],d[i+2],d[i+3] ]; } ImageData.prototype.setColor=function(x,y,c){ var i=(x+y_this.width)_4; var d=this.data; d[i]=c[0]; d[i+1]=c[1]; d[i+2]=c[2]; d[i+3]=c[3]; } ImageData.prototype.equalsAt=function(x,y,c){ var i=(x+y_this.width)_4; var d=this.data; return d[i]==c[0] && d[i+1]==c[1] && d[i+2]==c[2] && d[i+3]==c[3]; } CanvasRenderingContext2D.prototype.floodFill=function(px, py, C) { var width = this.canvas.width; var height = this.canvas.height; var data = this.getImageData(0,0,width,height); var T = data.getColor(px, py); if (!data.equalsAt(px,py,C)) { var node = {x:px,y:py}; var queue = []; do { var x = node.x; var y = node.y; while(x>0 && data.equalsAt(x-1,y,T)){ x--; } var spanUp = false; var spanDown = false; while (x < width && data.equalsAt(x,y,T)) { data.setColor(x, y, C); if (!spanUp && y > 0 && data.equalsAt(x,y-1,T)) { queue.push({x:x, y:y-1}); spanUp = true; } else if (spanUp && y > 0 && data.equalsAt(x,y-1,T)) { spanUp = false; } if (!spanDown && y < height - 1 && data.equalsAt(x,y+1,T)) { queue.push({x:x, y:y+1}); spanDown = true; } else if (spanDown && y < (height - 1) && data.equalsAt(x,y+1,T)) { spanDown = false; } x++; } } while ((node = queue.shift()) != null); this.putImageData(data,0,0); } }

binarymax commented 7 years ago

Hi @lhkzh, thanks for your note. It is unclear what you mean? Are you suggesting that the current algorithm be replaced with yours? The example you provided lacks some features such as match tolerance. If you have improvements to contribute to the repository, please instead make a pull request. Also, keep in mind that all changes need to pass the test cases in the examples folder.