在网络上看了不少WEB的workflow设计器,发现都是用VML、SVG或者Flash做的,唯独没有用纯JavaScript实现,主要的问题都是在画线上。
参考了网络上很多JavaScript画线的例子,发现他们都是采用许多div来构成点,从而连成线。这样不仅效率低而且也难实现和控制。
我想出了一个办法,也是用DIV来画线,不过我利用的是DIV的边框。
为了省事,拖拽、改变大小的功能用了jQuery
缺陷:不能方便的画箭头,方法是有,不过我觉得算法太繁琐。
优点:不用基于其他技术,API简单,学习成本低。。
//例子
var flow = new Flow("flow_panel");
var nodeA = new Node("节点A",flow,0,0,100,100)
.connect(new Node("节点B-1",flow,200,200,100,100))
.connect(new Node("节点B-2",flow,400,400,100,100));
HOHO,让我忙乎了几天呢
[img]http://www.iteye.com/upload/attachment/74255/006debd5-36d7-39a9-b747-e0b29a8952dd.png[/img]
参考了网络上很多JavaScript画线的例子,发现他们都是采用许多div来构成点,从而连成线。这样不仅效率低而且也难实现和控制。
我想出了一个办法,也是用DIV来画线,不过我利用的是DIV的边框。
为了省事,拖拽、改变大小的功能用了jQuery
缺陷:不能方便的画箭头,方法是有,不过我觉得算法太繁琐。
优点:不用基于其他技术,API简单,学习成本低。。
//例子
var flow = new Flow("flow_panel");
var nodeA = new Node("节点A",flow,0,0,100,100)
.connect(new Node("节点B-1",flow,200,200,100,100))
.connect(new Node("节点B-2",flow,400,400,100,100));
HOHO,让我忙乎了几天呢
[img]http://www.iteye.com/upload/attachment/74255/006debd5-36d7-39a9-b747-e0b29a8952dd.png[/img]