当前位置：首页 → 问答吧 → VML WorkFlow

VML WorkFlow

时间：2004-06-19

来源：互联网

<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <TITLE>Sailflying WorkFlow 1.0</TITLE> <STYLE> v\:* { Behavior: url(#default#VML) } </STYLE> <style type="text/css">  </style> <script> var flagMove = flagAddLine = oLineStart = oLineEnd = null; var AddX = 150, AddY = 120; function window.onload() { ChangeImgColor(7) } function ChangeImgColor(iNo) { if((iNo>7)||(iNo<1)){return} for(i=1;i<8;i++) { eval('img'+i+'.style.borderColor="white"') ; } eval('img'+iNo+'.style.borderColor="red"') ; } function AddFlow(iNo){ ChangeImgColor(7) switch (iNo) { case 1 : // WorkFlow.insertAdjacentHTML('beforeEnd','<v:oval class="drag" style="position:absolute;left:10;top:10;width:50;height:40" genre="node" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="1pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">开始</v:TextBox></v:oval>') break; case 2 : // WorkFlow.insertAdjacentHTML('beforeEnd','<v:RoundRect style="position:absolute;width:100;height:50px;" class="drag" genre="node" title="过程\n[x,y]" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;" ><v:TextBox inset="10pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">点击此处<br/>填写过程</v:TextBox></v:RoundRect>') break; case 3 : // WorkFlow.insertAdjacentHTML('beforeEnd','<v:PolyLine Points="0,30 50,60 100,30 50,0 0,30" style="position:absolute;width:100;height:50px;" class="drag" genre="node" title="决策\n[x,y]" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;" ><v:TextBox inset="15pt,15pt,1pt,1pt" style="font-size:12pt;" class="hand">填写决策</v:TextBox></v:PolyLine>') break; case 4 : // WorkFlow.insertAdjacentHTML('beforeEnd','<v:oval class="drag" style="position:absolute;left:10;top:10;width:50;height:40" genre="node" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="1pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">结束</v:TextBox></v:oval>') break; case 5: // break; case 6 : // ChangeImgColor(6) AddLine() break; case 7 : //移动 break; default : return false; } AddX += 30; AddY += 30; if(AddX >= 350){ AddX = 150; AddY = 120; } } function FindObj(){ if (!document.all) {return } if (event.srcElement.genre!="node" ){return } if(event.button == 1 && flagAddLine == null){ if(oLineStart != null){ //oLineStart.border = 0; oLineStart.StrokeColor='yellow' zuobiao.innerHTML += oLineStart.uniqueID } if(oLineEnd != null){ //oLineEnd.border = 0; oLineEnd.StrokeColor='yellow' zuobiao.innerHTML += oLineEnd.uniqueID } flagMove = event.srcElement; flagMove.setCapture(); x = event.offsetX; y = event.offsetY; } if(flagAddLine == 1){ oLineStart = event.srcElement; ////oLineStart.border = 1; oLineStart.StrokeColor='red' //////////////oLineStart.style.borderColor = "red"; flagAddLine = 2; return; } if(flagAddLine == 2) { if(oLineStart != event.srcElement) { oLineEnd = event.srcElement; //oLineEnd.border = 1; //oLineEnd.style.borderColor = "red"; oLineEnd.StrokeColor='red' if(!document.all[oLineStart.uniqueID + "and" + oLineEnd.uniqueID]) { zuobiao.innerHTML += oLineStart.uniqueID + "and" + oLineEnd.uniqueID // WorkFlow.insertAdjacentHTML("beforeEnd","<v:line class='drag' strokeweight='2pt' StrokeColor='#FF6600' id='" + oLineStart.uniqueID + "and" + oLineEnd.uniqueID + "' style='position:absolute;' from='" + (parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)) + "," + (parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2) + "' to='" + parseInt(oLineEnd.style.pixelLeft) + "," + (parseInt(oLineEnd.style.pixelTop) + parseInt(oLineEnd.style.height)/2) + "'><v:stroke StartArrow='Oval' EndArrow='Classic' /></v:line>"); //alert( '<v:PolyLine class="drag" strokeweight="2pt" StrokeColor="#FF6600" id="' + oLineStart.uniqueID + 'and' + oLineEnd.uniqueID + '" style="position:absolute;" Points= "'+from1+','+from2+' '+(to1+50)+','+from2+' '+(to1+50)+','+to2+' '+to1+','+to2+'" ><v:stroke StartArrow="Oval" EndArrow="Classic" /></v:PolyLine>'); //<v:PolyLine filled="false" Points="65,0 0,0 0,75 " style="position:absolute;left:300;top:300;width:50;height:50" ondblclick= "this.outerHTML="" ' strokeweight="2pt" StrokeColor="#FF6600" > <v:stroke StartArrow="Oval" EndArrow="Classic" /></v:PolyLine> LineMove(oLineStart,oLineEnd,'',1) oLineStart.line += (oLineStart.uniqueID + "and" + oLineEnd.uniqueID + ";"); oLineEnd.line += (oLineStart.uniqueID + "and" + oLineEnd.uniqueID + ";"); //<v:line style="position:absolute" from="400,200" to="400,275" class="drag" myClass="Line" strokeweight="2pt" StrokeColor="#FF6600" ><v:stroke StartArrow="Oval" EndArrow="Classic" /></v:line> } } else{ ////oLineStart.border = 0; oLineStart.StrokeColor='#95DB4F' } flagAddLine = null; ChangeImgColor(7); } } function MoveObj(){ if(flagMove != null){ flagMove.style.left = event.clientX - WorkFlow.offsetLeft - document.body.clientLeft - WorkFlow.clientLeft - x; flagMove.style.top = event.clientY - WorkFlow.offsetTop - document.body.clientTop - WorkFlow.clientTop - y; if(flagMove.style.pixelLeft < 0)flagMove.style.left = 0; if(flagMove.style.pixelTop < 0)flagMove.style.top = 0; /*if(flagMove.style.pixelLeft > (WorkFlow.clientWidth - flagMove.offsetWidth)){ flagMove.style.left = (WorkFlow.clientWidth - flagMove.offsetWidth); } if(flagMove.style.pixelTop > (WorkFlow.offsetHeight - flagMove.offsetHeight)){ flagMove.style.top = (WorkFlow.clientHeight - flagMove.offsetHeight); }*/ //move lines aLines = flagMove.line.split(";"); for( var i = 0; i < aLines.length - 1; i ++ ){ var oLineStart = eval(aLines[i].split("and")[0]); var oLineEnd = eval(aLines[i].split("and")[1]); /* eval(aLines[i] + ".from='" + ( parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)) + " ," + ( parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2) + " '"); eval(aLines[i] + ".to='" + parseInt(oLineEnd.style.pixelLeft) + " ," + ( parseInt(oLineEnd.style.pixelTop) + parseInt(oLineEnd.style.height)/2) + " '"); */ LineMove(oLineStart,oLineEnd,aLines[i],2) //WorkFlow.insertAdjacentHTML('beforeEnd','<v:PolyLine filled="false" style="position:absolute;width:50px;height:50px;" class="drag" strokeweight="2pt" StrokeColor="#FF6600" id="' + oLineStart.uniqueID + 'and' + oLineEnd.uniqueID + '" Points="'+from1+','+from2+' '+(to1+50)+','+from2+' '+(to1+50)+','+to2+' '+to1+','+to2+'"><v:stroke StartArrow="Oval" EndArrow="Classic" /></v:PolyLine>'); } } } function LineMove(oLineStart,oLineEnd,aLines,TypeNo) { from1 = parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)/2 from2 = parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2 to1 = parseInt(oLineEnd.style.pixelLeft) + parseInt(oLineEnd.style.width)/2 to2 = parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2 if ( from1>to1) { to1 = parseInt(oLineEnd.style.pixelLeft) + parseInt(oLineEnd.style.width) to2 = parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2 spacing = 50 } else if ( from1==to1) { to1 = from1 spacing = 0 if ( from2>to2) { to2 = parseInt(oLineEnd.style.pixelTop) + parseInt(oLineEnd.style.height) } else { to2 = parseInt(oLineEnd.style.pixelTop) } } else { to1 = parseInt(oLineEnd.style.pixelLeft) to2 = parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2 spacing = -50 } if (TypeNo==1) { WorkFlow.insertAdjacentHTML('beforeEnd','<v:PolyLine filled="false" style="position:absolute;width:50px;height:50px;z-index:-99" class="hand" strokeweight="2pt" StrokeColor="#FF6600" id="' + oLineStart.uniqueID + 'and' + oLineEnd.uniqueID + '" Points="'+from1+','+from2+' '+(to1+spacing)+','+from2+' '+(to1+spacing)+','+to2+' '+to1+','+to2+'"><v:stroke StartArrow="Diamond" EndArrow="Classic" /></v:PolyLine>'); } if (TypeNo==2) { eval(aLines + '.Points.value="'+from1+','+from2+' '+(to1+spacing)+','+from2+' '+(to1+spacing)+','+to2+' '+to1+','+to2+'"') } } function ReleaseObj(){ if(flagMove != null){ flagMove.releaseCapture(); flagMove = null; ChangeImgColor(7); } } function AddLine(){ flagAddLine = 1; } function mousedown(){ if(event.srcElement.genre!="node" ){ flagAddLine = null; if(oLineStart != null){ ////oLineStart.border = 0; oLineStart.StrokeColor='#95DB4F' } if(oLineEnd != null){ //oLineEnd.border = 0; oLineEnd.StrokeColor='#95DB4F' } } } document.onmousedown = mousedown; </script> </head> <body text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="return false;" bgcolor="#DFEFFF" > <br/><br/> <table border="0" cellpadding="0" cellspacing="0" > <tr> <td width="80px"> </td> <td width="100px"><img src="flow7.gif" alt="移动" border=1 id="img7" onclick=";AddFlow(7);" ondragstart="return false" class="hand"></td> <td width="100px" style="display:none"><img src="flow1.gif" alt="开始" border=1 id="img1" onclick="AddFlow(1)" ondragstart="return false" class="hand"></td> <td width="100px"><img src="flow2.gif" alt="过程" border=1 id="img2" onclick="AddFlow(2)" ondragstart="return false" class="hand"></td> <td width="100px"><img src="flow3.gif" alt="决策"border=1 id="img3" onclick="AddFlow(3)" ondragstart="return false" class="hand"></td> <td width="100px"><img src="flow4.gif" alt="结束" border=1 id="img4" onclick="AddFlow(4)" ondragstart="return false" class="hand"></td> <td width="100px"><img src="flow5.gif" alt="子流程" border=1 id="img5" onclick="AddFlow(5)" ondragstart="return false" class="hand"></td> <td width="100px"><img src="flow6.gif" alt="连线" border=1 id="img6" onclick="AddFlow(6)" ondragstart="return false" class="hand"></td> </tr> </table> <br/> <div id=WorkFlow style="position:relative ; width:100% ; height:500 ; overflow:hidden ; border:2 inset #fff9f3 ; overflow: auto;">  <v:oval style="position:absolute;left:300;top:10;width:50;height:40" genre="node" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" class="drag" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="1pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">开始</v:TextBox></v:oval>  <v:RoundRect style="position:absolute;left:280;top:100;width:100;height:50px;" class="drag" genre="node" title="过程\n[x,y]" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="10pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">点击此处<br/>填写过程</v:TextBox></v:RoundRect> </div> <table width="100%" border="0" cellpadding="0" cellspacing="5" bgcolor="#99CC00"> <tr> <td id="zuobiao" style="display:none"> </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

最近对VML的了解又增加了一些，
所以把经典论坛里的 ncs 的帖子 “vml 在 ie5.0 下不兼容的问题”
里的功能又学习了一遍

作者: 车仔发布时间: 2004-06-19

不错不错

作者: bencalie 发布时间: 2004-06-19

很不错应用

作者: zdzhuo 发布时间: 2004-06-19

因为我发现不靠齐的时候，连线都要转折
所以下一步要作的功能：

1。对象根据网格自动靠齐
2。自由设置网格参数
3。拖动对象时判断坐标上是否已经存在对象

作者: 车仔发布时间: 2004-06-21

网格参数的设置功能也完成了。
直剩下判断坐标点上是否存在对象这个功能了。
思路大致就想上面提到的那样，
用一个字符串来记录各个对象的坐标了。

功能效果：

http://www.gaofan.com/gf_temp/workflow_20040621.htm

前台完成的差不多了
这个功能完成了就开始写xml的操作了

作者: 车仔发布时间: 2004-06-22

我的浏览器是ie6.0..
http://www.gaofan.com/gf_temp/workflow_20040621.htm 上面有个连线的功能不能实现

作者: priam 发布时间: 2004-09-09

要是能把源码发出来学习一下就更好了

作者: hk8082 发布时间: 2010-02-09