该流程设计器主要用的js，jsp，jquery来完成，可以设计比较简单的流程图，开发时间为两周，仅供参考，哪里不好的地方希望多提建议。
index.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme() + "://" 5 + request.getServerName() + ":" + request.getServerPort() 6 + path + "/"; 7 %> 8 9 <!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"--> 10 <!DOCTYPE html> 11 <head> 12 <base href="<%=basePath%>"> 13 <meta charset="utf-8"> 14 <title>工作流</title> 15 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 16 <script type="text/javascript" src="js/drag.js"></script> 17 18 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 19 <style type="text/css"> 20 .tableform { 21 width: 130px; 22 height: 70px; 23 cursor: move; 24 position: absolute; 25 top: 30px; 26 left: 30%; 27 background-color: #FFF; 28 border: 1px solid #CCCCCC; 29 -webkit-box-shadow: 10px 10px 25px #ccc; 30 -moz-box-shadow: 10px 10px 25px #ccc; 31 -ms-box-shadow: 10px 10px 25px #ccc; 32 box-shadow: 10px 10px 25px #ccc; 33 background: no-repeat 10px center; 34 text-align:center; 35 line-height:70px; 36 } 37 .begin-circle { 38 width: 130px; 39 height: 65px; 40 cursor: move; 41 position: absolute; 42 top: 130px; 43 left: 30%; 44 -moz-border-radius: 65px / 32px; 45 -webkit-border-radius: 65px / 32px; 46 -ms-border-radius: 65px / 32px; 47 border-radius: 65px / 32px; 48 background-color: #FFF; 49 border: 1px solid #CCCCCC; 50 -webkit-box-shadow: 20px 20px 35px #ccc; 51 -moz-box-shadow: 20px 20px 35px #ccc; 52 -msoz-box-shadow: 20px 20px 35px #ccc; 53 box-shadow: 20px 20px 35px #ccc; 54 background: no-repeat 10px center;/* url("images/yuanxing.jpg") */ 55 text-align:center; 56 line-height:65px; 57 } 58 .end-circle { 59 width: 130px; 60 height: 65px; 61 cursor: move; 62 position: absolute; 63 top: 230px; 64 left: 30%; 65 -moz-border-radius: 65px / 32px; 66 -webkit-border-radius: 65px / 32px; 67 -ms-border-radius: 65px / 32px; 68 border-radius: 65px / 32px; 69 background-color: #FFF; 70 border: 1px solid #CCCCCC; 71 -webkit-box-shadow: 20px 20px 35px #ccc; 72 -moz-box-shadow: 20px 20px 35px #ccc; 73 -msoz-box-shadow: 20px 20px 35px #ccc; 74 box-shadow: 20px 20px 35px #ccc; 75 background: no-repeat 10px center;/* url("images/yuanxing.jpg") */ 76 text-align:center; 77 line-height:65px; 78 } 79 .approval-circle { 80 width: 100px; 81 height: 100px; 82 cursor: move; 83 position: absolute; 84 top: 330px; 85 left: 30%; 86 border-radius: 50px; 87 background-color: #FFF; 88 border: 1px solid #CCCCCC; 89 -webkit-box-shadow: 20px 20px 35px #ccc; 90 -moz-box-shadow: 20px 20px 35px #ccc; 91 -msoz-box-shadow: 20px 20px 35px #ccc; 92 box-shadow: 20px 20px 35px #ccc; 93 background: no-repeat 10px center;/* url("images/yuanxing.jpg") */ 94 text-align:center; 95 line-height:100px; 96 } 97 #coor { 98 width: 3px; 99 height: 3px; 100 overflow: hidden; 101 border: 1px solid red; 102 background-color: red; 103 } 104 .point{ 105 width: 4px; 106 height: 4px; 107 overflow: hidden; 108 border: 1px solid blue; 109 background-color: blue; 110 } 111 #circle-center{ 112 width: 8px; 113 height: 8px; 114 border-radius: 4px; 115 cursor: auto; 116 background-color: #0066cc; 117 border: 1px solid #0066cc; 118 } 119 #showhidden{ 120 width: 8px; 121 height: 8px; 122 } 123 body { 124 width:100%; 125 height:100%; 126 } 127 html { 128 font-family: "Microsoft YaHei","SimSun",Arial, Helvetica, sans-serif; 129 line-height: 3.5; 130 -ms-text-size-adjust: 100%; 131 -webkit-text-size-adjust: 100%; } 132 *{margin:0;padding:0;list-style-type:none;} 133 a,img{border:0;} 134 .navbox{float:left;height:100%;width:15%;background-color:#F3F3F3;padding-left:1%;} 135 ul.nav{width:20%;height:100%;padding:5% 0 0 5%;background:url() no-repeat;} 136 ul.nav li{margin:50px 20px 20px 0px;} 137 ul.nav li a{ 138 background:#cbcbcb url() no-repeat; 139 color:#174867; 140 padding:7px 15px 7px 15px; 141 width:100px; 142 display:block; 143 text-decoration:none; 144 text-align:center; 145 -webkit-transition:all 0.3s ease-out; 146 -moz-transition:all 0.3s ease-out; 147 -ms-transition:all 0.3s ease-out; 148 -webkit-box-shadow:15px 4px 8px #888; 149 -moz-box-shadow:15px 4px 8px #888; 150 box-shadow:15px 4px 8px #888; 151 } 152 ul.nav li a:hover{background:#ebebeb url() no-repeat;color:#67a5cd;padding:7px 15px 7px 30px;} 153 .right-area{ 154 width:80%; 155 height:100%; 156 padding-left:16%; 157 background:white; 158 } 159 input{width:60px;height:30px;} 160 button { 161 width:100px; 162 height:50px; 163 background-color:#f78d1d; 164 } 165 </style> 166 </head> 167 <body> 168 <div class="navbox"> 169 <ul class="nav"> 170 <li onclick="showrightarea('begin')"><a href="#">开始</a></li> 171 <li onclick="showrightarea('tableform')"><a href="#">表单</a></li> 172 <!-- <li οnclick="showrightarea('flow')"><a href="#">流向</a></li> --> 173 <li onclick="showrightarea('approval')"><a href="#">审批</a></li> 174 <li onclick="showrightarea('end')"><a href="#">结束</a></li> 175 <button onclick="showrightarea('delete')">删除</button> 176 </ul> 177 </div> 178 <div class="right-area" id="right-area"> 179 </div> 180 </body> 181 <script type="text/javascript"> 182 var charti=1; 183 var chartj=1; 184 var chartm=1; 185 var chartn=1; 186 var havemove=false; 187 var startdotid=""; 188 var enddotid=""; 189 var shapeobjstr = "{\"shapeobj\":[]}"; 190 //已选择中的json数据 191 var shapeobjjson = eval('(' + shapeobjstr + ')'); 192 //存储箭头方面的相关信息 193 var lineobjstr = "{\"lineobj\":[]}"; 194 var lineobjjson = eval('(' + lineobjstr + ')'); 195 //获取选中的ID 196 var selectedid=""; 197 function showrightarea(operation){ 198 if(operation=='begin'){ 199 if(document.getElementById("begin-circle")==undefined){ 200 $(".right-area").html($(".right-area").html()+'<div class="begin-circle" id="begin-circle" οnclick="_click(\'begin-circle\')" οndblclick="_dblclick(\'begin-circle\')">' 201 +'<div class="point" id="leftpoint"></div>' 202 +'<div class="point" id="rightpoint"></div>' 203 +'<div class="point" id="toppoint"></div>' 204 +'<div class="point" id="bottompoint"></div>' 205 +'<div id="showhidden"><div id="circle-center" style="display:none"></div></div>' 206 +'<div id="begin-circleval" onselectstart="return false">开始</div></div>'); 207 shapeobjjson.shapeobj.push({ 208 id : "begin-circle", 209 width : $("#begin-circle")[0].offsetWidth, 210 height : $("#begin-circle")[0].offsetHeight, 211 offsettop : $("#begin-circle")[0].offsetTop, 212 offsetleft : $("#begin-circle")[0].offsetLeft, 213 leftcenterdot:$("#begin-circle")[0].offsetLeft+";"+(parseInt($("#begin-circle")[0].offsetTop)+parseInt($("#begin-circle")[0].offsetHeight/2)), 214 rightcenterdot:(parseInt($("#begin-circle")[0].offsetLeft)+parseInt($("#begin-circle")[0].offsetWidth))+";"+(parseInt($("#begin-circle")[0].offsetTop)+parseInt($("#begin-circle")[0].offsetHeight/2)), 215 topcenterdot:(parseInt($("#begin-circle")[0].offsetLeft)+parseInt($("#begin-circle")[0].offsetWidth/2))+";"+$("#begin-circle")[0].offsetTop, 216 bottomcenterdot:(parseInt($("#begin-circle")[0].offsetLeft)+parseInt($("#begin-circle")[0].offsetWidth/2))+";"+(parseInt($("#begin-circle")[0].offsetTop)+parseInt($("#begin-circle")[0].offsetHeight)), 217 }); 218 $("#begin-circle #showhidden").css("position","fixed"); 219 $("#begin-circle #showhidden").css("top",parseInt($("#begin-circle")[0].offsetTop)+parseInt($("#begin-circle")[0].offsetHeight/2)-4+"px"); 220 $("#begin-circle #showhidden").css("left",parseInt($("#begin-circle")[0].offsetLeft)+parseInt($("#begin-circle")[0].offsetWidth/2)-4+"px"); 221 $("#begin-circle #showhidden #circle-center").css("position","fixed"); 222 $("#begin-circle #showhidden #circle-center").css("top",parseInt($("#begin-circle")[0].offsetTop)+parseInt($("#begin-circle")[0].offsetHeight/2)-4+"px"); 223 $("#begin-circle #showhidden #circle-center").css("left",parseInt($("#begin-circle")[0].offsetLeft)+parseInt($("#begin-circle")[0].offsetWidth/2)-4+"px"); 224 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 225 if(shapeobjjson.shapeobj[p].id=="begin-circle"){ 226 //左方块 227 $("#begin-circle #leftpoint").css("position","fixed"); 228 $("#begin-circle #leftpoint").css("top",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[1]-2)+"px"); 229 $("#begin-circle #leftpoint").css("left",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[0]-2)+"px"); 230 //右方块 231 $("#begin-circle #rightpoint").css("position","fixed"); 232 $("#begin-circle #rightpoint").css("top",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[1]-2)+"px"); 233 $("#begin-circle #rightpoint").css("left",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[0]-2)+"px"); 234 //上方块 235 $("#begin-circle #toppoint").css("position","fixed"); 236 $("#begin-circle #toppoint").css("top",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[1]-2)+"px"); 237 $("#begin-circle #toppoint").css("left",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[0]-2)+"px"); 238 //下方快 239 $("#begin-circle #bottompoint").css("position","fixed"); 240 $("#begin-circle #bottompoint").css("top",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[1]-2)+"px"); 241 $("#begin-circle #bottompoint").css("left",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[0]-2)+"px"); 242 } 243 } 244 }else{ 245 alert("只能有一个开始按钮，可以删除后进行重新添加"); 246 } 247 }else if(operation=='tableform'){ 248 $(".right-area").html($(".right-area").html()+'<div class="tableform" id="tableform'+charti+'" οnclick="_click(\'tableform'+charti+'\')" οndblclick="_dblclick(\'tableform'+charti+'\')">' 249 +'<div class="point" id="leftpoint"></div>' 250 +'<div class="point" id="rightpoint"></div>' 251 +'<div class="point" id="toppoint"></div>' 252 +'<div class="point" id="bottompoint"></div>' 253 +'<div id="showhidden"><div id="circle-center" style="display:none"></div></div>' 254 +'<div id="tableform'+charti+'val" onselectstart="return false">表单'+charti+'</div></div>'); 255 shapeobjjson.shapeobj.push({ 256 id : "tableform"+charti, 257 width : $("#tableform"+charti)[0].offsetWidth, 258 height : $("#tableform"+charti)[0].offsetHeight, 259 offsettop : $("#tableform"+charti)[0].offsetTop, 260 offsetleft : $("#tableform"+charti)[0].offsetLeft, 261 leftcenterdot:$("#tableform"+charti)[0].offsetLeft+";"+(parseInt($("#tableform"+charti)[0].offsetTop)+parseInt($("#tableform"+charti)[0].offsetHeight/2)), 262 rightcenterdot:(parseInt($("#tableform"+charti)[0].offsetLeft)+parseInt($("#tableform"+charti)[0].offsetWidth))+";"+(parseInt($("#tableform"+charti)[0].offsetTop)+parseInt($("#tableform"+charti)[0].offsetHeight/2)), 263 topcenterdot:(parseInt($("#tableform"+charti)[0].offsetLeft)+parseInt($("#tableform"+charti)[0].offsetWidth/2))+";"+$("#tableform"+charti)[0].offsetTop, 264 bottomcenterdot:(parseInt($("#tableform"+charti)[0].offsetLeft)+parseInt($("#tableform"+charti)[0].offsetWidth/2))+";"+(parseInt($("#tableform"+charti)[0].offsetTop)+parseInt($("#tableform"+charti)[0].offsetHeight)), 265 }); 266 $("#tableform"+charti+" #showhidden").css("position","fixed"); 267 $("#tableform"+charti+" #showhidden").css("top",parseInt($("#tableform"+charti)[0].offsetTop)+parseInt($("#tableform"+charti)[0].offsetHeight/2)-4+"px"); 268 $("#tableform"+charti+" #showhidden").css("left",parseInt($("#tableform"+charti)[0].offsetLeft)+parseInt($("#tableform"+charti)[0].offsetWidth/2)-4+"px"); 269 $("#tableform"+charti+" #showhidden #circle-center").css("position","fixed"); 270 $("#tableform"+charti+" #showhidden #circle-center").css("top",parseInt($("#tableform"+charti)[0].offsetTop)+parseInt($("#tableform"+charti)[0].offsetHeight/2)-4+"px"); 271 $("#tableform"+charti+" #showhidden #circle-center").css("left",parseInt($("#tableform"+charti)[0].offsetLeft)+parseInt($("#tableform"+charti)[0].offsetWidth/2)-4+"px"); 272 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 273 if(shapeobjjson.shapeobj[p].id=="tableform"+charti){ 274 //左方块 275 $("#tableform"+charti+" #leftpoint").css("position","fixed"); 276 $("#tableform"+charti+" #leftpoint").css("top",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[1]-2)+"px"); 277 $("#tableform"+charti+" #leftpoint").css("left",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[0]-2)+"px"); 278 //右方块 279 $("#tableform"+charti+" #rightpoint").css("position","fixed"); 280 $("#tableform"+charti+" #rightpoint").css("top",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[1]-2)+"px"); 281 $("#tableform"+charti+" #rightpoint").css("left",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[0]-2)+"px"); 282 //上方块 283 $("#tableform"+charti+" #toppoint").css("position","fixed"); 284 $("#tableform"+charti+" #toppoint").css("top",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[1]-2)+"px"); 285 $("#tableform"+charti+" #toppoint").css("left",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[0]-2)+"px"); 286 //下方快 287 $("#tableform"+charti+" #bottompoint").css("position","fixed"); 288 $("#tableform"+charti+" #bottompoint").css("top",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[1]-2)+"px"); 289 $("#tableform"+charti+" #bottompoint").css("left",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[0]-2)+"px"); 290 } 291 } 292 charti++; 293 }else if(operation=='approval'){ 294 $(".right-area").html($(".right-area").html()+'<div class="approval-circle" id="approval-circle'+chartm+'" οnclick="_click(\'approval-circle'+chartm+'\')" οndblclick="_dblclick(\'approval-circle'+chartm+'\')">' 295 +'<div class="point" id="leftpoint"></div>' 296 +'<div class="point" id="rightpoint"></div>' 297 +'<div class="point" id="toppoint"></div>' 298 +'<div class="point" id="bottompoint">' 299 +'</div><div id="showhidden"><div id="circle-center" style="display:none"></div></div>' 300 +'<div id="approval-circle'+chartm+'val" onselectstart="return false">审批'+chartm+'</div></div>'); 301 shapeobjjson.shapeobj.push({ 302 id : "approval-circle"+chartm, 303 width : $("#approval-circle"+chartm)[0].offsetWidth, 304 height : $("#approval-circle"+chartm)[0].offsetHeight, 305 offsettop : $("#approval-circle"+chartm)[0].offsetTop, 306 offsetleft : $("#approval-circle"+chartm)[0].offsetLeft, 307 leftcenterdot:$("#approval-circle"+chartm)[0].offsetLeft+";"+(parseInt($("#approval-circle"+chartm)[0].offsetTop)+parseInt($("#approval-circle"+chartm)[0].offsetHeight/2)), 308 rightcenterdot:(parseInt($("#approval-circle"+chartm)[0].offsetLeft)+parseInt($("#approval-circle"+chartm)[0].offsetWidth))+";"+(parseInt($("#approval-circle"+chartm)[0].offsetTop)+parseInt($("#approval-circle"+chartm)[0].offsetHeight/2)), 309 topcenterdot:(parseInt($("#approval-circle"+chartm)[0].offsetLeft)+parseInt($("#approval-circle"+chartm)[0].offsetWidth/2))+";"+$("#approval-circle"+chartm)[0].offsetTop, 310 bottomcenterdot:(parseInt($("#approval-circle"+chartm)[0].offsetLeft)+parseInt($("#approval-circle"+chartm)[0].offsetWidth/2))+";"+(parseInt($("#approval-circle"+chartm)[0].offsetTop)+parseInt($("#approval-circle"+chartm)[0].offsetHeight)), 311 }); 312 $("#approval-circle"+chartm+" #showhidden").css("position","fixed"); 313 $("#approval-circle"+chartm+" #showhidden").css("top",parseInt($("#approval-circle"+chartm)[0].offsetTop)+parseInt($("#approval-circle"+chartm)[0].offsetHeight/2)-4+"px"); 314 $("#approval-circle"+chartm+" #showhidden").css("left",parseInt($("#approval-circle"+chartm)[0].offsetLeft)+parseInt($("#approval-circle"+chartm)[0].offsetWidth/2)-4+"px"); 315 $("#approval-circle"+chartm+" #showhidden #circle-center").css("position","fixed"); 316 $("#approval-circle"+chartm+" #showhidden #circle-center").css("top",parseInt($("#approval-circle"+chartm)[0].offsetTop)+parseInt($("#approval-circle"+chartm)[0].offsetHeight/2)-4+"px"); 317 $("#approval-circle"+chartm+" #showhidden #circle-center").css("left",parseInt($("#approval-circle"+chartm)[0].offsetLeft)+parseInt($("#approval-circle"+chartm)[0].offsetWidth/2)-4+"px"); 318 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 319 if(shapeobjjson.shapeobj[p].id=="approval-circle"+chartm){ 320 //左方块 321 $("#approval-circle"+chartm+" #leftpoint").css("position","fixed"); 322 $("#approval-circle"+chartm+" #leftpoint").css("top",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[1]-2)+"px"); 323 $("#approval-circle"+chartm+" #leftpoint").css("left",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[0]-2)+"px"); 324 //右方块 325 $("#approval-circle"+chartm+" #rightpoint").css("position","fixed"); 326 $("#approval-circle"+chartm+" #rightpoint").css("top",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[1]-2)+"px"); 327 $("#approval-circle"+chartm+" #rightpoint").css("left",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[0]-2)+"px"); 328 //上方块 329 $("#approval-circle"+chartm+" #toppoint").css("position","fixed"); 330 $("#approval-circle"+chartm+" #toppoint").css("top",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[1]-2)+"px"); 331 $("#approval-circle"+chartm+" #toppoint").css("left",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[0]-2)+"px"); 332 //下方快 333 $("#approval-circle"+chartm+" #bottompoint").css("position","fixed"); 334 $("#approval-circle"+chartm+" #bottompoint").css("top",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[1]-2)+"px"); 335 $("#approval-circle"+chartm+" #bottompoint").css("left",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[0]-2)+"px"); 336 } 337 } 338 chartm++; 339 }else if(operation=='end'){ 340 $(".right-area").html($(".right-area").html()+'<div class="end-circle" id="end-circle'+chartn+'" οnclick="_click(\'end-circle'+chartn+'\')" οndblclick="_dblclick(\'end-circle'+chartn+'\')">' 341 +'<div class="point" id="leftpoint"></div>' 342 +'<div class="point" id="rightpoint"></div>' 343 +'<div class="point" id="toppoint"></div>' 344 +'<div class="point" id="bottompoint"></div>' 345 +'<div id="showhidden"><div id="circle-center" style="display:none"></div></div>' 346 +'<div id="end-circle'+chartn+'val" onselectstart="return false">结束'+chartn+'</div></div>'); 347 shapeobjjson.shapeobj.push({ 348 id : "end-circle"+chartn, 349 width : $("#end-circle"+chartn)[0].offsetWidth, 350 height : $("#end-circle"+chartn)[0].offsetHeight, 351 offsettop : $("#end-circle"+chartn)[0].offsetTop, 352 offsetleft : $("#end-circle"+chartn)[0].offsetLeft, 353 leftcenterdot:$("#end-circle"+chartn)[0].offsetLeft+";"+(parseInt($("#end-circle"+chartn)[0].offsetTop)+parseInt($("#end-circle"+chartn)[0].offsetHeight/2)), 354 rightcenterdot:(parseInt($("#end-circle"+chartn)[0].offsetLeft)+parseInt($("#end-circle"+chartn)[0].offsetWidth))+";"+(parseInt($("#end-circle"+chartn)[0].offsetTop)+parseInt($("#end-circle"+chartn)[0].offsetHeight/2)), 355 topcenterdot:(parseInt($("#end-circle"+chartn)[0].offsetLeft)+parseInt($("#end-circle"+chartn)[0].offsetWidth/2))+";"+$("#end-circle"+chartn)[0].offsetTop, 356 bottomcenterdot:(parseInt($("#end-circle"+chartn)[0].offsetLeft)+parseInt($("#end-circle"+chartn)[0].offsetWidth/2))+";"+(parseInt($("#end-circle"+chartn)[0].offsetTop)+parseInt($("#end-circle"+chartn)[0].offsetHeight)), 357 }); 358 $("#end-circle"+chartn+" #showhidden").css("position","fixed"); 359 $("#end-circle"+chartn+" #showhidden").css("top",parseInt($("#end-circle"+chartn)[0].offsetTop)+parseInt($("#end-circle"+chartn)[0].offsetHeight/2)-4+"px"); 360 $("#end-circle"+chartn+" #showhidden").css("left",parseInt($("#end-circle"+chartn)[0].offsetLeft)+parseInt($("#end-circle"+chartn)[0].offsetWidth/2)-4+"px"); 361 $("#end-circle"+chartn+" #showhidden").css("position","fixed"); 362 $("#end-circle"+chartn+" #showhidden").css("top",parseInt($("#end-circle"+chartn)[0].offsetTop)+parseInt($("#end-circle"+chartn)[0].offsetHeight/2)-4+"px"); 363 $("#end-circle"+chartn+" #showhidden").css("left",parseInt($("#end-circle"+chartn)[0].offsetLeft)+parseInt($("#end-circle"+chartn)[0].offsetWidth/2)-4+"px"); 364 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 365 if(shapeobjjson.shapeobj[p].id=="end-circle"+chartn){ 366 //左方块 367 $("#end-circle"+chartn+" #leftpoint").css("position","fixed"); 368 $("#end-circle"+chartn+" #leftpoint").css("top",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[1]-2)+"px"); 369 $("#end-circle"+chartn+" #leftpoint").css("left",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[0]-2)+"px"); 370 //右方块 371 $("#end-circle"+chartn+" #rightpoint").css("position","fixed"); 372 $("#end-circle"+chartn+" #rightpoint").css("top",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[1]-2)+"px"); 373 $("#end-circle"+chartn+" #rightpoint").css("left",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[0]-2)+"px"); 374 //上方块 375 $("#end-circle"+chartn+" #toppoint").css("position","fixed"); 376 $("#end-circle"+chartn+" #toppoint").css("top",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[1]-2)+"px"); 377 $("#end-circle"+chartn+" #toppoint").css("left",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[0]-2)+"px"); 378 //下方快 379 $("#end-circle"+chartn+" #bottompoint").css("position","fixed"); 380 $("#end-circle"+chartn+" #bottompoint").css("top",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[1]-2)+"px"); 381 $("#end-circle"+chartn+" #bottompoint").css("left",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[0]-2)+"px"); 382 } 383 } 384 chartn++; 385 }else if(operation=='delete'){ 386 if(selectedid!=""){ 387 $("#"+selectedid).remove(); 388 for(var k=0;k<shapeobjjson.shapeobj.length;k++){ 389 if(shapeobjjson.shapeobj[k].id==selectedid){ 390 shapeobjjson.shapeobj.splice(k, 1); 391 } 392 } 393 for(var k=0;k<lineobjjson.lineobj.length;k++){ 394 if(lineobjjson.lineobj[k].lineid==selectedid){ 395 lineobjjson.lineobj.splice(k, 1); 396 } 397 } 398 }else{ 399 alert("请选中一个对象进行删除！"); 400 } 401 } 402 403 showcenterobj('begin-circle'); 404 moveshape('begin-circle'); 405 for(var x=1;x<=charti;x++){ 406 moveshape('tableform'+x); 407 showcenterobj('tableform'+x); 408 } 409 for(var x=1;x<=chartm;x++){ 410 moveshape('approval-circle'+x); 411 showcenterobj('approval-circle'+x); 412 } 413 for(var x=1;x<=chartn;x++){ 414 moveshape('end-circle'+x); 415 showcenterobj('end-circle'+x); 416 } 417 //showcenterobj('flow'); 418 console.log("shapeobjjson:"+JSON.stringify(shapeobjjson)); 419 for(var p=0;p<lineobjjson.lineobj.length;p++){ 420 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]); 421 } 422 } 423 var clickTimer = null; 424 //单击选中 425 function _click(id){ 426 if(clickTimer) { 427 window.clearTimeout(clickTimer); 428 clickTimer = null; 429 } 430 431 clickTimer = window.setTimeout(function(){ 432 //$("#"+id).css("border","1px dashed #CCCCCC"); 433 selectedid=id; 434 }, 300); 435 } 436 //双击显示文本框 437 function _dblclick(id){ 438 if(clickTimer) { 439 window.clearTimeout(clickTimer); 440 clickTimer = null; 441 } 442 showtextbox(id); 443 } 444 //双击显示文本框 445 function showtextbox(id){ 446 var centerleft=parseInt($("#"+id)[0].offsetLeft)+parseInt($("#"+id)[0].offsetWidth/2)-parseInt(30); 447 var centertop=parseInt($("#"+id)[0].offsetTop)+parseInt($("#"+id)[0].offsetHeight/2)-parseInt(15); 448 if(document.getElementById(""+id+"input")==undefined){ 449 //获取默认内容 450 var defaultcontent=$("#"+id+"val").text(); 451 $("#"+id+"val").remove(); 452 $("#"+id).html($("#"+id).html()+'<input type="text" id="'+id+'input" style="position:fixed; top:'+(centertop)+'px;left:'+(centerleft)+'px;"value="'+defaultcontent+'"/>'); 453 $("#"+id+"input").focus(); 454 } 455 $("#"+id+"input").blur(function(){ 456 $("#"+id+"val").remove(); 457 $("#"+id).html($("#"+id).html()+'<div id="'+id+'val" onselectstart="return false">'+$("#"+id+"input").val()+'</div>'); 458 setTimeout($("#"+id+"input").remove(),10000); 459 showcenterobj('begin-circle'); 460 for(var x=1;x<=charti;x++){ 461 showcenterobj('tableform'+x); 462 } 463 for(var x=1;x<=chartm;x++){ 464 showcenterobj('approval-circle'+x); 465 } 466 for(var x=1;x<=chartn;x++){ 467 showcenterobj('end-circle'+x); 468 } 469 }) 470 } 471 /* function showconnet(dotposition,dotdivid){ 472 $("#"+dotdivid).html($("#"+dotdivid).html()+'<div class="coor" id="coor" style="position:fixed; top:'+(dotposition.split(";")[1]-3)+'px;left:'+(dotposition.split(";")[0]-3)+'px;"></div>'); 473 } */ 474 </script> 475 </html>
drag.js
1 /** 2 * author qiuhaonan 3 * 4 */ 5 $(function() { 6 //判断是否用键盘进行删除对象 7 window.document.onkeydown = disableRefresh; 8 function disableRefresh(evt){ 9 evt = (evt) ? evt : window.event; 10 if (evt.keyCode) { 11 //46代表的是键盘中的delete键 12 if(evt.keyCode == 46){ 13 if(selectedid!=""){ 14 $("#"+selectedid).remove(); 15 for(var k=0;k<shapeobjjson.shapeobj.length;k++){ 16 if(shapeobjjson.shapeobj[k].id==selectedid){ 17 shapeobjjson.shapeobj.splice(k, 1); 18 } 19 } 20 for(var k=0;k<lineobjjson.lineobj.length;k++){ 21 if(lineobjjson.lineobj[k].lineid==selectedid){ 22 lineobjjson.lineobj.splice(k, 1); 23 } 24 } 25 }else{ 26 alert("请选中一个对象进行删除！"); 27 } 28 } 29 } 30 } 31 $(document).mousemove(function(e) { 32 if (!!this.move) { 33 //获取移动对象的ID以及其他属性 34 var moveid=$(this.move_target).attr("id"); 35 var moveoffsettop=parseInt($(this.move_target).css("top").replace("px","")); 36 var moveoffsetleft=parseInt($(this.move_target).css("left").replace("px","")); 37 var moveleftcenterdot=parseInt($(this.move_target).css("left").replace("px",""))+";"+(parseInt($(this.move_target).css("top").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetHeight/2)); 38 var moverightcenterdot=(parseInt($(this.move_target).css("left").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetWidth))+";"+(parseInt($(this.move_target).css("top").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetHeight/2)); 39 var movetopcenterdot=(parseInt($(this.move_target).css("left").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetWidth/2))+";"+parseInt($(this.move_target).css("top").replace("px","")); 40 var movebottomcenterdot=(parseInt($(this.move_target).css("left").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetWidth/2))+";"+(parseInt($(this.move_target).css("top").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetHeight)); 41 //为图形添加终点小方块 42 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 43 if(shapeobjjson.shapeobj[p].id==$(this.move_target).attr("id")){ 44 //左方块 45 $("#"+$(this.move_target).attr("id")+" #leftpoint").css("position","fixed"); 46 $("#"+$(this.move_target).attr("id")+" #leftpoint").css("top",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[1]-2)+"px"); 47 $("#"+$(this.move_target).attr("id")+" #leftpoint").css("left",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[0]-2)+"px"); 48 //右方块 49 $("#"+$(this.move_target).attr("id")+" #rightpoint").css("position","fixed"); 50 $("#"+$(this.move_target).attr("id")+" #rightpoint").css("top",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[1]-2)+"px"); 51 $("#"+$(this.move_target).attr("id")+" #rightpoint").css("left",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[0]-2)+"px"); 52 //上方块 53 $("#"+$(this.move_target).attr("id")+" #toppoint").css("position","fixed"); 54 $("#"+$(this.move_target).attr("id")+" #toppoint").css("top",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[1]-2)+"px"); 55 $("#"+$(this.move_target).attr("id")+" #toppoint").css("left",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[0]-2)+"px"); 56 //下方块 57 $("#"+$(this.move_target).attr("id")+" #bottompoint").css("position","fixed"); 58 $("#"+$(this.move_target).attr("id")+" #bottompoint").css("top",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[1]-2)+"px"); 59 $("#"+$(this.move_target).attr("id")+" #bottompoint").css("left",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[0]-2)+"px"); 60 } 61 } 62 havemove=true; 63 var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix, 64 callback = document.call_down || function() { 65 $(this.move_target).css({ 66 'top': e.pageY - posix.y, 67 'left': e.pageX - posix.x 68 }); 69 }; 70 callback.call(this, e, posix); 71 }else{ 72 havemove=false; 73 } 74 }).mouseup(function(e) { 75 if (!!this.move) { 76 var moveid=$(this.move_target).attr("id"); 77 var moveoffsettop=parseInt($(this.move_target).css("top").replace("px","")); 78 var moveoffsetleft=parseInt($(this.move_target).css("left").replace("px","")); 79 var moveleftcenterdot=parseInt($(this.move_target).css("left").replace("px",""))+";"+(parseInt($(this.move_target).css("top").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetHeight/2)); 80 var moverightcenterdot=(parseInt($(this.move_target).css("left").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetWidth))+";"+(parseInt($(this.move_target).css("top").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetHeight/2)); 81 var movetopcenterdot=(parseInt($(this.move_target).css("left").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetWidth/2))+";"+parseInt($(this.move_target).css("top").replace("px","")); 82 var movebottomcenterdot=(parseInt($(this.move_target).css("left").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetWidth/2))+";"+(parseInt($(this.move_target).css("top").replace("px",""))+parseInt($("#"+$(this.move_target).attr("id"))[0].offsetHeight)); 83 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 84 if(shapeobjjson.shapeobj[p].id==moveid){ 85 shapeobjjson.shapeobj[p].offsettop=moveoffsettop; 86 shapeobjjson.shapeobj[p].offsetleft=moveoffsetleft; 87 shapeobjjson.shapeobj[p].leftcenterdot=moveleftcenterdot; 88 shapeobjjson.shapeobj[p].rightcenterdot=moverightcenterdot; 89 shapeobjjson.shapeobj[p].topcenterdot=movetopcenterdot; 90 shapeobjjson.shapeobj[p].bottomcenterdot=movebottomcenterdot; 91 } 92 } 93 console.log("shapeobjjson:"+JSON.stringify(shapeobjjson)); 94 //更新坐标 95 for(var p=0;p<lineobjjson.lineobj.length;p++){ 96 if(moveid==lineobjjson.lineobj[p].startid||moveid==lineobjjson.lineobj[p].endid){ 97 var startdot=new Array(4); 98 var enddot=new Array(4); 99 for(var q=0;q<shapeobjjson.shapeobj.length;q++){ 100 //获取线起始点的左中点，右中点，上中点和下中点的坐标 101 if(shapeobjjson.shapeobj[q].id==lineobjjson.lineobj[p].startid){ 102 startdot[0]=shapeobjjson.shapeobj[q].leftcenterdot; 103 startdot[1]=shapeobjjson.shapeobj[q].rightcenterdot; 104 startdot[2]=shapeobjjson.shapeobj[q].topcenterdot; 105 startdot[3]=shapeobjjson.shapeobj[q].bottomcenterdot; 106 } 107 //获取线終点的左中点，右中点，上中点和下中点的坐标 108 if(shapeobjjson.shapeobj[q].id==lineobjjson.lineobj[p].endid){ 109 enddot[0]=shapeobjjson.shapeobj[q].leftcenterdot; 110 enddot[1]=shapeobjjson.shapeobj[q].rightcenterdot; 111 enddot[2]=shapeobjjson.shapeobj[q].topcenterdot; 112 enddot[3]=shapeobjjson.shapeobj[q].bottomcenterdot; 113 } 114 } 115 //连接起始点和终点连线最短的线 116 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)); 117 //start和end的值0,1,2,3代表是该对象左中点，右中点，上中点还是下中点 118 var start=0; 119 var end=0; 120 //获取线最短的两个点的位置 121 for(var x=0;x<startdot.length;x++){ 122 for(var y=0;y<enddot.length;y++){ 123 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){ 124 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)); 125 start=x; 126 end=y; 127 } 128 } 129 } 130 lineobjjson.lineobj[p].startpos=start; 131 lineobjjson.lineobj[p].endpos=end; 132 lineobjjson.lineobj[p].startcsys=startdot[start]; 133 lineobjjson.lineobj[p].endcsys=enddot[end]; 134 } 135 } 136 //动态画线和箭头 137 for(var p=0;p<lineobjjson.lineobj.length;p++){ 138 //线的起始点ID在移动 139 if(lineobjjson.lineobj[p].startid==moveid){ 140 //$("#"+lineobjjson.lineobj[p].lineid).remove(); 141 //$(".right-area").html($(".right-area").html()+'<canvas class="flow" id="'+lineobjjson.lineobj[p].lineid+'" οnclick="_click(\''+lineobjjson.lineobj[p].lineid+'\')"></canvas>'); 142 if(lineobjjson.lineobj[p].startpos==0){ 143 drawarrow(lineobjjson.lineobj[p].lineid,0,0,moveleftcenterdot.split(";")[0],moveleftcenterdot.split(";")[1],lineobjjson.lineobj[p].endcsys.split(";")[0],lineobjjson.lineobj[p].endcsys.split(";")[1]); 144 }else if(lineobjjson.lineobj[p].startpos==1){ 145 drawarrow(lineobjjson.lineobj[p].lineid,0,0,moverightcenterdot.split(";")[0],moverightcenterdot.split(";")[1],lineobjjson.lineobj[p].endcsys.split(";")[0],lineobjjson.lineobj[p].endcsys.split(";")[1]); 146 }else if(lineobjjson.lineobj[p].startpos==2){ 147 drawarrow(lineobjjson.lineobj[p].lineid,0,0,movetopcenterdot.split(";")[0],movetopcenterdot.split(";")[1],lineobjjson.lineobj[p].endcsys.split(";")[0],lineobjjson.lineobj[p].endcsys.split(";")[1]); 148 }else if(lineobjjson.lineobj[p].startpos==3){ 149 drawarrow(lineobjjson.lineobj[p].lineid,0,0,movebottomcenterdot.split(";")[0],movebottomcenterdot.split(";")[1],lineobjjson.lineobj[p].endcsys.split(";")[0],lineobjjson.lineobj[p].endcsys.split(";")[1]); 150 } 151 }else if(lineobjjson.lineobj[p].endid==moveid){//线的终点ID在移动 152 //$("#"+lineobjjson.lineobj[p].lineid).remove(); 153 //$(".right-area").html($(".right-area").html()+'<canvas class="flow" id="'+lineobjjson.lineobj[p].lineid+'" οnclick="_click(\''+lineobjjson.lineobj[p].lineid+'\')"></canvas>'); 154 if(lineobjjson.lineobj[p].endpos==0){ 155 drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(";")[0],lineobjjson.lineobj[p].startcsys.split(";")[1],moveleftcenterdot.split(";")[0],moveleftcenterdot.split(";")[1]); 156 }else if(lineobjjson.lineobj[p].endpos==1){ 157 drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(";")[0],lineobjjson.lineobj[p].startcsys.split(";")[1],moverightcenterdot.split(";")[0],moverightcenterdot.split(";")[1]); 158 }else if(lineobjjson.lineobj[p].endpos==2){ 159 drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(";")[0],lineobjjson.lineobj[p].startcsys.split(";")[1],movetopcenterdot.split(";")[0],movetopcenterdot.split(";")[1]); 160 }else if(lineobjjson.lineobj[p].endpos==3){ 161 drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(";")[0],lineobjjson.lineobj[p].startcsys.split(";")[1],movebottomcenterdot.split(";")[0],movebottomcenterdot.split(";")[1]); 162 } 163 } 164 } 165 166 $("#"+$(this.move_target).attr("id")+" #showhidden").css("position","fixed"); 167 $("#"+$(this.move_target).attr("id")+" #showhidden").css("top",parseInt($("#"+moveid)[0].offsetTop)+parseInt($("#"+moveid)[0].offsetHeight/2)-4+"px"); 168 $("#"+$(this.move_target).attr("id")+" #showhidden").css("left",parseInt($("#"+moveid)[0].offsetLeft)+parseInt($("#"+moveid)[0].offsetWidth/2)-4+"px"); 169 $("#"+$(this.move_target).attr("id")+" #showhidden #circle-center").css("position","fixed"); 170 $("#"+$(this.move_target).attr("id")+" #showhidden #circle-center").css("top",parseInt($("#"+moveid)[0].offsetTop)+parseInt($("#"+moveid)[0].offsetHeight/2)-4+"px"); 171 $("#"+$(this.move_target).attr("id")+" #showhidden #circle-center").css("left",parseInt($("#"+moveid)[0].offsetLeft)+parseInt($("#"+moveid)[0].offsetWidth/2)-4+"px"); 172 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 173 if(shapeobjjson.shapeobj[p].id==moveid){ 174 //左方块 175 $("#"+$(this.move_target).attr("id")+" #leftpoint").css("position","fixed"); 176 $("#"+$(this.move_target).attr("id")+" #leftpoint").css("top",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[1]-2)+"px"); 177 $("#"+$(this.move_target).attr("id")+" #leftpoint").css("left",(shapeobjjson.shapeobj[p].leftcenterdot.split(";")[0]-2)+"px"); 178 //右方块 179 $("#"+$(this.move_target).attr("id")+" #rightpoint").css("position","fixed"); 180 $("#"+$(this.move_target).attr("id")+" #rightpoint").css("top",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[1]-2)+"px"); 181 $("#"+$(this.move_target).attr("id")+" #rightpoint").css("left",(shapeobjjson.shapeobj[p].rightcenterdot.split(";")[0]-2)+"px"); 182 //上方块 183 $("#"+$(this.move_target).attr("id")+" #toppoint").css("position","fixed"); 184 $("#"+$(this.move_target).attr("id")+" #toppoint").css("top",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[1]-2)+"px"); 185 $("#"+$(this.move_target).attr("id")+" #toppoint").css("left",(shapeobjjson.shapeobj[p].topcenterdot.split(";")[0]-2)+"px"); 186 //下方块 187 $("#"+$(this.move_target).attr("id")+" #bottompoint").css("position","fixed"); 188 $("#"+$(this.move_target).attr("id")+" #bottompoint").css("top",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[1]-2)+"px"); 189 $("#"+$(this.move_target).attr("id")+" #bottompoint").css("left",(shapeobjjson.shapeobj[p].bottomcenterdot.split(";")[0]-2)+"px"); 190 } 191 } 192 var callback = document.call_up || function(){}; 193 callback.call(this, e); 194 $.extend(this, { 195 'move': false, 196 'move_target': null, 197 'call_down': false, 198 'call_up': false 199 }); 200 } 201 }); 202 }); 203 function moveshape(id){ 204 var function2done=false; 205 $("#"+id).on('mousedown', '#showhidden', function(e) { 206 function2done=true; 207 startdotid=id; 208 }); 209 $("#"+id+" #showhidden").mouseup(function(e) { 210 enddotid=id; 211 var ishave=""; 212 if(startdotid!=""&&startdotid!=enddotid){ 213 b:for(var a=0;a<lineobjjson.lineobj.length;a++){ 214 if(startdotid==lineobjjson.lineobj[a].startid||enddotid==lineobjjson.lineobj[a].endid){ 215 ishave="该对象不能出现分支!"; 216 break b; 217 } 218 } 219 if(enddotid=="begin-circle"){ 220 ishave="开始对象只能为流程起点！"; 221 } 222 if(startdotid.indexOf("end-circle")>-1){ 223 ishave="结束对象只能为流程終点！"; 224 } 225 if(ishave==""){ 226 //创建画线的标签 227 $(".right-area").html($(".right-area").html()+'<canvas id="flow'+chartj+'" οnclick="_click(\'flow'+chartj+'\')"></canvas>'); 228 var startdot=new Array(4); 229 var enddot=new Array(4); 230 for(var p=0;p<shapeobjjson.shapeobj.length;p++){ 231 //获取线起始点的左中点，右中点，上中点和下中点的坐标 232 if(shapeobjjson.shapeobj[p].id==startdotid){ 233 startdot[0]=shapeobjjson.shapeobj[p].leftcenterdot; 234 startdot[1]=shapeobjjson.shapeobj[p].rightcenterdot; 235 startdot[2]=shapeobjjson.shapeobj[p].topcenterdot; 236 startdot[3]=shapeobjjson.shapeobj[p].bottomcenterdot; 237 } 238 //获取线終点的左中点，右中点，上中点和下中点的坐标 239 if(shapeobjjson.shapeobj[p].id==enddotid){ 240 enddot[0]=shapeobjjson.shapeobj[p].leftcenterdot; 241 enddot[1]=shapeobjjson.shapeobj[p].rightcenterdot; 242 enddot[2]=shapeobjjson.shapeobj[p].topcenterdot; 243 enddot[3]=shapeobjjson.shapeobj[p].bottomcenterdot; 244 } 245 } 246 //连接起始点和终点连线最短的线 247 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)); 248 //start和end的值0,1,2,3代表是该对象左中点，右中点，上中点还是下中点 249 var start=0; 250 var end=0; 251 //获取线最短的两个点的位置 252 for(var x=0;x<startdot.length;x++){ 253 for(var y=0;y<enddot.length;y++){ 254 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){ 255 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)); 256 start=x; 257 end=y; 258 } 259 } 260 } 261 console.log("开始输出"); 262 console.log("全局变量："+chartj); 263 //将该线的相关信息存储到json数据中，方便当对象移动时重新移动线的长度和位置 264 lineobjjson.lineobj.push({ 265 lineid:"flow"+parseInt(chartj), 266 startid:startdotid, 267 startpos:start, 268 startcsys:startdot[start], 269 endid:enddotid, 270 endpos:end, 271 endcsys:enddot[end], 272 }); 273 console.log("lineobjjson:"+JSON.stringify(lineobjjson)); 274 for(var p=0;p<lineobjjson.lineobj.length;p++){ 275 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]); 276 } 277 startdotid=""; 278 enddotid=""; 279 chartj++; 280 showcenterobj('begin-circle'); 281 moveshape('begin-circle'); 282 for(var x=1;x<=charti;x++){ 283 moveshape('tableform'+x); 284 showcenterobj('tableform'+x); 285 } 286 for(var x=1;x<=chartm;x++){ 287 moveshape('approval-circle'+x); 288 showcenterobj('approval-circle'+x); 289 } 290 for(var x=1;x<=chartn;x++){ 291 moveshape('end-circle'+x); 292 showcenterobj('end-circle'+x); 293 } 294 }else{ 295 alert(ishave); 296 } 297 }else{ 298 startdotid=""; 299 enddotid=""; 300 } 301 }); 302 var $box=$("#"+id).mousedown(function(e) { 303 if(!function2done){ 304 var offset = $(this).offset(); 305 this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top}; 306 $.extend(document, {'move': true, 'move_target': this}); 307 } 308 function2done=false; 309 }); 310 } 311 /*.on('mousedown', '#coor', function(e) { 312 var posix = { 313 'w': $box.width(), 314 'h': $box.height(), 315 'x': e.pageX, 316 'y': e.pageY 317 }; 318 $.extend(document, {'move': true, 'call_down': function(e) { 319 $box.css({ 320 'width': Math.max(30, e.pageX - posix.x + posix.w), 321 'height': Math.max(30, e.pageY - posix.y + posix.h) 322 }); 323 }}); 324 return false; 325 });*/ 326 //展示出对象中心点 327 function showcenterobj(obj){ 328 $("#"+obj+" #showhidden").mouseover(function(){ 329 $("#"+obj+" #showhidden #circle-center").css("display","block"); 330 }).mouseout(function(){ 331 $("#"+obj+" #showhidden #circle-center").css("display","none"); 332 }); 333 } 334 335 //流向线 336 function drawarrow(canId,ox,oy,x1,y1,x2,y2){ 337 console.log(canId); 338 //定义canvas的大小和位置 339 $("#"+canId).css("position","fixed"); 340 $("#"+canId).css("top",(parseFloat(y1)>parseFloat(y2)?y2:y1)-5+"px"); 341 $("#"+canId).css("left",(parseFloat(x1)>parseFloat(x2)?x2:x1)-5+"px"); 342 //参数说明 canvas的 id ，原点坐标 第一个端点的坐标，第二个端点的坐标 343 x1=x1-parseFloat($("#"+canId).css("left").replace("px","")); 344 y1=y1-parseFloat($("#"+canId).css("top").replace("px","")); 345 x2=x2-parseFloat($("#"+canId).css("left").replace("px","")); 346 y2=y2-parseFloat($("#"+canId).css("top").replace("px","")); 347 console.log(x1+";"+y1+";"+x2+";"+y2); 348 var sta = new Array(x1,y1); 349 var end = new Array(x2,y2); 350 351 var canvas = document.getElementById(canId); 352 canvas.width=Math.abs(x1-x2)+10; 353 canvas.height=Math.abs(y1-y2)+10; 354 if(canvas == null)return false; 355 var ctx = canvas.getContext('2d'); 356 ctx.clearRect((parseFloat(y1)>parseFloat(y2)?y2:y1)-5, (parseFloat(x1)>parseFloat(x2)?x2:x1)-5, canvas.width, canvas.height); 357 //画线 358 ctx.beginPath(); 359 //ctx.translate(,); 360 ctx.translate(ox,oy,0); //坐标源点 361 ctx.moveTo(sta[0],sta[1]); 362 ctx.lineTo(end[0],end[1]); 363 ctx.fill(); 364 ctx.stroke(); 365 ctx.save(); 366 //画箭头 367 ctx.translate(end[0],end[1]); 368 //我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号 369 var ang=(end[0]-sta[0])/(end[1]-sta[1]); 370 ang=Math.atan(ang); 371 if(end[1]-sta[1] >= 0){ 372 ctx.rotate(-ang); 373 }else{ 374 ctx.rotate(Math.PI-ang);//加个180度，反过来 375 } 376 ctx.lineTo(-5,-10); 377 ctx.lineTo(0,-5); 378 ctx.lineTo(5,-10); 379 ctx.lineTo(0,0); 380 ctx.fill(); //箭头是个封闭图形 381 ctx.restore(); //恢复到堆的上一个状态，其实这里没什么用。 382 ctx.closePath(); 383 }
扫一扫
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
