jsPlumb研究

Jsplumb是Jquery的一个插件，它能够让你用动态的或静态的链接来连接html界面上行的元素，并且从1.1.0版本开始，提供用鼠标拖动来链接。目前该插件支持三个javascript库，有Jquery、MooToos、Yui3，jsplumb代码是开源的，并且是麻省理工学院许可，由google进行代码托管。

官方示例：http://morrisonpitt.com/jsPlumb/html/demo.html

代码地址：http://code.google.com/p/jsplumb/

Jsplumb介绍地址：http://jsplumb.tumblr.com/

浏览器的兼容性

IE 6 on Windows XP

IE 8 on Windows XP

IE 9 on Windows 7

Firefox 3.5.8 on Windows 7

Chrome on Ubuntu 10.04

Safari 4 on Windows Vista

Opera 10.54 on Windows XP

安装

需要导入

jQuery

jquery ui的1.7.x或1.8.x(如果您需要支持拖放)

MooTools核心库版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上测试)

YUI3

jsPlumb可以使用SVG，HTML5的画布元素或VML去呈现需要显示的对象，现代大部分浏览器都支持Canvas 和 SVG,但是IE9以下都不支持这些，默认情况下，jsPlumb都使用canvas去渲染，但如果在使用IE9以下的情况下，jsPlumb将使用vml去渲染，您可以通过下列方式调整渲染模式：

二．简介

1. 基本概念

锚(Anchor)：一个位置，放置端点的地方，相对于一个元素的来源，您不需要自己硬编码来创建它，jsPlumb提供给您各种功能，您只需要按照您的需要创建它就可以了。它没有可视化的显示，只是一个逻辑位置，可以使用锚的id来引用它，jsPlumb支持这样做，并且您可以使用坐标来表示[x,y,x方向,y方向]

连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您需要使用它们时，您只需要定义它们即可。

锚的概念是指：定义一个链接线能够链接的点，jsPlumb有9个默认的锚点位置，您可以使用它们去链接元素，具体有：

这些都是可以在若干地点之一定位的锚点，当你每次移动一个元素时，会自动选择一个最合适的位置，没有特殊的语法来创建一个DynamicAnchor，你只需要提供一个独立的锚位置，例如数组：

jsPlumb提供一个动态的锚，定名为“AutoDefault” 默认位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle

在我们讨论连接器、终点和覆盖物之前，需要提醒的是：你需要定义一个连接器，端点或覆盖，您必须使用一个“定义”，而不是直接构建一个，这个定义可以是一个字符串，它指定你需要创建的对象。

也有三个参数的方法，可以让你指定两套参数，jsPlumb会自动为你合并，例如

连接器(Connectors)

三种链接的定义语法类似

贝塞尔曲线提供了两个端点之间的立方体路径，它支持一个构造函数参数，

直线：直连绘制直线的两个端点之间。 没有构造函数的参数支持，使用参数endpointStyle定义连接样式或添加端点时定义连接线样式

存根 -这是最小长度，以像素为单位，从端点发出的初始存根。 此参数是可选的，默认为30像素

端点类型(Endpoint Types)

三个可用的端点类型，他们的构造函数参数如下：

此端点在屏幕上画一个点。 它支持一个构造函数参数：

矩形端点(Rectangle Endpoint)：

图片端点(Image Endpoint)：

覆盖界面上的链接元素，如标签或箭头等，jsPlumb有四个默认值：

转折点：是一个折回点，方向点(允许值是1和-1，意味着是点的链接方向)

PlainArrow：一个三角形箭头，没有折回点

最后的两个实际上市Arrow的配置的实例，当您调用jsPlumb.connect或jsPlumb.addEndpoint时，您可以指定一个或多个覆盖物。

1. 这里我们举个例子，默认的箭头，上面加上文字”foo”，如图：

这个链接将有一个10*30的的箭头和含有文字foo的标签，位置在连接线的开头，另外，需要注意每一个覆盖物的id。

1. PlainArrow

这也是一个特殊的Arrow实例，其中jsPlumb内部给foldback硬编码值为2，意味着箭头转变为Diamond,Arrow的所有构造函数适用于Diamond.

1. Lable

Lable：要显示的文字，你也可用提供一个函数放这儿，用来替代文本，他是做为连接的参数返回，应该返回一个string类型的字符串；

Location：做为 “Arrow” 标签应该显示的位置,比例从0到1，包括1。

1. 显示/隐藏 覆盖

并且，连接器connection也有很方便的方法用来替代上面的方法

连接器connection也提供删除覆盖物的方法，如图：

默认值(Defaults)

您可用用类似下面的方法来覆盖默认值

三．链接(Connections)

1.基本链接(Programmatic Connections)

1. 最简单的链接，你可用这样写

--链接的两个端点，jsPlumb默认使用的是Dot点端点，半径10，填充颜色#456

--设定两个端点是否可被用来做为新的链接点，默认值为false

所以这个链接是：

1. 让我们稍微加强一点这个链接，并且告诉jsPlumb我们想要什么，如图：

一种非常常见的情况，比如你想要同一个设置，来创造多个链接，jsPlumb connect有两个参数

2.使用拖放的链接(Programmatic Connections)

此端点将作为连接的资源，任何来自他的链接都将使用jsPlumb默认的样式作为自己的样式

经常发生的一件事：你有一个端点，他的样式和其他的端点只有一点点区别，大多数都是一样的，这样的情况下，你可以定义个相同的样式，有不同的样式可以单独立出来，如下图，注意下anchor设置，两个元素是不一致的：

还有另外一个方法，jsPlumb.makeTarget()，这个方法需要两个参数，第一个参数是指需要设定的元素，或者元素列表，第二个参数是指当一个链接建立时你需要的端点，在这个例子中，我们用我们之前就用过的端点，-the gray Rentangle—但是我们需要告诉jsPlumb,元素” aTargetDiv”将会被作为dorp的端点：

下面这个示例展示的是，这个终结点，连接到它的连接线是依赖这个终结点的位置，因为它定义了好几个锚点，连接线会自动找到该终结点的动态锚：

3.”拖”选项(Drag Options）

jsPlumb借用了jquery里面drag/drop的范围概念，范围的概念是指那些可拖放的元素只能够被拖放到那些有范围的元素里面，在jsPlumb中你可以在创建EndPoint时创建一个范围”Scope”，下面给出一个例子：

如果你因为某些原因想改变它的值，你可以这样做：

定义端点、覆盖物(覆盖物现在更倾向于用cssClass来替代)、连接线的样式，这些样式是由paintStyle作为jsPlumb connect、jsPlumb.makeTarget、jsPlumb.addEndPoint方法的参数来定义的，根据你调用的不同方法，参数名称会不一样，具体不同如下面所列：

jsPlumb.connect:

注意上面的样式参数，下面我们对它进行讨论

像上面的定义我们可以有下列方法：

1. 添加终结点时定义：

1. 作为jsPlumb.connect连接时的参数

1. 或作为jsPlumb.connect连接对象样式数组中的一个

1. 或者在jsPlumb.makeTarget方法中

覆盖物样式

样式参数列表

但是请注意，fillStyle参数在connector中会被忽略，strokeStyle在EndOptions中会被忽略，此外，如果你使用jsPlumb.connect创建链接，并且为指定任何EndOption样式，EndOptions中的fillStyle样式会被指定为连接线的strokeStyle。

strokeStyle:连接器的颜色

outlineWidth：连接器或端点的轮廓宽度，int值

dashstyle、The VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin

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

上面示例中两个终结点的鼠标悬浮样式是不一样的。通过下面的两种方式也可以实现， jsPlumb.addEndpoint和jsPlumb.makeTarget ：

和

但是我们得注意，makeTarget不支持连接线的参数，它只支持终结点。所有的链接中的连接线的参数是当你在用链接方法时在源端点设置的。

3. Gradients渐变

有两种类型的渐变可用：

(radial) 半径的，光线似的渐变：有彩色圆圈组成，有这个圈到那个圈的样式。

线条渐变：

这里我们有个从win2到win3的连接线，宽度15px;颜色是从绿色到红色的渐变。

Stops列表可以包含任意个数，下面的例子表示颜色从红-蓝-绿-蓝-红

端点渐变

看下面示例：

Dot示例：

并且offset和innerRadius也可以使用百分数来替代。

五．杂项

1. CSS样式

你可以运用这些样式类来使你的界面达到最佳效果。

2. Animation动画

回调函数参数解释：

properties:动画的属性，例如持续事件等

jsPlumb提供了一个完全公用的方法，getConections—来找到关于当前管理的链接，在用这个方法之前，你需要了解jsPlumb中scope概念，

1. 检索单个范围的链接

• 获取jsPlumb默认的“scope”中的链接

• 获取“scope”为myScope中的链接

1. 更进一步的过滤

scope:您要检索的链接所属范围(域)

target: 返回的链接限制为那些有此目标端点id的链接

（返回的是在这两个scope中的连接）

下面列出不同的获取示例：

1. 获取所有链接

1. 获取默认scope的链接

1. 获取指定scope的链接

1. 获取指定的多个scope的链接，返回

1. 返回指定source的链接

1. 返回指定target的链接

1. 返回指定source和指定target的链接

1. 三个参数并用

六．事件

jsPlumbConnection—当设定一个连接时会通知，这个新连接对象将会作为回调函数参数传递

Click—获取链接的点击事件，回调函数将传递点击的链接和鼠标事件

Endpointclick—当端点点击事件时通知，端点对象和鼠标事件是回调函数的参数

Click—当一个链接被点击时触发，回调函数传递的参数是鼠标事件和connection对象

Mouseenter—当鼠标进入链接的path触发，回调函数传递的也是鼠标事件和connection对象

Click-- 端点被点击时触发，回调函数传递的参数有鼠标事件和端点对象

mouseEnter—鼠标进入端点时触发，回调函数传递的也是鼠标事件和端点对象

Overlay的事件监听注册有点不同，你将他们作为overlay的构造函数参数，这是因为你从来不会对overlay有真正的动作，下面的示例看看怎么样注册一个overlay的事件：

jsPlumb.connect({

source:"el1",

target:"el2",

overlays:[

[ "Label", {

events:{

click:function(labelOverlay, originalEvent) { alert("you clicked on the label overlay for this connection :" + labelOverlay.connection) }

}

}]

]

});

七．示例

1. Connection示例

jsPlumb.connect示例、拖拽的connection示例参见文档http://jsplumb.org/doc/usage.html

2. 使用工具函数

2. 隐藏win5的所有链接

4. 显示所有win5的链接

（jQuery下，其他js库下面不列出）

八．开发

jsPlumb-1.3.3.js

jsPlumb-renderers-canvas-1.3.3.js

jsPlumb-renderers-vml-1.3.3.js

jsBezier-0.2-min.js