设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 8616|回复: 6

VML WorkFlow

[复制链接]
发表于 2004-6-19 02:37:20 | 显示全部楼层 |阅读模式


  1. <html xmlns:v="urn:schemas-microsoft-com:vml">
  2. <head>
  3. <TITLE>Sailflying WorkFlow 1.0</TITLE>
  4. <STYLE>
  5. v\:* { Behavior: url(#default#VML) }
  6. </STYLE>
  7. <style type="text/css">
  8. <!--
  9. div {
  10.         background-image: url('workflow2.gif');
  11.         margin-left: 0px;
  12.         margin-top: 0px;
  13.         margin-right: 0px;
  14.         margin-bottom: 0px;
  15. }
  16. .drag{cursor:move}
  17. .hand{cursor:hand}
  18. }
  19. -->
  20. </style>
  21. <script>
  22. var flagMove = flagAddLine = oLineStart = oLineEnd = null;
  23. var AddX = 150, AddY = 120;

  24. function window.onload()
  25. {
  26.         ChangeImgColor(7)

  27. }

  28. function ChangeImgColor(iNo)
  29. {       
  30.         if((iNo>7)||(iNo<1)){return}
  31.         for(i=1;i<8;i++)
  32.         {
  33.                 eval('img'+i+'.style.borderColor="white"') ;
  34.         }
  35.         eval('img'+iNo+'.style.borderColor="red"') ;
  36. }

  37. function AddFlow(iNo){

  38.                 ChangeImgColor(7)
  39.                 switch (iNo)
  40.                 {
  41.                        
  42.                         case 1 : //<!-- 流程节点: 开始 -->
  43.                                        
  44.                                         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>')
  45.                                         break;
  46.                         case 2 : //<!-- 流程节点: 过程 -->
  47.                                         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>')
  48.                                         break;

  49.                         case 3 : //<!-- 流程节点: 决策 -->
  50.                                         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>')
  51.                                


  52.                                         break;
  53.                         case 4 : //<!-- 流程节点: 结束 -->
  54.                                         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>')
  55.                                         break;
  56.                         case 5: //<!-- 流程节点: 转移 -->

  57.                                         break;
  58.                         case 6 : //<!-- 流程节点: 折线 -->
  59.                                         ChangeImgColor(6)
  60.                                         AddLine()
  61.                                         break;
  62.                        
  63.                         case 7 : //移动
  64.                                         break;
  65.                                        
  66.                                        
  67.                         default :
  68.          
  69.                                 return false;
  70.                 }


  71.         AddX += 30;
  72.         AddY += 30;
  73.         if(AddX >= 350){
  74.                 AddX = 150;
  75.                 AddY = 120;
  76.         }
  77. }

  78. function FindObj(){
  79.         if (!document.all)        {return        }
  80.         if (event.srcElement.genre!="node" ){return        }
  81.         if(event.button == 1 && flagAddLine == null){
  82.                 if(oLineStart != null){
  83.                         //oLineStart.border = 0;
  84.                         oLineStart.StrokeColor='yellow'
  85.                         zuobiao.innerHTML += oLineStart.uniqueID
  86.                 }
  87.                 if(oLineEnd != null){
  88.                         //oLineEnd.border = 0;
  89.                         oLineEnd.StrokeColor='yellow'
  90.                         zuobiao.innerHTML +=  oLineEnd.uniqueID
  91.                 }
  92.                 flagMove = event.srcElement;
  93.                 flagMove.setCapture();
  94.                 x = event.offsetX;
  95.                 y = event.offsetY;
  96.         }
  97.         if(flagAddLine == 1){
  98.                 oLineStart = event.srcElement;

  99.                 ////oLineStart.border = 1;
  100.                 oLineStart.StrokeColor='red'
  101.                 //////////////oLineStart.style.borderColor = "red";
  102.                 flagAddLine = 2;
  103.                 return;
  104.         }
  105.         if(flagAddLine == 2)
  106.         {
  107.                 if(oLineStart != event.srcElement)
  108.                 {
  109.                         oLineEnd = event.srcElement;
  110.                         //oLineEnd.border = 1;
  111.                         //oLineEnd.style.borderColor = "red";
  112.                         oLineEnd.StrokeColor='red'
  113.                          
  114.                         if(!document.all[oLineStart.uniqueID + "and" + oLineEnd.uniqueID])
  115.                         {
  116.                                 zuobiao.innerHTML +=  oLineStart.uniqueID + "and" + oLineEnd.uniqueID  
  117.                                 // 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>");




  118. //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>');

  119. //<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>
  120.                                 LineMove(oLineStart,oLineEnd,'',1)

  121.                                  oLineStart.line += (oLineStart.uniqueID + "and" + oLineEnd.uniqueID + ";");
  122.                                 oLineEnd.line += (oLineStart.uniqueID + "and" + oLineEnd.uniqueID + ";");

  123. //<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>

  124.                         }
  125.                 }
  126.                 else{
  127.                         ////oLineStart.border = 0;
  128.                         oLineStart.StrokeColor='#95DB4F'
  129.                 }
  130.                 flagAddLine = null;
  131.                 ChangeImgColor(7);
  132.         }
  133. }
  134. function MoveObj(){
  135.         if(flagMove != null){
  136.                 flagMove.style.left = event.clientX - WorkFlow.offsetLeft - document.body.clientLeft - WorkFlow.clientLeft - x;
  137.                 flagMove.style.top = event.clientY - WorkFlow.offsetTop - document.body.clientTop - WorkFlow.clientTop - y;
  138.                 if(flagMove.style.pixelLeft < 0)flagMove.style.left = 0;
  139.                 if(flagMove.style.pixelTop < 0)flagMove.style.top = 0;
  140.                 /*if(flagMove.style.pixelLeft > (WorkFlow.clientWidth - flagMove.offsetWidth)){
  141.                         flagMove.style.left = (WorkFlow.clientWidth - flagMove.offsetWidth);
  142.                 }
  143.                 if(flagMove.style.pixelTop > (WorkFlow.offsetHeight - flagMove.offsetHeight)){
  144.                         flagMove.style.top = (WorkFlow.clientHeight - flagMove.offsetHeight);
  145.                 }*/
  146.                 //move lines
  147.                 aLines = flagMove.line.split(";");
  148.                 for( var i = 0; i < aLines.length - 1; i ++ ){
  149.                         var oLineStart = eval(aLines[i].split("and")[0]);
  150.                         var oLineEnd = eval(aLines[i].split("and")[1]);
  151.                         /*
  152.                         eval(aLines[i] + ".from='" + ( parseInt(oLineStart.style.pixelLeft) +  parseInt(oLineStart.style.width)) + " ," + ( parseInt(oLineStart.style.pixelTop) +  parseInt(oLineStart.style.height)/2) + " '");
  153.                         eval(aLines[i] + ".to='" +  parseInt(oLineEnd.style.pixelLeft) + " ," + ( parseInt(oLineEnd.style.pixelTop) +  parseInt(oLineEnd.style.height)/2) + " '");
  154.                         */
  155.                        
  156.                         LineMove(oLineStart,oLineEnd,aLines[i],2)


  157.          


  158.                         //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>');
  159.                 }
  160.         }
  161. }


  162. function LineMove(oLineStart,oLineEnd,aLines,TypeNo)
  163. {

  164.                         from1        =        parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)/2  
  165.                         from2        =        parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2
  166.                         to1                =        parseInt(oLineEnd.style.pixelLeft)  + parseInt(oLineEnd.style.width)/2
  167.                         to2                =        parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2
  168.                         if ( from1>to1)
  169.                         {
  170.                                
  171.                                 to1                =        parseInt(oLineEnd.style.pixelLeft)  + parseInt(oLineEnd.style.width)
  172.                                 to2                =        parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2
  173.                                 spacing = 50

  174.                         }
  175.                         else if ( from1==to1)
  176.                         {
  177.                                         to1                =        from1
  178.                                         spacing = 0
  179.                                         if ( from2>to2)
  180.                                         {
  181.                                                 to2                =        parseInt(oLineEnd.style.pixelTop)  + parseInt(oLineEnd.style.height)
  182.                                         }
  183.                                         else
  184.                                         {       
  185.                                                 to2                =        parseInt(oLineEnd.style.pixelTop)
  186.                                         }
  187.                         }
  188.                         else  
  189.                         {
  190.                                 to1                =        parseInt(oLineEnd.style.pixelLeft)
  191.                                 to2                =        parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2
  192.                                 spacing = -50
  193.                                 
  194.                         }

  195.                         if (TypeNo==1)
  196.                         {
  197.                                 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>');
  198.                         }

  199.                         if (TypeNo==2)
  200.                         {
  201.                                 eval(aLines + '.Points.value="'+from1+','+from2+' '+(to1+spacing)+','+from2+' '+(to1+spacing)+','+to2+' '+to1+','+to2+'"')
  202.                         }
  203.                

  204. }

  205. function ReleaseObj(){
  206.         if(flagMove != null){
  207.                 flagMove.releaseCapture();
  208.                 flagMove = null;
  209.                 ChangeImgColor(7);
  210.         }
  211. }

  212. function AddLine(){
  213.         flagAddLine = 1;
  214. }

  215. function mousedown(){

  216.                 if(event.srcElement.genre!="node" ){
  217.                         flagAddLine = null;
  218.                         if(oLineStart != null){
  219.                                 ////oLineStart.border = 0;
  220.                                 oLineStart.StrokeColor='#95DB4F'
  221.                         }
  222.                         if(oLineEnd != null){
  223.                                 //oLineEnd.border = 0;
  224.                                 oLineEnd.StrokeColor='#95DB4F'
  225.                         }
  226.                 }

  227. }

  228. document.onmousedown = mousedown;
  229. </script>
  230. </head>
  231. <body   text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="return false;"  bgcolor="#DFEFFF"   >

  232. <br/><br/>
  233. <table  border="0" cellpadding="0" cellspacing="0"  >
  234.   <tr>
  235.         <td width="80px">&nbsp;</td>
  236.         <td width="100px"><img src="flow7.gif" alt="移动"  border=1 id="img7" onclick=";AddFlow(7);" ondragstart="return false" class="hand"></td>
  237.         <td width="100px" style="display:none"><img src="flow1.gif"  alt="开始" border=1 id="img1" onclick="AddFlow(1)" ondragstart="return false" class="hand"></td>
  238.         <td width="100px"><img src="flow2.gif" alt="过程" border=1 id="img2" onclick="AddFlow(2)" ondragstart="return false" class="hand"></td>
  239.         <td width="100px"><img src="flow3.gif" alt="决策"border=1 id="img3" onclick="AddFlow(3)" ondragstart="return false" class="hand"></td>
  240.         <td width="100px"><img src="flow4.gif" alt="结束" border=1 id="img4" onclick="AddFlow(4)" ondragstart="return false" class="hand"></td>
  241.         <td width="100px"><img src="flow5.gif" alt="子流程" border=1 id="img5"  onclick="AddFlow(5)" ondragstart="return false" class="hand"></td>
  242.         <td width="100px"><img src="flow6.gif" alt="连线" border=1 id="img6"  onclick="AddFlow(6)" ondragstart="return false" class="hand"></td>
  243.   </tr>
  244. </table>
  245. <br/>
  246. <div id=WorkFlow style="position:relative ; width:100% ; height:500 ; overflow:hidden ; border:2 inset #fff9f3 ;  overflow: auto;">

  247.         <!-- 流程节点: 开始 -->
  248.         <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>

  249.        
  250.         <!-- 流程节点: 过程 -->
  251.          <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 ;">
  252.           <v:TextBox inset="10pt,5pt,1pt,1pt" style="font-size:12pt;"  class="hand">点击此处<br/>填写过程</v:TextBox></v:RoundRect>




  253. </div>
  254. <table width="100%" border="0" cellpadding="0" cellspacing="5" bgcolor="#99CC00">
  255.   <tr>
  256.     <td id="zuobiao" style="display:none"> </td>
  257.   </tr>
  258. </table>
  259. </body>
  260. </html>





复制代码


最近对VML的了解又增加了一些,
所以把 经典论坛里的 ncs 的帖子 “vml 在 ie5.0 下不兼容的问题”
里的功能又学习了一遍
发表于 2004-6-19 12:29:13 | 显示全部楼层
不错不错
发表于 2004-6-19 13:34:01 | 显示全部楼层
很不错应用
 楼主| 发表于 2004-6-21 13:55:48 | 显示全部楼层
因为我发现不靠齐的时候,连线都要转折
所以下一步要作的功能:

1。对象根据网格自动靠齐
2。自由设置网格参数
3。拖动对象时判断坐标上是否已经存在对象
 楼主| 发表于 2004-6-22 10:09:13 | 显示全部楼层
网格参数的设置功能也完成了。
直剩下判断坐标点上是否存在对象这个功能了。
思路大致就想上面提到的那样,
用一个字符串来记录各个对象的坐标了。

功能效果:


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


前台完成的差不多了
这个功能完成了就开始写xml的操作了
发表于 2004-9-9 15:28:51 | 显示全部楼层
我的浏览器是ie6.0..  
http://www.gaofan.com/gf_temp/workflow_20040621.htm  上面有个连线的功能不能实现
发表于 2010-2-9 13:39:06 | 显示全部楼层
要是能把源码发出来学习一下就更好了
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-11-20 01:39 , Processed in 0.098272 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表