此代码接着JS流程设计器（一）续写，该代码主要是怎么将设计好的流程图用最基本字符串的方式传到后台，再由后台字符串的方式重新显示在页面上。
1 //转化成后端的方法 2 function changebe(firstbegin){ 3 for(var x=0;x<shapeobjjson.shapeobj.length;x++){ 4 if(shapeobjjson.shapeobj[x].id==firstbegin){ 5 if(firstbegin.indexOf("begin-circle")>-1){ 6 laststr=laststr+"begin("+$("#"+firstbegin).text()+")"; 7 }else if(firstbegin.indexOf("tableform")>-1){ 8 laststr=laststr+"tab("+$("#"+firstbegin).text()+")"; 9 }else if(firstbegin.indexOf("approval-circle")>-1){ 10 laststr=laststr+"dug("+$("#"+firstbegin).text()+")"; 11 }else if(firstbegin.indexOf("end-circle")>-1){ 12 laststr=laststr+"end("+$("#"+firstbegin).text()+")"; 13 } 14 for(var y=0;y<lineobjjson.lineobj.length;y++){ 15 if(firstbegin==lineobjjson.lineobj[y].startid){ 16 laststr=laststr+">"; 17 changebe(lineobjjson.lineobj[y].endid); 18 } 19 } 20 } 21 } 22 }
显示的主要字符串的样式为："begin(开始)>tab(表单1)>dug(审批2)>tab(表单2)>dug(审批1)>dug(审批4)>tab(表单3)>dug(审批5)>dug(审批6)>tab(表单4)>dug(审批7)>dug(审批8)>dug(审批9)>end(结束1)";
从后端传入前端并显示在前台的代码如下：
1 //定义每一行对象的宽度总和是多少 2 var objsumwidth=0; 3 //前一个对象的宽度和高度 4 var beforewidth=0; 5 var beforeheight=0; 6 //*******************************将后台传过来的字符串转化为前台图形********************************// 7 //假设后台传过来的字符串是开始,begin-circle>表单1,tableform>审批2,approval-circle>表单2,tableform>审批1,approval-circle>结束,end-circle 8 var firststr="begin(开始)>tab(表单1)>dug(审批2)>tab(表单2)>dug(审批1)>dug(审批4)>tab(表单3)>dug(审批5)>dug(审批6)>tab(表单4)>dug(审批7)>dug(审批8)>dug(审批9)>end(结束1)"; 9 changefe(firststr); 10 //转化成前端的方法 11 function changefe(firststr){ 12 for(var a=0;a<firststr.split(">").length;a++){ 13 whichobj(firststr.split(">")[a].split("(")[0]); 14 if(a%5==4){ 15 var avgwidth=(parseFloat($("#right-area").width())-objsumwidth)/5.0; 16 //判断方向是从左往右还是从右往左的方向 17 if(a%10==4){//从左往右画对象 18 for(var b=a-4;b<=a;b++){ 19 if(b==a-4){ 20 shapeobjjson.shapeobj[b].offsettop = a*35; 21 shapeobjjson.shapeobj[b].offsetleft = avgwidth/2.0+$(".navbox").width(); 22 shapeobjjson.shapeobj[b].leftcenterdot = avgwidth/2.0+$(".navbox").width()+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 23 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 24 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(a*35); 25 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height)); 26 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+avgwidth/2.0+$(".navbox").width(); 27 beforeheight=a*35; 28 console.log("beforewidth："+beforewidth+";"+"beforeheight:"+beforeheight); 29 }else{ 30 shapeobjjson.shapeobj[b].offsettop = a*35; 31 shapeobjjson.shapeobj[b].offsetleft = beforewidth+avgwidth; 32 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth+avgwidth)+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 33 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 34 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(a*35); 35 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height)); 36 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+beforewidth+avgwidth; 37 beforeheight=a*35; 38 } 39 } 40 }else if(a%10==9){//从右往左画对象 41 for(var b=a-4;b<=a;b++){ 42 if(b==a-4){ 43 shapeobjjson.shapeobj[b].offsettop = a*35; 44 shapeobjjson.shapeobj[b].offsetleft = $("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width(); 45 shapeobjjson.shapeobj[b].leftcenterdot = ($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+";"+(parseFloat(a*35)+parseInt(shapeobjjson.shapeobj[b].height/2)); 46 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 47 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(a*35); 48 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height)); 49 beforewidth=$("#right-area").width()-avgwidth/2.0-parseFloat(shapeobjjson.shapeobj[b].width)+$(".navbox").width(); 50 beforeheight=a*35; 51 }else{ 52 shapeobjjson.shapeobj[b].offsettop = a*35; 53 shapeobjjson.shapeobj[b].offsetleft = beforewidth-avgwidth-shapeobjjson.shapeobj[b].width; 54 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 55 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 56 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(a*35); 57 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height)); 58 beforewidth=beforewidth-avgwidth-parseFloat(shapeobjjson.shapeobj[b].width); 59 beforeheight=a*35; 60 } 61 } 62 } 63 //图形转到下一行的时候,宽度重新赋值为0，高度值继续累加 64 beforewidth=0; 65 objsumwidth=0; 66 }else if(a==firststr.split(">").length-1){ 67 var avgwidth=(parseFloat($("#right-area").width())-objsumwidth)/parseFloat(firststr.split(">").length%5); 68 for(var b=a-parseFloat(firststr.split(">").length%5)+1;b<=a;b++){ 69 console.log(b); 70 if((parseInt(b/5)+1)%2==1){//从左往右画对象 71 if(b==firststr.split(">").length-firststr.split(">").length%5){ 72 shapeobjjson.shapeobj[b].offsettop = beforeheight+140; 73 shapeobjjson.shapeobj[b].offsetleft = avgwidth/2.0+$(".navbox").width(); 74 shapeobjjson.shapeobj[b].leftcenterdot = avgwidth/2.0+$(".navbox").width()+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 75 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 76 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(beforeheight+140); 77 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height)); 78 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+avgwidth/2.0+$(".navbox").width(); 79 beforeheight=beforeheight+140; 80 console.log("beforewidth："+beforewidth+";"+"beforeheight:"+beforeheight); 81 }else{ 82 shapeobjjson.shapeobj[b].offsettop = beforeheight; 83 shapeobjjson.shapeobj[b].offsetleft = beforewidth+avgwidth; 84 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth+avgwidth)+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 85 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 86 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(beforeheight); 87 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height)); 88 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+beforewidth+avgwidth; 89 // beforeheight=beforeheight+140; 90 } 91 }else if((parseInt(b/5)+1)%2==0){//从右往左画对象 92 if(b==firststr.split(">").length-firststr.split(">").length%5){ 93 shapeobjjson.shapeobj[b].offsettop = beforeheight+140; 94 shapeobjjson.shapeobj[b].offsetleft = $("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width; 95 shapeobjjson.shapeobj[b].leftcenterdot = ($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[a].height/2)); 96 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 97 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(beforeheight+140); 98 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height)); 99 beforewidth=$("#right-area").width()-avgwidth/2.0-parseFloat(shapeobjjson.shapeobj[b].width); 100 beforeheight=beforeheight+140; 101 }else{ 102 shapeobjjson.shapeobj[b].offsettop = beforeheight; 103 shapeobjjson.shapeobj[b].offsetleft = beforewidth-avgwidth-shapeobjjson.shapeobj[b].width; 104 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 105 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 106 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(beforeheight); 107 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height)); 108 beforewidth=beforewidth-avgwidth-parseFloat(shapeobjjson.shapeobj[b].width); 109 // beforeheight=beforeheight+140; 110 } 111 } 112 } 113 } 114 } 115 beforewidth=0; 116 objsumwidth=0; 117 beforeheight=0; 118 console.log("shapeobjjson:"+JSON.stringify(shapeobjjson)); 119 //加载到页面上 120 for(var c=0;c<shapeobjjson.shapeobj.length;c++){ 121 $(".right-area").html($(".right-area").html()+'<div class="'+shapeobjjson.shapeobj[c].id.replace(/\d*/g,"")+'" id="'+shapeobjjson.shapeobj[c].id+'" onclick="_click(\''+shapeobjjson.shapeobj[c].id+'\')" ondblclick="_dblclick(\''+shapeobjjson.shapeobj[c].id+'\')">' 122 +'<div class="point" id="leftpoint"></div>' 123 +'<div class="point" id="rightpoint"></div>' 124 +'<div class="point" id="toppoint"></div>' 125 +'<div class="point" id="bottompoint"></div>' 126 +'<div id="showhidden"><div id="circle-center" style="display:none"></div></div>' 127 +'<div id="'+shapeobjjson.shapeobj[c].id+'val" onselectstart="return false">'+firststr.split(">")[c].split("(")[1].split(")")[0]+'</div></div>'); 128 $("#"+shapeobjjson.shapeobj[c].id).css("position","fixed"); 129 $("#"+shapeobjjson.shapeobj[c].id).css("top",shapeobjjson.shapeobj[c].offsettop+"px"); 130 $("#"+shapeobjjson.shapeobj[c].id).css("left",shapeobjjson.shapeobj[c].offsetleft+"px"); 131 $("#"+shapeobjjson.shapeobj[c].id+" #showhidden").css("position","fixed"); 132 $("#"+shapeobjjson.shapeobj[c].id+" #showhidden").css("top",parseInt(shapeobjjson.shapeobj[c].offsettop)+parseInt(shapeobjjson.shapeobj[c].height/2)-4+"px"); 133 $("#"+shapeobjjson.shapeobj[c].id+" #showhidden").css("left",parseInt(shapeobjjson.shapeobj[c].offsetleft)+parseInt(shapeobjjson.shapeobj[c].width/2)-4+"px"); 134 $("#"+shapeobjjson.shapeobj[c].id+" #showhidden #circle-center").css("position","fixed"); 135 $("#"+shapeobjjson.shapeobj[c].id+" #showhidden #circle-center").css("top",parseInt(shapeobjjson.shapeobj[c].offsettop)+parseInt(shapeobjjson.shapeobj[c].height/2)-4+"px"); 136 $("#"+shapeobjjson.shapeobj[c].id+" #showhidden #circle-center").css("left",parseInt(shapeobjjson.shapeobj[c].offsetleft)+parseInt(shapeobjjson.shapeobj[c].width/2)-4+"px"); 137 //左方块 138 $("#"+shapeobjjson.shapeobj[c].id+" #leftpoint").css("position","fixed"); 139 $("#"+shapeobjjson.shapeobj[c].id+" #leftpoint").css("top",(shapeobjjson.shapeobj[c].leftcenterdot.split(";")[1]-2)+"px"); 140 $("#"+shapeobjjson.shapeobj[c].id+" #leftpoint").css("left",(shapeobjjson.shapeobj[c].leftcenterdot.split(";")[0]-2)+"px"); 141 //右方块 142 $("#"+shapeobjjson.shapeobj[c].id+" #rightpoint").css("position","fixed"); 143 $("#"+shapeobjjson.shapeobj[c].id+" #rightpoint").css("top",(shapeobjjson.shapeobj[c].rightcenterdot.split(";")[1]-2)+"px"); 144 $("#"+shapeobjjson.shapeobj[c].id+" #rightpoint").css("left",(shapeobjjson.shapeobj[c].rightcenterdot.split(";")[0]-2)+"px"); 145 //上方块 146 $("#"+shapeobjjson.shapeobj[c].id+" #toppoint").css("position","fixed"); 147 $("#"+shapeobjjson.shapeobj[c].id+" #toppoint").css("top",(shapeobjjson.shapeobj[c].topcenterdot.split(";")[1]-2)+"px"); 148 $("#"+shapeobjjson.shapeobj[c].id+" #toppoint").css("left",(shapeobjjson.shapeobj[c].topcenterdot.split(";")[0]-2)+"px"); 149 //下方快 150 $("#"+shapeobjjson.shapeobj[c].id+" #bottompoint").css("position","fixed"); 151 $("#"+shapeobjjson.shapeobj[c].id+" #bottompoint").css("top",(shapeobjjson.shapeobj[c].bottomcenterdot.split(";")[1]-2)+"px"); 152 $("#"+shapeobjjson.shapeobj[c].id+" #bottompoint").css("left",(shapeobjjson.shapeobj[c].bottomcenterdot.split(";")[0]-2)+"px"); 153 } 154 //更新坐标 155 var startdot=new Array(4); 156 var enddot=new Array(4); 157 for(var q=1;q<shapeobjjson.shapeobj.length;q++){ 158 //获取线起始点的左中点，右中点，上中点和下中点的坐标 159 startdot[0]=shapeobjjson.shapeobj[q-1].leftcenterdot; 160 startdot[1]=shapeobjjson.shapeobj[q-1].rightcenterdot; 161 startdot[2]=shapeobjjson.shapeobj[q-1].topcenterdot; 162 startdot[3]=shapeobjjson.shapeobj[q-1].bottomcenterdot; 163 164 //获取线終点的左中点，右中点，上中点和下中点的坐标 165 enddot[0]=shapeobjjson.shapeobj[q].leftcenterdot; 166 enddot[1]=shapeobjjson.shapeobj[q].rightcenterdot; 167 enddot[2]=shapeobjjson.shapeobj[q].topcenterdot; 168 enddot[3]=shapeobjjson.shapeobj[q].bottomcenterdot; 169 //连接起始点和终点连线最短的线 170 var minline=Math.sqrt(Math.pow((startdot[0].split(";")[0]-enddot[0].split(";")[0]),2)+Math.pow((startdot[0].split(";")[1]-enddot[0].split(";")[1]),2)); 171 //start和end的值0,1,2,3代表是该对象左中点，右中点，上中点还是下中点 172 var start=0; 173 var end=0; 174 //获取线最短的两个点的位置 175 for(var x=0;x<startdot.length;x++){ 176 for(var y=0;y<enddot.length;y++){ 177 if((minline-Math.sqrt(Math.pow((startdot[x].split(";")[0]-enddot[y].split(";")[0]),2)+Math.pow((startdot[x].split(";")[1]-enddot[y].split(";")[1]),2)))>0){ 178 minline=Math.sqrt(Math.pow((startdot[x].split(";")[0]-enddot[y].split(";")[0]),2)+Math.pow((startdot[x].split(";")[1]-enddot[y].split(";")[1]),2)); 179 start=x; 180 end=y; 181 } 182 } 183 } 184 lineobjjson.lineobj.push({ 185 lineid: "flow"+chartj, 186 startid: shapeobjjson.shapeobj[q-1].id, 187 endid: shapeobjjson.shapeobj[q].id, 188 startpos:start, 189 endpos:end, 190 startcsys:startdot[start], 191 endcsys:enddot[end], 192 }); 193 $(".right-area").html($(".right-area").html()+'<canvas id="flow'+chartj+'" onclick="_click(\'flow'+chartj+'\')"></canvas>'); 194 chartj++; 195 } 196 for(var p=0;p<lineobjjson.lineobj.length;p++){ 197 drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(";")[0],lineobjjson.lineobj[p].startcsys.split(";")[1],lineobjjson.lineobj[p].endcsys.split(";")[0],lineobjjson.lineobj[p].endcsys.split(";")[1]); 198 } 199 showcenterobj('begin-circle'); 200 moveshape('begin-circle'); 201 for(var x=1;x<=charti;x++){ 202 moveshape('tableform'+x); 203 showcenterobj('tableform'+x); 204 } 205 for(var x=1;x<=chartm;x++){ 206 moveshape('approval-circle'+x); 207 showcenterobj('approval-circle'+x); 208 } 209 for(var x=1;x<=chartn;x++){ 210 moveshape('end-circle'+x); 211 showcenterobj('end-circle'+x); 212 } 213 } 214 function addjsonobj(id,width,height){ 215 shapeobjjson.shapeobj.push({ 216 id : id, 217 width : width, 218 height : height, 219 offsettop : "", 220 offsetleft : "", 221 leftcenterdot : "", 222 rightcenterdot : "", 223 topcenterdot : "", 224 bottomcenterdot : "", 225 }); 226 objsumwidth=objsumwidth+parseInt(width); 227 } 228 function whichobj(idconstr){ 229 if(idconstr=="begin"){ 230 addjsonobj("begin-circle","132","67"); 231 }else if(idconstr=="tab"){ 232 addjsonobj("tableform"+charti,"132","67"); 233 charti++; 234 }else if(idconstr=="dug"){ 235 addjsonobj("approval-circle"+chartm,"102","102"); 236 chartm++; 237 }else if(idconstr=="end"){ 238 addjsonobj("end-circle"+chartn,"132","67"); 239 chartn++; 240 } 241 }
具体位置是由对象的个数决定的，距离顶部的位置暂时设为定值。
本文需要先阅读JS流程设计器（一），以便于读懂JS流程设计器（二）的代码。如有任何建议，还望提出。
