jsplumb学习笔记

发表于 | 更新于 | 评论数： | 阅读次数：

jsPlumb 是一个用于在 html 元素之间生成连接线的 javascript 库。类似的工具还有 jointjs、GoJS、mxGraph 等。下面简单介绍jsplumb的相关内容。

基本概念

  • Souce 源节点
  • Target 目标节点
  • Anchor 锚点
  • Endpoint 端点
  • Connector 连接
  • Overlay 连接装饰

初始化

1
2
3
4
5
jsPlumb.ready(function() {
    ...
    // your jsPlumb related init code goes here
    ...
});

创建实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var firstInstance = jsPlumb.getInstance();

firstInstance.importDefaults({
  Connector : [ "Bezier", { curviness: 150 } ],
  Anchors : [ "TopCenter", "BottomCenter" ]
});
  
firstInstance.connect({
  source:"element1", 
  target:"element2", 
  scope:"someScope" 
});

var secondInstance = jsPlumb.getInstance({
  PaintStyle:{ 
    strokeWidth:6, 
    stroke:"#567567", 
    outlineStroke:"black", 
    outlineWidth:1 
  },
  Connector:[ "Bezier", { curviness: 30 } ],
  Endpoint:[ "Dot", { radius:5 } ],
  EndpointStyle : { fill: "#567567"  },
  Anchor : [ 0.5, 0.5, 1, 1 ]
});
    
secondInstance.connect({ 
  source:"element4", 
  target:"element3", 
  scope:"someScope"   
});

参考链接

  1. jsplumb 中文基础教程,by wangduanduan.
  2. 记一次绘图框架技术选型: jsPlumb VS mxGraph,by yejinzhan.
  3. jsPlumb Community Edition,by jsplumbtoolkit.
  4. jsPlumb 文档翻译,by shawchen08.
  5. Vue.js 技术揭秘,by huangyi.
  6. jsPlumb Connection event is triggering more than once,by stackflow.