1 基本介绍
1.1 JointJS
JointJS图库允许用户为所有当前的浏览器创建完全交互的绘图工具。JointJS不仅是一个图库,其MVC(更多的是MV)架构将图、元件(element)和连接(link)模型与绘制分离。这使得JointJS很容易嵌入到后端应用程序。此外,JointJS用Backbone MVC库构建,所以如果用户知道Backbone,会觉得很熟悉JointJS。JointJS是基于jQuery,Underscore,Backbone 和 SVG。
图包含元件,并用链接连接起来。在JointJS中,图由一个模型joint.dia.Graph代表。这个模型然后收集单元(cell,表示元件和链接)。因此,一个单元可以是一个元件(joint.dia.Element或其继承者)或链接(joint.dia.Link)。
JointJS提供了既提供了基本的图形元件,也包含了一些注明的图表(ERD, Org chart, FSA, UML, PN, DEVS, ...)。
1.2 Rappid
Rappid基于JointJS,扩展了40个UI组件和其它元件,能极大的加速应用的开发。形如:
但Rappid需要购买。虽然如此,但是Rappid的Demo很详细,值得学习研究,为我们实现类似的功能提供了很好的参考。下一章将基于Rappid Demo进一步讨论。
2 Rappid Demo
Rappid提供了详细的Demo,一下只介绍了几个实用的,其它请参考在线文档。
2.1 组件框
下图的左方为组件框,包含了可使用的元件,用户可以方便的拖放到右方的画图区域。另外,用户也可以对元件分组,也能实现自定义用户搜索。
joint.ui.Stencil实现了JointJS元件的组件栏,简易代码如下:
vargraph
=new
joint.dia.Graph;
var
paper
=new
joint.dia.Paper({
el
:$
('#paper'),
width
:500,
height
:300,
model
:graph
});
var
stencil
=new
joint.ui.Stencil({
paper
:paper
,
width
:200,
height
:300
});
$
('#stencil-holder').append(stencil
.render().el
);//显示模版框
varr
=new
joint.shapes.basic.Rect({
position
:{
x
:10,
y
:10
},
size
:{
width
:50,
height
: