一、简介：
jsplumb是jquery的一个插件，它能够让你用动态或静态的链接来连接html界面上的元素，并且从1.10版本开始，提供用鼠标拖动来连接。jsPlumb允许您使用SVG，Canvas或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。
主要包含以下模块：Anchor、Connector、Endpoint、 Overlay、Style、css样式、Events
二、Anchor：
-
Static Anchors（静态锚）：
9个默认位置(元素四角，四边中点，元素中心)
Top TopRight Right BottomRight Bottom BottomLeft Left TopLeft Center复制代码
[x,y,dx,dy],其中x和y是[0,1]指定锚点位置的区间中坐标。dx和dy指定了锚点的方向，可以具有值0,-1,1
-
Dynamic Anchors（动态锚）：创建动态锚点没有特殊语法，只需提供一系列单独的静态锚点规范
-
Perimeter Anchors（周边锚）：这些事动态锚的一种形式，其中锚位置是从某个给定形状的周长中选择的，
jsPlumb支持6种形状：Circle Ellipse Triangle Diamond Rectangle Square
-
Continuous Anchors（连续锚）
Continuous：其位置由jsPlumb根据Connection中元素之间的方向计算。默认情况下，连续锚点将从其所在元素的所有四个面中选择点。可以使用faces来控制该行为（允许的值有top left right bottom）
- 将css类与Anchor关联：
[0.5,0,0,-1,0,0,’top’] ⇒jtk-endpoint-anchor-top
三、 Connector：连接器是实际连接UI的线。
jsPlumb有4个连接器实现-一条直线，一个贝塞尔曲线，流程图和状态机。默认连接器是贝塞尔曲线
- Bezier（贝塞尔曲线）：贝塞尔曲线提供了两个端点之间的立方体路径，它支持一个构造函数参数
- Straight（直线）：直连绘制直线的两个端点之间，没有构造函数的参数支持，使用参数endpointStyle定义连接样式或添加端点时定义连接线样式
- Flowchart（流程图）：这种类型的连接器，绘制一系列垂直或水平段组成的连接-经典的流程图，支持一个单一的构造函数参数
- State Machine（状态机）：这是最小长度，以像素为单位，从端点发出的初始存根。词参数是可选的，默认为30像素
四、Endpoint：一个端点的UI组件，标志着一个锚的位置，是连接器连接的点
jsPlumb有三个端点实现，点、矩形和圆形，你可以指定端点的属性，（connect、addEndpoint、makeTarget）
- Dot（点端点）：此端点在屏幕上画一个点 半径--可选，默认10像素
- Rectangle（矩形端点）：绘制一个矩形，宽度- 可选，默认20像素，高度-可选，默认20像素
- Image（图片端点）：从一个给定的URL绘制图像 SRC-必须
五、Overlay：覆盖界面上的链接元素，如标签或箭头，
jsplumb有4个默认值：
- Arrow：客配置的箭头，放在两个点的连接线上，你可以控制箭头的长度和宽度，转折点：是一个折回点，方向点（允许是1和-1，意味着是点的链接方向）
- Label：在点的连接器上的可配置的标签
- plainArrow:一个三角形箭头，没有这会点
- diamond:钻石
六、 样式：【基本样式、悬浮样式】
fillStyle、strokeStyle、outlineColor可以使用任何有效的css3语法
fillStyle:定义endPoint的颜色，例如rgba(100,100,100,50),'blue','#456','#993355',rgb(34,56,78)
strokeStyle:连接器的颜色
lineWidth:连接线的宽度
outlineWidth:连接器或端点的轮廓宽度
Dashstyle、THE VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin只适用于VML或SVG
七、css样式：
jsplumb在它创建每个组件时都会附加一些类，这些类名都是公开的，并且如果你需要的话你可以将他们重写，具体如下
Connector --> _jsPlumb_connector connectorClass
Endpoint --> _jsPlumb_endpoint endpointClass
Overlay --> _jsPlumb_overlay overlayClass
复制代码
8.1、jsPlumb事件：
- connection(info,originalEvent) 通知已建立连接 jsPlumb.connect导致此事件被触发
- connectionDetached(info,originalEvent) 通知连接已分离
- connectionMoved(info,originalEvent) 通知已将现有连接的源或目标端点拖动到某个新位置。
- connectionAborted(connection,originalEvent) 在连接到端点或目标元素之前拖动新连接但被放弃时触发
- connectionDrag(connection) 通知正在拖动现有连接，请注意，当此事件触发全新的connection时，connection的目标是jsPlumb用于拖动的瞬态元素，并且随后在建立或终止connection时将从DOM中删除。
- connectionDragStop(connection) 通知连接拖动已停止，仅针对现有connection触发此操作
- click(connection,originalEvent) 单击
- dbclick(connection,originalEvent) 双击
- endpointClick(endpoint,originalEvent) 单击端点
- endpointDbClick(endpoint,originalEvent) 双击端点
- contextmenu(component,originalEvent) 右键单击某个给定组件
- beforeDrop(info) 删除新连接或现有连接时会触发此事件
- beforeDetach(connection) 无论出于何种原因，即将分离connection时也会触发此事件，你的回调函数将传递给用户刚刚分离的connection，从此拦截器返回false会中止connection分离
- zoom(value) 缩放
8.2、Connection Events:要绑定到connection上的事件
click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup
var connection = jsPlumb.connect({source:’el1’,target:'el2'});
connection.bind(‘click’,function(connection,originalEvent){});
复制代码
8.3、Endpoint Events：要绑定到endpoint上的事件
click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup
maxConnections(info,originalEvent) 通知用户尝试在已具有最大连接数的Endpoint上删除连接
var endPoint = jsPlumb.addEndpoint(‘el’,{someOptions});
Endpoint.bind(‘click’,function(endpoint,originalEvent){});
复制代码8.4、Overlay Events：在Overlay上注册事件侦听器是一个稍微不同的过程 –您将它们作为
Overlay构造函数的参数提供，这是因为你从未真正对Overlay对象采取行动
jsPlumb.connect({
source:’el1’,
target:’el2’,
Overlays:[
[
‘Label’,{Events:{click:function(){}}}
]
]
});
复制代码解除绑定事件：unbind
如果有错误的地方，欢迎指出。
作者：__autism
链接：https://juejin.im/post/5b86a00d51882542c20f2ef6
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。