VML模拟Rose画流程图代码

图形由json格式加载，可以灵活配置。

下一步是完善用户的操作，做这个感觉还是蛮有意思的。呵呵。

截图：

部分源码：

<script type="text/javascript">
gSoft.$("tt").value = "";
var selectCategory = 0;
gSoft.$("firstNode").onclick
= gSoft.$("endNode").onclick
= gSoft.$("status").onclick
= gSoft.$("route").onclick
= gSoft.$("control").onclick
//= gSoft.$("polyLine").onclick
= function(){
 selectCategory = parseInt(this.category);
}
gSoft.$("sharpArea").onmousedown = function(){
 event.cancelBubble = true;
 if(selectCategory<=0) return;
 //this.setCapture();
 var getSharp = function(){
  var sharp = null;
  switch(selectCategory){
   case 1:
    //sharp= demo[3];
    //sharp.index = 3;
    break;
   case 2:
    
    break;
   case 3:
    sharp= new gSoft.flow.roundRect({left:event.x,top:event.y,name:""});
    break;
   case 4:
    //sharp= demo[0];
    //sharp.index = 0;
    sharp= new gSoft.flow.line({from:{x:event.x,y:event.y},to:{x:event.x+100,y:event.y+100}});
    //sharp.move([{x:event.x,y:event.y},{x:event.x,y:event.y}])
    break;
   case 5:
    break;
   case 6:
    //sharp= demo[1];
    //sharp.index = 1;
    break;
   default:
    break;
  }
  return sharp;
 }
 var sharp = getSharp();
 if(sharp){
  //gSoft.$("tt").value = sharp;
  sharp.draw();
 }
 /*if(sharp){
  if(sharp.index==0||sharp.index==1){
   sharp.move([{x:event.x,y:event.y},{x:event.x,y:event.y}])
  } else if(sharp.index==2||sharp.index==3){
   sharp.move({left:event.x,top:event.y});
  }
  gSoft.$("tt").innerHTML = [event.x,event.y].join(",");
 }
 //移动
 this.onmousemove = function(){
  var sharp = sharp || getSharp();
  if(sharp.index==0){
   sharp.setTo({x:event.x,y:event.y});
  } else if(sharp.index==1){
   sharp.move([{x:sharp.points[0].x,y:sharp.points[0].y},{x:event.x,y:event.y}])
  } else if(sharp.index==2||sharp.index==3){
  //gSoft.$("tt").value =event.x+":"+event.y+","+sharp.left+":"+sharp.top;
   var width = Math.abs(event.x - sharp.left);
   var height = Math.abs(event.y - sharp.top);
   sharp.setSize({width:width,height:height});//alert(sharp.outerHTML)
  }
 };
  //松开
 this.onmouseup =  function(){
  this.releaseCapture();
  this.onmousemove = null;
  if(sharp){
   var cloneSharp = sharp.clone();
   //gSoft.$("tt").value =cloneSharp;
   sharp.hidden();
  }
 };*/
 
}

var data =[
 {
  id:1,
  type:1,
  name:"节点1",
  left:20,
  top:20
 },
 {
  id:2,
  type:1, 
  name:"节点2",
  left:50,
  top:180
 },
 {
  id:3,
  type:1, 
  name:"节点3",
  left:100,
  top:300
 },
 {
  id:4,
  type:2,
  name:"路由1",
  from:1,
  to:2
 },
 {
  id:5,
  type:2,
  name:"路由2",
  from:2,
  to:3
 },
 {
  id:6,
  type:3,
  name:"控制1",
  route:4
 },
 {
  id:7,
  type:3,
  name:"控制2",
  route:5
 },
 {
  id:8,
  type:1,
  name:"节点4",
  left:50,
  top:420
 },
 {
  id:9,
  type:2,
  name:"路由3",
  from:3,
  to:8
 }/*,
 {
  id:11,
  type:1,
  name:"节点5",
  left:200,
  top:20
 },
 {
  id:10,
  type:2,
  name:"路由4",
  from:1,
  to:11
 }*/
];
var flow = new gSoft.flow(data);
flow.draw();
</script>

完整VML流程图源码下载地址：VML-Rose流程图.rar （6.20 KB）