在界面上動態(tài)顯示出哈夫曼樹及其生成過程Javascript源代碼

1、在界面上顯示出哈夫曼樹及其生成過程的Javascript 源代碼：Index：var Huaffman = gloable : 7000,data : ,/輸入的權(quán)值存放數(shù)組numdivList : ,/把生成的圓存放到該數(shù)組cxt : document.getElementById("showCanvas").getContext("2d"),cxt2 : document.getElementById("mapCanvas").getContext("2d"),timer : 0,oldnumdivList :

2、 ,/右邊圓的存放位置nextnumdivList : ,/donenumdivList : ,/用來存放parentBox實例lineList : ,mapList : ,allCanvas : ,/newData : null,/兩權(quán)值相加后的數(shù)值level : 0,/init : function()this.initMap();,initMap : function()/生成地圖for(var i=0;i<MapData.length;i+)var mapX = ;for(var j=0;j<26;j+)var newMap = new Map(this.cxt2,25+j

3、*40,30+i*40,20,"rgba(0,0,0,0)");mapX.push(newMap);this.mapList.push(mapX);drawMap();,initData : function()/取到輸入權(quán)值var me = this;me.data = $("#inputValue").val().split(",").sort(function(a,b)return a-b);/console.log(me.data.length)me.initDiv();,initDiv : function()this.cl

4、ear();this.numdivList = ;this.lineList = ;this.oldnumdivList = ;this.donenumdivList = ;for(var i=0;i<this.data.length;i+)var numDiv = new Numdiv(this.cxt,this.datai,25,i,String.fromCharCode(i+65);/初始化一個圓this.numdivList.push(numDiv);this.oldnumdivList.push(numDiv);/this.oldnumdivList.sort(function

5、(a,b)return parseInt(a.data)-parseInt(b.data););drawNumdiv();,addData : function(data1,data2)this.oldnumdivList.shift();this.oldnumdivList.shift();this.newData = parseInt(data1.data) + parseInt(data2.data);if(this.data.length = this.oldnumdivList.length+2)data1.nextPosition = cols:5,level:15;data2.n

6、extPosition = cols:7,level:15;this.nowList = new ParentBox(new Date().getTime(),null,data1,data2,0,0);this.donenumdivList.push(this.nowList);/把生成的樹放到這個數(shù)組elsethis.donenumdivList.sort(function(a,b)return a.headNode.cols-b.headNode.cols;);/生成的樹按位置排序if(!data1.tag && data2.tag)for(var i=0;i<th

7、is.donenumdivList.length;i+)if(this.donenumdivListi.id = data1.parentId)this.nowList = this.donenumdivListi;/確認(rèn)了生成的父節(jié)點位置的樹，并把它賦給nowListelsethis.donenumdivListi.changeCols = 0;data1.nextPosition = cols:this.nowList.headNode.cols,level:this.nowList.headNode.level;data2.nextPosition = cols:this.nowList

8、.childrenthis.nowList.children.length-1.cols+1,level:this.nowList.headNode.level;this.nowList.children.push(this.nowList.headNode);this.nowList.children.push(data2);this.nowList.sortChildren();setTimeout(function()Huaffman.numdivList.remove(data1);/Huaffman.nowList.changeCols = -1;/updateParentBox()

9、;/重新,Huaffman.gloable*3/14);else if(data1.tag && !data2.tag)for(var i=0;i<this.donenumdivList.length;i+)if(this.donenumdivListi.id = data2.parentId)this.nowList = this.donenumdivListi;elsethis.donenumdivListi.changeCols = 0;data2.nextPosition = cols:this.nowList.headNode.cols,level:this.n

10、owList.headNode.level;data1.nextPosition = cols:this.nowList.children0.cols-1,level:this.nowList.headNode.level;Huaffman.nowList.children.push(Huaffman.nowList.headNode);Huaffman.nowList.children.push(data1);Huaffman.nowList.sortChildren();setTimeout(function()Huaffman.numdivList.remove(data2);/Huaf

11、fman.nowList.changeCols = 1;updateParentBox();,Huaffman.gloable*3/14);else if(data1.tag && data2.tag)var arr =;var newData = parseInt(data1.data) + parseInt(data2.data);for(var i=0;i<this.donenumdivList.length;i+)if(parseInt(this.donenumdivListi.headNode.data) <= newData)arr.push(this.

12、donenumdivListi);elsethis.donenumdivListi.changeCols = 0;if(arr.length)arrarr.length-1.sortChildren();this.nowList = new ParentBox(new Date().getTime(),null,data1,data2,0,0);this.donenumdivList.push(this.nowList);data1.nextPosition = cols:arrarr.length-1.childrenarrarr.length-1.children.length-1.col

13、s+1,level:arrarr.length-1.headNode.level+2;data2.nextPosition = cols:arrarr.length-1.childrenarrarr.length-1.children.length-1.cols+3,level:arrarr.length-1.headNode.level+2;setTimeout(function()Huaffman.nowList.changeCols = -3;for(var i=0;i<arr.length;i+)arri.changeCols = -3;updateParentBox();,Hu

14、affman.gloable*3/14);elsearr0.sortChildren();Huaffman.nowList = new ParentBox(new Date().getTime(),null,data1,data2,0,0);Huaffman.donenumdivList.push(Huaffman.nowList);data1.nextPosition = cols:arr0.children0.cols-1,level:arr0.headNode.level+2;data2.nextPosition = cols:arr0.children0.cols-3,level:ar

15、r0.headNode.level+2;setTimeout(function()for(var i=0;i<this.donenumdivList.length;i+)Huaffman.donenumdivListi.changeCols = 3;updateParentBox();,Huaffman.gloable*3/14);else if(!data1.tag && !data2.tag)var obj1 = ,obj2 = ;for(var i=0;i<this.donenumdivList.length;i+)this.donenumdivListi.c

16、hangeCols = 0;if(this.donenumdivListi.id = data1.parentId)obj1 = this.donenumdivListi;else if(this.donenumdivListi.id = data2.parentId)obj2 = this.donenumdivListi;var childrenArr = obj1.children.concat(obj2.children);var lineArr = obj1.lineList.concat(obj2.lineList);childrenArr.push(obj1.headNode);c

17、hildrenArr.push(obj2.headNode);this.nowList = new ParentBox(new Date().getTime(),null,childrenArr,lineArr,0,0);this.donenumdivList.push(this.nowList);this.donenumdivList.remove(obj1);this.donenumdivList.remove(obj2);data2.nextPosition = cols:obj2.headNode.cols,level:obj2.headNode.level;data1.nextPos

18、ition = cols:obj1.headNode.cols,level:obj1.headNode.level;Huaffman.nowList.sortChildren();setTimeout(function()Huaffman.numdivList.remove(data1);Huaffman.numdivList.remove(data2);,Huaffman.gloable*3/14);setTimeout(function()Huaffman.addDiv(data1,data2);,50);setTimeout(function()var minCols = 9999;fo

19、r(var i=0;i<Huaffman.donenumdivList.length;i+)Huaffman.donenumdivListi.changeCols = 0;Huaffman.donenumdivListi.changeLevel = 0;Huaffman.donenumdivListi.sortChildren();for(var i=0;i<Huaffman.donenumdivList.length;i+)if(Huaffman.donenumdivListi.children0.cols<minCols)minCols = Huaffman.donenu

20、mdivListi.children0.cols;var arrCols = Huaffman.donenumdivList.sort(function(a,b)return a.headNode.cols-b.headNode.cols;);var arrLevel = Huaffman.donenumdivList.sort(function(a,b)return a.headNode.level-b.headNode.level;);var arrData = Huaffman.donenumdivList.sort(function(a,b)if(parseInt(a.headNode

21、.data) = parseInt(b.headNode.data)return 1;elsereturn parseInt(a.headNode.data)-parseInt(b.headNode.data););var highLevel = arrLevelarrLevel.length-1.headNode.level;if(highLevel <= 2)highLevel = 2;var leftCols = minCols;if(leftCols <= 2)leftCols = 2else if(leftCols >=23)leftCols = 23;for(va

22、r i=0;i<Huaffman.donenumdivList.length;i+)if(i = 0)Huaffman.donenumdivList0.changeCols = leftCols - Huaffman.donenumdivList0.children0.cols;Huaffman.donenumdivList0.changeLevel = highLevel - Huaffman.donenumdivList0.headNode.level;elsevar widthCols = 0;for(var j=0;j<i;j+)widthCols += parseInt(

23、Huaffman.donenumdivListj.childrenHuaffman.donenumdivListj.children.length-1.cols- Huaffman.donenumdivListj.children0.cols + 1);Huaffman.donenumdivListi.changeCols = leftCols + widthCols - Huaffman.donenumdivListi.children0.cols;Huaffman.donenumdivListi.changeLevel = highLevel - Huaffman.donenumdivLi

24、sti.headNode.level;updateParentBox();,Huaffman.gloable*3/14);,addDiv : function(data1,data2)clearTimeout(timer);if(!data1.isStart && !data2.isStart)this.newnumDiv = new Numdiv(this.cxt,this.newData,parseInt(data1.cols+data2.cols)/2),data1.level-2,null);this.newLineLeft = new Line(this.cxt,da

25、ta1.cols,data1.level,this.newnumDiv.cols,this.newnumDiv.level,"#ccc",3);this.newLineRight = new Line(this.cxt,data2.cols,data2.level,this.newnumDiv.cols,this.newnumDiv.level,"#ccc",3);this.lineList.push(this.newLineLeft);this.lineList.push(this.newLineRight);this.numdivList.push(

26、this.newnumDiv);this.newnumDiv.parentId = this.nowList.id;this.nowList.lineList.push(this.newLineLeft);this.nowList.lineList.push(this.newLineRight);this.nowList.headNode = this.newnumDiv;setTimeout(function()Huaffman.returnData();,Huaffman.gloable*3/14);elsevar timer = setTimeout(function()Huaffman

27、.addDiv(data1,data2);,Huaffman.gloable/140);,returnData : function()this.backnumDiv = new Numdiv(this.cxt,this.newData,this.newnumDiv.cols,this.newnumDiv.level,null);this.backnumDiv.parentId = this.nowList.id;this.numdivList.push(this.backnumDiv);if(parseInt(this.oldnumdivListthis.oldnumdivList.leng

28、th-1.data)<=parseInt(this.backnumDiv.data)for(var i=0;i<this.oldnumdivList.length;i+)var thisLevel = this.oldnumdivListi.level-1;this.oldnumdivListi.nextPosition = cols:this.oldnumdivListi.cols,level:thisLevel;this.backnumDiv.nextPosition = cols:25,level:this.oldnumdivListthis.oldnumdivList.le

29、ngth-1.level;this.oldnumdivList.push(this.backnumDiv);/this.oldnumdivList.sort(function(a,b)return a.data-b.data;);setTimeout(function()Huaffman.reSortData();,Huaffman.gloable*3/14);elsefor(var i=0;i<this.oldnumdivList.length;i+)if(parseInt(this.oldnumdivListi.data)<=parseInt(this.backnumDiv.d

30、ata)var thisLevel = this.oldnumdivListi.level-1;this.oldnumdivListi.nextPosition = cols:this.oldnumdivListi.cols,level:thisLevel;elsevar thisLevel = this.oldnumdivListi.level-1;this.backnumDiv.nextPosition = cols:25,level:thisLevel;this.oldnumdivList.splice(i,0,this.backnumDiv);/this.oldnumdivList.s

31、ort(function(a,b)return a.data-b.data;);setTimeout(function()Huaffman.reSortData();,Huaffman.gloable*3/14);return;,reSortData : function()for(var i=0;i<this.oldnumdivList.length;i+)var thisNumdiv = this.oldnumdivListi;var thisCols = thisNumdiv.cols;var thisLevel = thisNumdiv.level;thisNumdiv.next

32、Position = cols:thisCols,level:thisLevel-1;,start : function()Huaffman.addData(Huaffman.oldnumdivList0,Huaffman.oldnumdivList1);this.timer2 = setInterval(function()Huaffman.addData(Huaffman.oldnumdivList0,Huaffman.oldnumdivList1);,Huaffman.gloable);this.timer = setInterval(Huaffman.loop,Huaffman.glo

33、able/350);,clear : function()Canvas.clear(Huaffman.cxt,1050,660);,stop : function()clearInterval(this.timer);clearInterval(this.timer2);,loop : function()Huaffman.clear();drawNumdiv();updateNumdiv();drawLine();updateLine();if(Huaffman.oldnumdivList.length = 0)setTimeout(function()Huaffman.stop();,15

34、00);Huaffman.init();/數(shù)組擴展/擴展刪除Atotype.remove = function(obj)for(var i=0,l=this.length;i<l;i+)if(obj = thisi)this.splice(i,1);break;Canvas/畫布類var Canvas = /清除畫布 clear : function(cxt,x,y) cxt.clearRect(0,0,x,y); ,clearRect : function(cxt,x,y,width,height)cxt.clearRect(x,y,width,height);, /畫

35、圖 drawImg : function(cxt,img,x,y,sw,sh,dx,dy,dw,dh) if(!sw)cxt.drawImage(img,x,y); else cxt.drawImage(img,x,y,sw,sh,dx,dy,dw,dh); , /畫文字 drawText : function(cxt,string,x,y,color) cxt.fillStyle = color; cxt.font = 'bold 12px sans-serif' cxt.fillText(string,x,y); , /畫填充的方fillRect : function(cx

36、t,x,y,width,height,color)cxt.fillStyle = color;cxt.fillRect(x,y,width,height);, /畫邊框的方drawRect : function(cxt,x,y,width,height,color)cxt.strokeStyle = color;cxt.lineWidth = 1;cxt.strokeRect(x,y,width,height);, /畫圓/ctx:context2d對象,x:圓心x坐標(biāo),y:圓心y坐標(biāo),radius:半徑,color:顏色fillArc : function(cxt,x,y,radius,co

37、lor)cxt.fillStyle = color;cxt.beginPath();cxt.arc(x,y,radius,0,Math.PI*2,true);cxt.closePath();cxt.fill();,drawLine : function(cxt,x0,y0,x1,y1,color,width)cxt.lineWidth = width;cxt.strokeStyle = color;cxt.beginPath();cxt.moveTo(x0,y0);cxt.lineTo(x1,y1);cxt.closePath();cxt.stroke(); jquery.min/*! jQu

38、ery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | /license */!function(a,b)"object"=typeof module&&"object"=typeof module.exports?module.exports=a.document?b(a,!0):function(a) if(!a.document)throw new Error("jQuery requires a window with a document&quo

39、t;); return b(a): b(a)("undefined"!=typeof window?window:this,function(a,b) var c=,d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h= ,i=h.toString,j=h.hasOwnProperty,k="".trim,l= ,m="1.11.0",n=function(a,b) return new n.fn.init(a,b),o=/suFEFFxA0+|suFEFFxA0+$/g,p=/-ms-/,q=/-(

40、da-z)/gi,r=function(a,b) return b.toUpperCase() ; n.fn=totype= jquery:m,constructor:n,selector:"",length:0,toArray:function()return d.call(this),get:function(a)return null!=a?0>a?thisa+this.length:thisa:d.call(this),pushStack:function(a)var b=n.merge(this.constructor(),a); return b

41、.prevObject=this,b.context=this.context,b,each:function(a,b)return n.each(this,a,b),map:function(a)return this.pushStack(n.map(this,function(b,c) return a.call(b,c,b) ) ,slice:function()return this.pushStack(d.apply(this,arguments),first:function()return this.eq(0),last:function()return this.eq(-1),

42、eq:function(a)var b=this.length,c=+a+(0>a?b:0); return this.pushStack(c>=0&&b>c?thisc:),end:function()return this.prevObject|this.constructor(null),push:f,sort:c.sort,splice:c.splice,n.extend=n.fn.extend=function() var a,b,c,d,e,f,g=arguments0|,h=1,i=arguments.length,j=!1; for("

43、;boolean"=typeof g&&(j=g,g=argumentsh|,h+),"object"=typeof g|n.isFunction(g)|(g=),h=i&&(g=this,h-); i>h; h+)if(null!=(e=argumentsh)for(d in e)a=gd,c=ed,g!=c&&(j&&c&&(n.isPlainObject(c)|(b=n.isArray(c)?(b?(b=!1,f=a&&n.isArray(a)?a:):f=

44、a&&n.isPlainObject(a)?a:,gd=n.extend(j,f,c):void 0!=c&&(gd=c); return g,n.extend(expando:"jQuery"+(m+Math.random().replace(/D/g,""),isReady:!0,error:function(a) throw new Error(a) ,noop:function() ,isFunction:function(a) return"function"=n.type(a) ,isArr

45、ay:Array.isArray|function(a) return"array"=n.type(a) ,isWindow:function(a) return null!=a&&a=a.window ,isNumeric:function(a) return a-parseFloat(a)>=0 ,isEmptyObject:function(a) var b; for(b in a)return!1; return!0 ,isPlainObject:function(a) var b; if(!a|"object"!=n.ty

46、pe(a)|a.nodeType|n.isWindow(a)return!1; try if(a.constructor&&!j.call(a,"constructor")&&!j.call(totype,"isPrototypeOf")return!1 catch(c) return!1 if(l.ownLast)for(b in a)return j.call(a,b); for(b in a); return void 0=b|j.call(a,b) ,type:function(a

47、) return null=a?a+"":"object"=typeof a|"function"=typeof a?hi.call(a)|"object":typeof a ,globalEval:function(b) b&&n.trim(b)&&(a.execScript|function(b) a.eval.call(a,b) )(b) ,camelCase:function(a) return a.replace(p,"ms-").replace(q,r

48、) ,nodeName:function(a,b) return a.nodeName&&a.nodeName.toLowerCase()=b.toLowerCase() ,each:function(a,b,c) var d,e=0,f=a.length,g=s(a); if(c) if(g) for(; f>e; e+)if(d=b.apply(ae,c),d=!1)break else for(e in a)if(d=b.apply(ae,c),d=!1)break else if(g) for(; f>e; e+)if(d=b.call(ae,e,ae),d=!1)break else for(e in a)if(d=b.call(ae,e,ae),d=!1)break; return a ,trim:k&&!k.call("ufeffxa0")?function(a) return null=a?"":k.call(a) :function(a) return null=a?""