jsPlumb介绍
ShenBY 沈本义(qq:1617309239)2011-11-07
以下jsPlumb介绍基于jsPlubm1.3.3版本，并且基础库是用jQuery1.3.x或以上，与其他版本基础库或jsPlumb的比较或后期版本升级，本文档不做介绍。
本人英文水平有限，有疑惑请自行到对照翻译。
摘要
Jsplumb是Jquery的一个插件，它能够让你用动态的或静态的链接来连接html界面上行的元素，并且从1.1.0版本开始，提供用鼠标拖动来链接。目前该插件支持三个javascript库，有Jquery、MooToos、Yui3，jsplumb代码是开源的，并且是麻省理工学院许可，由google进行代码托管。
官方示例：morrisonpitt/jsPlumb/html/demo.html
代码地址：le/p/jsplumb/
Jsplumb介绍地址：jsplumb.tumblr/
JsPlumb允许您使用SVG、Canvas 或者 VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。
浏览器的兼容性
jsPlumb 1.3.3 已经在以下浏览器测试：
IE 6 on Windows XP
IE 7 on Windows XP
IE 8 on Windows XP
Firefox 3.5.8 on Windows XP
IE 9 on Windows 7
Chrome 12 on Windows 7
Firefox 3.5.8 on Windows 7
Firefox 3.6.3 on Ubuntu 10.04
Chrome on Ubuntu 10.04
Safari 4 on Mac Tiger
Safari 4 on Windows Vista
Safari 5.0.5 on Windows 7
Opera 10.54 on Windows XP
一． 安装
1. 需要导入
使用jsPlumb需要到如的类库文件，是根据您使用的javascript类库的不同而定，目前提供以下版本。
jQuery
    jquery的1.3.x或更高版本
    jquery ui的1.7.x或1.8.x(如果您需要支持拖放)
MooTools
    MooTools核心库版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上测试)
    MooTools的Drag.Move的1.2.4.4或更高版本
YUI3
    YUI3.3.X ,目前jsPlumb只在YUI3.3.0上测试，YUI3其他版本可能也可以正常工作
jsPlumb可以使用SVG，HTML5的画布元素或VML去呈现需要显示的对象，现代大部分浏览器都支持Canvas 和 SVG,但是IE9以下都不支持这些，默认情况下，jsPlumb都使用canvas去渲染，但如果在使用IE9以下的情况下，jsPlumb将使用vml去渲染，您可以通过下列方式调整渲染模式：
   
二．简介
1. 基本概念
jsPlumb是将所有链接的东西放在一起，所以在jsPlumb中，核心是链接对象，jsPlumb本身可以分成四个组成部分
    锚(Anchor)：一个位置，放置端点的地方，相对于一个元素的来源，您不需要自己硬编码来创建它，jsPlumb提供给您各种功能，您只需要按照您的需要创建它就可以了。它没有
可视化的显示，只是一个逻辑位置，可以使用锚的id来引用它，jsPlumb支持这样做，并且您可以使用坐标来表示[x,y,x方向,y方向]
    端点(Endpoint )：链接的一端的可视化表示，您可以创建并可以链接他们；您可以让他们支持拖拽，或者您可以直接使用t()在创建链接时直接创建它们。
    连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您需要使用它们时，您只需要定义它们即可。
    覆盖物(Overlay)：一个UI组件，是用来是用来装饰连接器，例如标签、箭头等。
2. 锚(Anchors)
锚的概念是指：定义一个链接线能够链接的点，jsPlumb有9个默认的锚点位置，您可以使用它们去链接元素，具体有：
这些位置在jsplumb底层代码中都是以阵列语法表示的，[X,Y,DX,DY],其中X,Y是在区间[0,1]指定锚的位置，DX和DY是在区间[-1,1]指定曲线的事件锚的方向坐标，例如[0，0.5，-1，0]定义了一个“LeftCenter”连接器的曲线，从锚点单向向左的曲线.同样，[0.5，0，0，-1]，定义一个“CenterTop”锚连接器所产生的向上的曲线。
3. 动态锚(Dynamic Anchors)
javascript说明这些都是可以在若干地点之一定位的锚点，当你每次移动一个元素时，会自动选择一个最合适的位置，没有特殊的语法来创建一个DynamicAnchor，你只需要提供一个独立的锚位置，例如数组：
默认的动态锚：
jsPlumb提供一个动态的锚，定名为“AutoDefault”默认位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle
动态锚和可拖动的连接是可以进行互操作的，当你开始拖动连接或释放它时，jsPlumb会锁定一个动态的锚的位置，您可以在界面上看到链接锚点的切换变化。
4. 连接器、端点，覆盖物(Connector, Endpoint & Overlay Definitions)
在我们讨论连接器、终点和覆盖物之前，需要提醒的是：你需要定义一个连接器，端点或覆盖，您必须使用一个“定义”，而不是直接构建一个，这个定义可以是一个字符串，它指定你需要创建的对象。
或者您需要构件的对象的属性名组成的数组，您可以通过其构造函数来创建，例如
也有三个参数的方法，可以让你指定两套参数，jsPlumb会自动为你合并，例如
5. 连接器(Connectors)
链接的线，实际上是界面上的各个元素的链接线，jsPlumb有三条连接器实现，一条直线、
Bezier曲线和”流程图”连线，默认的连接线是贝塞尔曲线，您可以有选择的设置一个链接器，可以通过设置“connector”来定义一个连接线，或者在添加端点时设置连接线，如果您没有为connector设置一个值，那么他会用他的默认值”Default”
三种链接的定义语法类似
贝塞尔曲线：
    贝塞尔曲线提供了两个端点之间的立方体路径，它支持一个构造函数参数，
curviness -可选，默认为150，这定义的锚点位于贝塞尔曲线的控制点，以像素为单位的距离，但这并不意味着你的连接器会穿过从你的曲线到这个距离的点，这仅是一个标识而已。
直线：直连绘制直线的两个端点之间。 没有构造函数的参数支持，使用参数endpointStyle定义连接样式或添加端点时定义连接线样式
流程图：这种类型的连接器，绘制一系列垂直或水平段组成的连接 - 经典的流程图​​，支持一个单一的构造函数参数
存根 -这是最小长度，以像素为单位，从端点发出的初始存根。 此参数是可选的，默认为30像素
6. 端点类型(Endpoint Types)
一个端点的UI组件，标志着一个锚的位置，是连接器连接的点，jsPlumb有三个端点实现，点、矩形和图形，你可以指定端点的属性，在t时指定属性，或者jsPlumb.Addendpiont时指定，或者设置jsPlumbde target时设定属性，语法可参照connector。
三个可用的端点类型，他们的构造函数参数如下：
点端点(Dot Endpoint)：
    此端点在屏幕上画一个点。 它支持一个构造函数参数：
    半径 -可选，默认为10个像素。 定义点的半径
矩形端点(Rectangle Endpoint)：
    绘制一个矩形。 支持的构造函数的参数是：
宽度 -可选;默认为20像素。 定义矩形的宽度。
高度 -可选，默认为20个像素。 定义矩形的高度。
图片端点(Image Endpoint)：
    从一个给定的的URL绘制图像。 此端点支持一个构造函数的参数：
SRC -必需的。 指定要使用的图像的URL。   
7. 覆盖物类型(Overlay Types)
覆盖界面上的链接元素，如标签或箭头等，jsPlumb有四个默认值：
Arrow：可配置的箭头，放在两个点的连接线上，你可以控制箭头的长度和宽度，
转折点：是一个折回点，方向点(允许值是1和-1，意味着是点的链接方向)
Label：在点的连接器上的可配置的标签
PlainArrow：一个三角形箭头，没有折回点
Diamond:顾名思义，钻石
最后的两个实际上市Arrow的配置的实例，当您调用t或jsPlumb.addEndpoint时，您可以指定一个或多个覆盖物。
1. 这里我们举个例子，默认的箭头，上面加上文字”foo”，如图：
这个链接将有一个箭头标签在连线的一般，并且文字标签在连线的四分之一处，可以注意下id属性，你可以用它来删除标签或做其他操作。
2. 下面的实例，添加两个覆盖物，请注意，我们在这个例子中使用的参数“connectorOverl
ays，”而不是上面例子中的“overlays”，这是因为总有一天overlays会用来作为终结点的覆盖物样式：
这个链接将有一个10*30的的箭头和含有文字foo的标签，位置在连接线的开头，另外，需要注意每一个覆盖物的id。
3. PlainArrow
这仅仅是一个特殊的Arrow的实例，内部jsPlumb给”foldback”硬编码为1，意思是一个平面的箭头尾部边缘，Arror的所有构造函数适用于PlainArrow.
4. Diamond
这也是一个特殊的Arrow实例，其中jsPlumb内部给foldback硬编码值为2，意味着箭头转变为Diamond,Arrow的所有构造函数适用于Diamond.
5. Lable
提供了一个文本的标签来装饰连接器，可用的构造函数参数有：
Lable：要显示的文字，你也可用提供一个函数放这儿，用来替代文本，他是做为连接的参数返回，应该返回一个string类型的字符串；
cssClass：一个可选的用于lable的样式类，这是目前首选的”lableStyle”参数，样式有：
Location：做为“Arrow”标签应该显示的位置,比例从0到1，包括1。
6. 显示/隐藏覆盖

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。