请教大家几个画流程图的js库。

wangcfxbg 2010-07-26 10:50:37
最近需要用纯js做一些流程图,想问问有没有好点的js库?
以前我自己做过一个静态的流程图 ,但是画箭头和画斜线时会非常恶心 每个点画一个div
一般这种功能用js实现好不好?除了js库一般用什么来实现在页面上画出流程图???
...全文
2442 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
wangcfxbg 2010-07-27
  • 打赏
  • 举报
回复
好吧 感谢各种答案 我自己也找了几个 希望能和大家分享一下。
raphaeljs
mxgraph
excanvas
springgraph

用flex和svg做都不错。
xiayuqijava 2010-07-26
  • 打赏
  • 举报
回复
JS画流程图,有点难度,期待高手出现!另外给你介绍一个画流程图的flash插件:SpringGraph,研究下就懂了
janeyen 2010-07-26
  • 打赏
  • 举报
回复
好!!!
牛叔 2010-07-26
  • 打赏
  • 举报
回复
vml
楼主可以研究一下这个东西
小霍夫 2010-07-26
  • 打赏
  • 举报
回复
代码实在太多。贴不完...
小霍夫 2010-07-26
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>工作流定义</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script language="javascript">
<!--
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}

String.prototype.toXml = function()
{
var xml = this.replace(/&/g, "&");
xml = xml.replace(/>/g, ">");
xml = xml.replace(/</g, "<");
xml = xml.replace(/"/g, """);

return xml;
}

document.onkeypress = function()
{
if(event.keyCode==13 && window.event.srcElement.tagName != "TEXTAREA")
{
event.keyCode=0;
event.cancelBubble = true
event.returnValue = false;
return false;
}
}

function document::onkeyDown()
{
var obj = window.event.srcElement

if(event.keyCode != 8) return true;
if(obj.tagName == "INPUT" || obj.tagName == "TEXTAREA")
{
if(obj.readOnly)
{
return false;
}
else
{
return true;
}
}

return false;
}

function showPermitWindow(value)
{
return window.showModalDialog("/sysplat/selector/groupselector1.jsp", value, "dialogWidth:560px;dialogHeight:520px;help: no;scroll:no; status:no")
}

function selectRoleId()
{
var txt = window.event.srcElement;
var strArr = null;
var strCompositeValue
var _value = showPermitWindow(txt.value);
var hids = "";
var pos = -1;

if(_value != null)
{
var arr = _value.split("\r\n");
for(var i=0; i<arr.length; i++)
{
pos = arr[i].indexOf("/");
if(hids != "") hids = hids + ",";
hids = hids + arr[i].substring(pos+1);
}
txt.value = hids;
document.getElementById("btnApply").disabled = 0;
}
}

function Group()
{
this.id=null;
this.name=null;
this.count=0;
this.taskCount = 0;
this.nodes=[];
this.lines=[];
this.selectedObj=[];
this.selectedLineFrom=[];
this.selectedLineTo=[];
this.mouseX= -1;
this.mouseY= -1;
this.mouseEndX= -1;
this.mouseEndY= -1;
this.action=null;
this.lineFlag=null;
this.multiSelect=false;
this.ctrlKey=false;
this.nodeMirror=null;
this.lineMirror=null;
this.bottomHeight=10;
this.rightWidth=10;
this.nodeType = {"start":"开始节点","end":"结束节点","node":"普通节点","task":"任务节点","cal":"条件节点"};
this.init=function()
{
var obj=document.getElementById('group');
obj.setAttribute('bindClass',this);
obj.onmousedown=GroupEvent.mouseDown;
obj.onmousemove=GroupEvent.mouseMove;
obj.onmouseup=GroupEvent.mouseUp;
obj.onkeydown=GroupEvent.keyDown;
obj.onkeyup=GroupEvent.keyUp;
obj.ondblclick=function(){var win=document.getElementById('propWin');win.style.display="";var x=event.x;var y=event.y;win.style.left=x;win.style.top=y-10}
this.lineMirror=new Line();
this.lineMirror.textFlag=false;
this.lineMirror.mirrorFlag=true;
this.lineMirror.init();
this.lineMirror.setDisplay('none');
this.lineMirror.strokeObj.dashStyle='dashdot';
this.lineMirror.obj.strokecolor='#000000';
this.nodeMirror=new Node();
this.nodeMirror.strokeFlag=true;
this.nodeMirror.shadowFlag=false;
this.nodeMirror.textFlag=false;
this.nodeMirror.mirrorFlag=true;
this.nodeMirror.init();
this.nodeMirror.setDisplay('none');
this.nodeMirror.obj.strokecolor='black';
this.nodeMirror.obj.style.zIndex='100';
this.nodeMirror.obj.filled=false;
this.nodeMirror.strokeObj.dashstyle='dot';
};
this.isExistStartNode=function()
{
var l = this.nodes.length;
for(var i=0;i<l;i++)
{
if(this.nodes[i].type=='start') return true;
}
return false;
}
this.getObjectNum=function()
{
this.count++;
return this.count;
};
this.point=function(flag)
{
if(flag=='down')
{
this.mouseX=GroupEvent.getMouseX();
this.mouseY=GroupEvent.getMouseY();
}
else if(flag=='up')
{
this.mouseEndX=GroupEvent.getMouseX();
this.mouseEndY=GroupEvent.getMouseY();
}
};
this.getEventNode=function(flag)
{
var res=null;
var nodeNum=this.nodes.length;
var node=null;
var x;
var y;
if(flag=='down')
{
x=this.mouseX;
y=this.mouseY;
}
else if(flag=='up')
{
x=this.mouseEndX;
y=this.mouseEndY;
}
for(var i=(nodeNum-1);i>=0;i--)
{
node=this.nodes[i];
if(node.pointInObj(x,y))
{
res=node;break;
}
}
return res;
};
this.getEventLine=function()
{
var res=null;
var lineNum=this.lines.length;
var line=null;
var x=this.mouseX;
var y=this.mouseY;
var isStroke= -1;
for(var i=(lineNum-1);i>=0;i--)
{
line=this.lines[i];
if(line.pointInObj(x,y))
{
if(res==null||line.obj.style.zIndex=='22')
{
res=null;
res=GroupEvent.insertObjInArr(res,line);
isStroke=line.pointInStroke(x,y);
if(isStroke==0)
{
this.selectedLineTo=[];
this.selectedLineFrom=[];
this.selectedLineTo=GroupEvent.insertObjInArr(this.selectedLineTo,line);
}
else if(isStroke==1)
{
this.selectedLineTo=[];
this.selectedLineFrom=[];
this.selectedLineFrom=GroupEvent.insertObjInArr(this.selectedLineFrom,line);
}
}
}
}
return res;
};
小霍夫 2010-07-26
  • 打赏
  • 举报
回复
要真有的话就好了。。
  • 打赏
  • 举报
回复
JS 画流程图
kala197 2010-07-26
  • 打赏
  • 举报
回复
我们原来做的是用FLEX 做了个jbpm 当设计完成后自动生成流程图

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧