一、简介：

jsplumb是jquery的一个插件，它能够让你用动态或静态的链接来连接html界面上的元素，并且从1.10版本开始，提供用鼠标拖动来连接。jsPlumb允许您使用SVG，Canvas或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。

主要包含以下模块：Anchor、Connector、Endpoint、 Overlay、Style、

二、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(动态锚)：创建动态锚点没有特殊语法，只需提供一系列单独的静态锚点规范

默认动态锚点：jsPlumb提供一个动态锚AutoDefault，从Top,Right,Left,Bottom中选择

Perimeter Anchors(周边锚)：这些事动态锚的一种形式，其中锚位置是从某个给定形状的周长中选择的，

jsPlumb支持6种形状：Circle Ellipse Triangle Diamond Rectangle Square

Continuous Anchors(连续锚)

Continuous：其位置由jsPlumb根据Connection中元素之间的方向计算。默认情况下，连续锚点将从其所在元素的所有四个面中选择点。可以使用faces来控制该行为(允许的值有top left right bottom)

将css类与Anchor关联：    数组语法的第7个值表示CSS类的字符串。并应用于endpoint,element。默认前缀endpointAnchorClass为jtk-endpoint-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:钻石

显示/隐藏覆盖：setVisible来控制Arrow的显示或隐藏，或者showOverlay(ID),或者hideOverlay(ID)

六、样式：【基本样式、悬浮样式】

样式参数列表：这是设置paintStyle的完整参数列表。但是请注意，fillStyle参数在connector中会被忽略，strokeStyle在endOptions中会被忽略，此外，如果你使用jsPlumb.connect创建链接，并且为指定任何endOption样式，endOptions中的fillStyle样式会被指定为连接线的strokeStyle

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

悬浮样式：当鼠标悬浮在这些元素上时，连接线和终结点都支持鼠标悬浮样式。他们的样式需要被精确的指定，指定的方式和我们在上面讨论的方式一致，悬浮样式也一样继承了基本样式，这是因为当鼠标移上去的时候，您通常只希望更改颜色，或者轮廓颜色，所以你只需要指定需要改变的值即可，这样避免了你需要定义重复的样式，鼠标炫富样式的参数名知识需要在正常样式前加个‘hover’即可

七、css样式：

jsplumb在它创建每个组件时都会附加一些类，这些类名都是公开的，并且如果你需要的话你可以将他们重写，具体如下

Connector --> _jsPlumb_connector connectorClass

Endpoint --> _jsPlumb_endpoint endpointClass

Overlay --> _jsPlumb_overlay overlayClass

复制代码

八、事件：jsPlumb.bind(event,callback)

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

如果有错误的地方，欢迎指出。不胜感激