洪水填充(flood fill)
前面说过用html5做一个画板开发,众所周知画板都会有一个很实用的功能就是喷漆,这个用js实现也不难但是就是很考验算法优化问题了 再次附上自己的喷漆算法(使用的事递归,但是时间效率上面还是不尽人意 用的是系统栈 所以比较大的填充区域会提示栈的溢出 但是功能还是能够实现的 也再次情各路大神帮忙优化一下算法)
function pigment(){ $("#input").hide(); $("iframe").hide(); $("#people_add").hide(); $("#InterCanvas").unbind(); var dObj = document.getElementById("InterCanvas"); var ctx = dObj.getContext("2d"); var widht = window.innerWidth; var heiht = window.innerHeight; var xxx = 0; var l = 1,color; var touch =("createTouch" in document);//判定是否为手持设备 var StartEvent = touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代 var EndEvent = touch ? "touchend" :"mouseup"; $('#InterCanvas').bind(EndEvent,ff); $('#InterCanvas').bind(StartEvent,dd); function ff(){ get(); } function dd(e){ var Touch = touch ? e.originalEvent.touches[0] : e; var x=Touch.clientX - Touch.target.offsetLeft;//鼠标在画布上的x坐标,以画布左上角为起点 var y=Touch.clientY - Touch.target.offsetTop;//鼠标在画布上的y坐标,以画布左上角为起点 color = $("#color").css("backgroundColor"); xxx = data(x,y); all(x,y); } function data(x,y){ var imgData=ctx.getImageData(x,y,1,1); var s = 0; for(var i = 0 ; i < 4 ; i++ ) s += imgData.data[i]; return s; } function fill(x,y){ ctx.beginPath(); ctx.fillStyle = color; ctx.fillRect(x,y,l,l); ctx.stroke(); } function all(x,y){ var s = data(x,y); if(s != xxx )return; else if(x <= 0 || x >= widht || y <=0 || y >= heiht )return; else{ fill(x,y); all(x,y-l); all(x,y+l); all(x-l,y); all(x+l,y); } } }
再次再附上自己查到的一些资料
http://en.wikipedia.org/wiki/Flood_fill
http://www.htmlgoodies.com/primers/jsp/article.php/3622321/Javascript-Basics-Part-12.htm