JointJS总结

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元件的组件栏，简易代码如下：

   var graph = 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);//显示模版框

   var r = new joint.shapes.basic.Rect({
    

      position: {
    x: 10, y: 10 }, size: {
    width: 50, height: