刚入职，就得知自己要做 jsPlumb 相关的工作，本着看啥不如看官方文档的原则，开始看官方文档……

后来发现，已经有人翻译好啦，我开始愣是没找着。那我都翻译了，不能白费不是，发上来吧，初次翻译，大神轻喷。

JsPlumb 官方文档-免费版

jsPlumb

jsPlumb免费版为开发者提供了一种方法，使得开发者们能够在页面上对元素进行可视化连接，使用SVG。jsPlumb没有外部依赖关系。

1.7.x 系列的版本使支持 IE8 的最后一版。从 2.0.0 版开始，免费反只在支持 SVG 的现代化浏览器上工作。

引入和安装

阅读当前界面的所有内容是一个不错的主意。当你将 jsPlumb 集成到你的用户界面时，你可能需要知道以下相关事项。

浏览器兼容
安装
文档类型
需要引入的对象
初始化 jsPlumb
多个 jsPlumb 实例
方法参数
元素 ID
关于 z-Index 的注意事项
jsPlumb 在何处添加元素？
拖曳
表现形式

浏览器兼容

jsPlumb 1.7.x 版本在 IE6 及以上版本的浏览器运行。jsPlumb 在 IE9 及以上的浏览器上运行。

安装

文档类型

text/html

如果你想像大多数人一样使用 text/html 文档格式，那么你需要使用以下文档类型：

<!doctype html>

该文档格式提供了一种适用于所有浏览器的标准模板，能够访问 HTML5 。

需要引入对象

无需引入。

<script src="PATH_TO/jsplumb.min.js "></script>

初始化 jsPlumb

在界面元素没有被初始话之前，调用 jsPlumb 没有什么意义。为了解决这个问题，你需要为 jsPlumb 绑定 ready 事件（或者绑定你正在使用的 jsPlumb 实例）。

jsPlumb.bind("ready", function() {
  ...           
  // your jsPlumb related init code goes here
  ...  
});

这里有一个更简单但功能不减的方法：

jsPlumb.ready(function() {
    ...         
    // your jsPlumb related init code goes here
    ...
 }）;

如果在 jsPlumb 被初始化以后，再次绑定 ready 事件，那么你的回调函数会立即执行。

多个 jsPlumb 实例

jsPUmb 默认在浏览器窗口中注册，并提供了一个静态实例供整个界面使用。你也可以单独将 jsPlumb 实例进行实例化，使用 getInstance 方法即可，例如：

var firstInstance = jsPlumb.getInstance();

现在，你可以像使用 jsPlumb 这一变量一样使用 firstInstance。包括设置默认值，电泳 connect 方法等等。

irstInstance.importDefaults({
  Connector : [ "Bezier", { curviness: 150 } ],
  Anchors : [ "TopCenter", "BottomCenter" ]
});

firstInstance.connect({
  source:"element1", 
  target:"element2", 
  scope:"someScope" 
});

getInstance 随意选择一个提供默认值的对象：

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"   
});

如果可能的化建议使用 jsPlumb 的单独实例。

元素ID

jsPlumb 通过元素 Id 来和所有的元素进行交互，如果没有为元素设置 Id, jsPlumb 就会为元素创建一个 id.但我们建议你为你自己用户界面上的元素设置一个合适的 id.

改变元素 id

由于 jsPlumb 使用元素 id 和元素进行交互，因此当你的元素 Id 发生改变的时候，你需要告诉 jsPlumb。这里提供了两种方法来通知 jsPlumb 元素 id 发生了改变：

jsPlumb.setId(el,newId) 如果你想要 jsPlumb 关注到你的 dom 元素发生了改变，就可以使用这个方法。这样设置以后，jsPlumb 回更新相应的引用。
jsPlumb.setIdChanged(oldId,newId) 如果你已经改变了元素 id，可以使用这个方法，它会更新 jsPlumb 相应的引用。

参数方法

jsPlumb 提供了多种格式的方法用于操纵指定元素。

节点列表/选择器

在 jsPlumb 的相关文档中引入了 selector(选择器) 这一概念。它返回一个符合特定 CSS 规范的节点列表。在现在的浏览器中，你可以通过调用以下方法来或与一个列表:

 someElement.querySelectorAll('.someSelector')

querySlectorAll 这一方法返回的元素就是一个 NodeList(节点列表)。

尽管 jsPlumb 并没有依赖于 JQuery，它依然支持将 JQuery 选择器返回的结果作为参数（因为 JQuery 选择器返回的对象是是列表式的，它拥有长度属性和索引访问器）。所以你在界面中使用 JQuery 依然是有用的。

$(someElement).find(".someSelector")

元素id

使用单个字符串作为参数时，jsPlumb 会将该参数视作元素 id。

元素

你可以使用 DOM 元素作为参数。这个事实可能并不会让你觉得惊讶。

数组

你可以使用我们列出的所有类型的数组。数组中数据可以拥有多种格式，并不要求全部是同一种格式。

关于 Z-Index 的注意事项

当使用 jsPlumb 时，你需要注意你界面中的各个部分中的 z-indices。特别要注意的一点是 jsPlumb 添加到界面中的元素不能覆盖界面中原有元素。

jsPlumb 为每个端点、连接器和覆盖层都添加了一个元素。因此，对于两端有可见端点的连接器和中间的标签，jsPlumb 添加了四个元素。

为了帮助你正确的识别 z-indices，jsPlubm 为每个类型的元素添加了不同的 CSS 类。如下所示:

Component	Class
Endpoint	jtk-endpoint
Connector	jtk-connector
Overlay	jtk-overlay

此外，无论鼠标合适划过端点或者连线，都会为他们添加一个叫做 jtk-hover 的类。想要了解更多关于 jsPlumb 的 CSS 样式，请看（请看官网文档）。

jsPlumb 在何处添加元素？

明白 jsPlumb 将在何处将它创建的元素加入 dom 中是很重要的。如果你想要添加 TL；DR 版本，可以归结为以下几点：

强烈建议你在开始建设界面之前设立一个容器。
该容器会成为 jsPlumb 所添加元素的父容器。通常来说，你可以把它当作你所有连接点的父节点。
如果你没有指定容器，jsPlumb 将会把第一个元素的 offsetParent 作为父容器，你可以称之为……（翻译无能请见谅）。

让我们更加详细的讨论关于元素添加的更多事项：

jsPlumb 的早期版本将所有元素都添加进 body 中。这样做的优点在于，能够灵活的布置元素之间的链接，当然，这样做也带来了一些意想不到的结果。

你可以想一想，如果有一部分元素已经相互连接，且这些元素都有同一个标签（属于同一个分类），该如何进行布局：你会希望 jsPlumb 在这一整部分元素外添加元素。所以当用户切换标签，且当前标签被隐藏时，所有标签中的元素都会被隐藏。因此，当所有的元素都属于 body 时，这种情况就不会发生。

当一些图表包含的元素过多，溢出当前界面、需要使用滚动条时，jsPlumb 就会排上用场。将元素追到到 body 文档中，防止这种情况发生。

容器

你可以-应该使用 jsPlumb 中的 setContainer 方法去为所有即将被添加的元素创建一个父元素，或者可以调用 jsPlumb.getInstance 方法，填入参数来建造容器。

重要的一点是从 jsPlumb 1.6.2 版本以后发生了一些改变。在 1.6.2 版本之前，你需要通过 jsPlumb.Default.Container 属性来指定容器。当然你现在也可以使用这样的方法来指定容器，它并不会产生语法错误，但它也不会产生什么实际作用。

还有重要的一点是，如果你使用 jsPlumb 中的 draggable 方法来使你界面上的其他元素能够被拖曳，注意，在当前实例中，被当作 Container (父容器) 的元素是不可以调用 draggable 方法的。否则，你在拖曳元素的时候，可能会发生一些奇怪的事情。如果你希望使用 jsPlumb 正常的拖动元素，建议你创建一个现得实例。

var nonPlumbing = jsPlumb.getInstance();
nonPlumbing.draggable("some element");

例如

建立一个容器，并将它作为默认容器

jsPlumb.setContainer(document.getElementById("foo"));
...
jsPlumb.addEndpoint(someDiv, { endpoint options });

建立一个容器，并将它作为默认容器，使用元素Id，然后连接两个元素。此时，id 为 “containerId” 的元素就拥有两个子元素了。

jsPlumb.setContainer("containerId");
...
jsPlumb.connect({ source:someDiv, target:someOtherDiv });

建立一个 jsPlumb 的新实例，并且在构造函数中指定容器。

var j = jsPlumb.getInstance({
  Container:"foo"
});
...
jsPlumb.addEndpoint(someDiv, { endpoint:options });

容器样式

你选择的容器样式记得要设置 position:relative 这一属性，因为 jsPlumb 将会以此为基准作为添加元素的起始位置，并计算出元素具体位置，jsPlumb 使用绝对定位。

元素拖曳

使用 jsPlumb 作为接口的元素都有一个普遍的特点，那就是元素都是可拖曳的。你应该使用 jsPlumbInstance.draggable 来配置元素：

myInstanceOfJsPlumb.draggable("elementId");

…… 因为如果你不这样配置的化，jsPlumb 不会知道元素被移动了，因此也不会重绘该元素。

拖曳详细讨论见官方文档。

表现形式

jsPlumb 执行的速度、元素链接上限的管理，在运行时都取决于浏览器。当你写代码时，你会发现，jsPlumb 在 Chorme 上运行最快，其次是 Safari/Firefoc,在 IE 上的运行速度则是随着随着版本号递减。

暂停绘制

每个在 jsPlumb 中调用的 .connect 或者 addEndpoint 方法都会重绘相关元素，这种重绘恰恰是你所希望的。但是如果你想执行某些“批量”操作——例如将数据载入界面中那可能会——还是建议你在进行这种操作之前暂停绘制:

jsPlumb.setSuspendDrawing(true);
...
- load up all your data here -
...
jsPlumb.setSuspendDrawing(false, true);

注意调用 setSuspendDrawing 时的第二个参数：它指明 jsPlumb 立即进行全局重绘（通过调用内部方法：repaintEverything）.

上面说过我建议你这样做。确实。当你在运行速度慢的浏览器上解决批量连接问题时，暂停绘制与否会让结果有很大的不同。

batch(分批处理)

该函数抽象出了一种绘制暂停模式，做一些事，然后继续绘制。

jsPlumb.batch(fn, [doNotRepaintAfterwards]);

使用举例：

jsPlumb.batch(function() {
  // import here
  for (var i = 0, j = connections.length; i < j; i++) {
      jsPlumb.connect(connections[i]);
  }
});

在此，我们假设 connections 是一个能够传递到 connect 方法的数组对象，例如：

{ source:"someElement", target:"someOtherElement" }

默认情况下，它将在末尾重绘。但是如果你想的话，你可以抑制这种重绘：

jsPlumb.batch(function() {
  // import here
}, true);

这个方法以前被叫做 doWhileSuspended ，在 1.7.3 版本中被重命名了。

锚点种类

持续不断的锚点时最需要用到许多数学方面的知识，因为循环绘制的时候每次都必须计算他们的位置。

动态及边界锚点是第二慢的。（边界锚点比大部分的动态锚点都要慢，因为它们实际上是动态锚点，默认有六十个位置可供选择）。

静态锚点例如 Top,Bottom 等是最快的。

基本概念

介绍
连接器，端点，锚点&覆盖定义

介绍

jsPlumb 致力于将物品连到一起，所以 jsPlumb 的核心抽象概念是 Connection 对象，Connection 对象又可以分为五个概念来理解：

锚点—一个可以是元素的起点或者是端点的位置，你不需要自己创造锚点，你需要在 jsPlumb 的各个函数上提供暗示，让用户按需选择。它们不会出现在视野中，只是一个本地的位置信息。可以通过名字来引用锚点，或者是引用附带锚点、引用包含各种参数的数组，这都是为了更好的控制它们。关于 Anchors 的详细信息见官方文档。
端点—就所见而言是一个连接的终点。你可以自己创建端点，要求支持缩放。也可以让 jsPlumb 在使用方法 jsPlumb.connect(...) 进行连接。你还可以将它们作为 jsPlumb.connect(...) 方法的参数，以编程的方式进行连接。详细信息见官方文档。
连接器—就所见而言是用来连接页面上的两个元素。jsPlumb 默认有四种可用连接器——舒适的曲线，一条直线，流程图连接器，状态机连接器。你和连接器之间并没有什么交互，你只需要指明你所需要用到的连接器的类型。详细内容参见官方文档。
覆盖—用于修饰用户界面上的连接器，例如标签、箭头等。
组—一组元素包含了一些其他的东西，它们可以被折叠，使得所有连接到该组元素的连接都会被连接到被折叠的组容器。详细内容参见官方文档。

一个连接由两个端点组成，一个连接器，零或者多个覆盖共同连接加入两个元素。每个端点都和锚点有着联系。

jsPlumb 的公共接口只提供了连接和端点，处理内部的创建或者配置以及其他所有东西。但你仍然需要熟悉锚点、连接器和覆盖等概念。

连接器，端点，锚点&覆盖定义

无论你想在何时定义一个连接器、端点、锚点或者覆盖，你必须使用 “definition” ,而不是直接建造一个。这个定义可以是一个字符串用于指定你想创建的工作—请看 endpoint 的参数：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Rectangle"
});

……或者是一个个人创建的一个包含了参数名和参数内容的数组：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { 
      cssClass:"myEndpoint", 
      width:30, 
      height:10 
  }]
});

当然，也有三个参数的方法让你来指定两组参数，然后 jsPlumb 会为将两组参数合并。这背后的意义在于让你定义一个通用的内容，然后你也许会在不同的场景中调用同它（减少代码的重复率）。

var common = {
    cssClass    :   "myCssClass",
    hoverClass  :   "myHoverClass"
};
jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { width:30, height:10 }, common ]
});

该语法支持所有端点、连接器、锚点和覆盖的定义。这有一个用到了以上四种定义：

var common = {
    cssClass:"myCssClass"
};
jsPlumb.connect({
  source:"someDiv",
  target:"someOtherDiv",
  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
});

这允许你所建造的两个函数参数有所不同，但每个创建对象都有一个 JS 对象作为参数，在对象中参数为（键，值）对形式。

锚点

介绍
静态锚点
动态锚点
- 默认动态锚点
- 位置选择
周边锚点
- 周边锚点旋转
连续锚点
- 连续锚点面
关联 CSS 类与锚点
- 修改锚点类前缀

介绍

一个锚点模型的定义是：被连接器连接—定义了端点的位置。共有四种锚点类型：

静态—它们固定在元素的某个点上，不会移动。可以通过一个字符串来识别指定的锚点，或者是通过一个位置数组（见下文）。
动态—jsPlumb 每次都在绘制的连接中选择一个最合适的静态点，这些最合适的静态锚点列表组成了动态锚点。在连接中，算法会计算出最接近元素中心的点，然后将它作为最合适的锚点。jsPlumb 未来的接口可能会使用一个拓展算法来完成这个功能。
周边锚—这是一些随着给定形状改变而改变的锚点。实际上，他们还是一些从底层形状周边选择的锚点。
连续锚点—这些锚点不会固定在指定位置；他们会分布在元素四个面中的一个面上。到底分布在元素的哪一面则取决于当前元素和其他元素的连线方向。连续锚点相较于静态或者动态锚点而言，计算更加密集一些，因为在进行循环绘制时，会要求 jsPlumb 计算每一个连接的位置，不是紧紧计算在运动中的连接。

静态锚点

jsPlumb 提供了九种默认锚点的位置，让你能够指定连接器从哪个位置开始连接元素：他们是元素的四个角，元素的中心点，和元素每条边的边缘中心。

Top(也被称作 TopCenter)
TopRight
Right(也被称作 RightMiddle)
BottomRight
Bottom(也被称作 BottomCenter)
BottomLeft
Left(也被称作 LeftMiddle)
TopLeft
Center

每个字符串代表的含义都可以从底层的数组[x,y,dx,dy]解析出来。X 和 Y 在坐标上的区间是 [0,1],代表着锚点的位置。dx 和 dy 则代表了曲线事件锚的方向，可以取值 0，1 或者 -1.例如，[0,0.5,-1,0] 代表了一个 left 锚点，连接器从左边向外发散曲线。同样的，[0.5,0,0,-1] 定义了一个 top 锚点，连接器向上发散曲线。

jsPlumb.connect({...., anchor:"Bottom", ... });

等同于：

jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1 ], ... });

锚点偏移

除了为锚点提供位置和方向以外，你还可以选择提供另外两个参数，分别用来定义从给定位置的像素偏移值。下列给出了一个指定的锚点，在 Y 轴方向偏移了 50 个像素；

jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1, 0, 50 ], ... });

动态锚点

这些锚点可以被定位在多个位置上，然后每次都选择一个最合适的锚点在用户界面上移动或者绘制。

创建动态锚点没有什么特别之处；你只需要提供一个单独的数组，它符合静态锚点规范，例如：

var dynamicAnchors = [ [ 0.2, 0, 0, -1 ],  [ 1, 0.2, 1, 0 ], 
               [ 0.8, 1, 0, 1 ], [ 0, 0.8, -1, 0 ] ];

jsPlumb.connect({...., anchor:dynamicAnchors, ... });

注意你可以把坐标的和静态指定两种形式混合起来写：

var dynamicAnchors = [ [ 0.2, 0, 0, -1 ],  [ 1, 0.2, 1, 0 ], 
               "Top", "Bottom" ];

jsPlumb.connect({...., anchor:dynamicAnchors, ... });

默认动态锚点

jsPlumb 提供了一个动态锚点叫做 AutoDefault ,它们是从 Top,Right,Bottom 和 Left 点中选出来的。

jsPlumb.connect({...., anchor:"AutoDefault", ... });

位置选择

算法会找出离其他元素中心点最近的点作为连接锚点。如果有需要的话，未来的 jsPlumb 版本也许会支持更加复杂的选择算法。

可拖曳连接

动态锚点和拖曳连接可以交互操作：当你开始移动一个动态锚点开始进行连接时，jsPlumb 就锁定了它的位置。而一旦连接没有建立或者被抛弃，那么 jsPlumb 就会解锁。在那时，你可能会发现动态锚点的位置发生了改变，因为 jsPlumb 优化了连接。

（接下来的片段示例界面找不到了，因为跳过）

周边锚

周边锚的锚点位置是从给定形状的周边进行选择的。jsPlumb 支持六种形状:

圆（Circle）
椭圆(Ellipse)
三角形(Triangle)
菱形(Diamond)
长方形(Rectangle)
正方形(Square)

长方形和正方形，严格来说不是必须的，因为长方形就是 web 界面的标准。但它们是完整规范的一部分。

jsPlumb.addEndpoint("someElement", {
  endpoint:"Dot",
  anchor:[ "Perimeter", { shape:"Circle" } ]
});

在这个例子中，我们的锚点将会沿着圆的轨迹运动，这个圆的直径与其他潜在元素的宽、高相等。

注意，圆的形状与椭圆的形状是相同的，因为我们假设了其他潜在元素与圆有相同的宽高。如果宽高不相同的话，你会获取一个椭圆。长方形和正方形也一样。

默认情况下，jsPlumb 会为形状的周长设置大约 60 个锚点，但你可以修改这个数值：

jsPlumb.addEndpoint("someDiv", {
    endpoint:"Dot",
    anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }]
});

很明显，点越多，操作就越顺畅，但你的浏览器所需要做的工作也更多。

这是一个三角形和菱形的例子，为了维持完整性:

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Dot",
    anchors:[
        [ "Perimeter", { shape:"Triangle" } ],
        [ "Perimeter", { shape:"Diamond" } ]
    ]
});

周边锚循环

你可以为周边锚设定一个循环值—你可以看以下例子，它示范了你该如何使用它。

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Dot",
    anchors:[
        [ "Perimeter", { shape:"Triangle", rotation:25 } ],
        [ "Perimeter", { shape:"Triangle", rotation:-335 } ]
    ]
});

注意，这个值必须以度数提供，而不是以弧度提供。而且这个数字可以是正数或则负数。在上例中，两个三角形都是以相同的度数旋转的。

连续锚点

就像上面所讨论论的，这些锚点的位置都是 jsPlumb 根据连接中元素的方向计算出来的，还有许多其他的连续锚点是共享这个元素的。你可以使用字符串语法来指定你想要使用连续锚点或者是默认的静态锚，例如：

jsPlumb.connect({
    source:someDiv,
    target:someOtherDiv,
    anchor:"Continuous"
});

注意，在这个例子中，我指定的是 "anchor",而不是 “anchors” —jsPlumb 会对两种 anchors 都使用相同的规范。但我可以这么说：

jsPlumb.connect({
  source:someDiv,
  target:someOtherDiv,
  anchors:["Bottom", "Continuous"]
});

这就导致了元素在 BottomCenter 有了一个静态锚点。在实际中，连接的两个元素使用连续锚点是是效率最高的。

另外还要注意一点，连续锚点可以通过 addEndPoint 方法来添加锚点：

jsPlumb.addEndpoint(someDiv, {
  anchor:"Continuous",
  paintStyle:{ fill:"red" }
});

……也可以使用 makeSource/makeTarget 来添加锚点：

jsPlumb.makeSource(someDiv, {
  anchor:"Continuous",
  paintStyle:{ fill:"red" }
});

jsPlumb.makeTarget(someDiv, {
  anchor:"Continuous",
  paintStyle:{ fill:"red" }
});

设置 jsPlumb 中 anchor 的默认值：

jsPlumb.Defaults.Anchor = "Continuous";

连续锚点面

在默认情况下，连续锚点会从与它有关联的元素的四个面中来选择点。但你可以可以通过 anchor 规范中 faces 属性的参数来控制这种选择：

jsPlumb.makeSource(someDiv, {
    anchor:["Continuous", { faces:[ "top", "left" ] } ]
});

允许的参数值还包括： top left right bottom

如果你在 faces 中提供了一个空数组，那么 jsPlumb 默认使用四个面。

锚点和样式

上面讨论的数组语法支持七个参数，其中一个参数就代表着 CSS 类。这个类将和对应的锚点相关联。当锚点被选中时，样式会被应用到锚点的端点和元素中。

一个静态锚点当然是一直处于被选中状态，但一个动态锚点可以在不同的位置上多次循环，而每个锚点核能都关联着不同的 CSS 样式。

每一个与 jsPlumb 实例关联的样式被写入端点或者元素时，都需要一个特定的前缀来表明它时一个 endpointAnchorClass，它被默认为是：

jtk-endpoint-anchor-

所以你必须遵从这一规则，例如：

var ep = jsPlumb.addEndpoint("someDiv", {
  anchor:[0.5, 0, 0, -1, 0, 0, "top" ]
};

然后这个被 jsPlumb 创建的端点以及它的元素 someDiv 就会有一个这样的类名:

jtk-endpoint-anchor-top

一个使用动态锚点的例子：

var ep = jsPlumb.addEndpoint("someDiv", {
  anchor:[
    [ 0.5, 0, 0, -1, 0, 0, "top" ],
    [ 1, 0.5, 1, 0, 0, 0, "right" ]
    [ 0.5, 1, 0, 1, 0, 0, "bottom" ]
    [ 0, 0.5, -1, 0, 0, 0, "left" ]
  ]
});

这些被指定到端点和元素的类会随着锚点位置的改变而循环遍历这些值：

tk-endpoint-anchor-top
jtk-endpoint-anchor-right
jtk-endpoint-anchor-left
jtk-endpoint-anchor-bottom

注意，如果你取得类名超过一个字符串，jsplumb 并不会为每个字符串添加一个前缀：

var ep = jsPlumb.addEndpoint("someDiv", {
  anchor:[ 0.5, 0, 0, -1, 0, 0, "foo bar" ]
});

这么做得结果是两个类会被添加到端点和元素，它们分别是：

jtk-endpoint-anchor-foo

和

bar

修改锚点类前缀

锚点中使用到的前缀类名被存储在 jsPlumb 的 endpointAnchorClass 属性中。你可以在 jsplumb 的一些实例中任意修改：

jsPlumb.endpointAnchorClass = "anchor_";

也可以是：

var jp = jsPlumb.getInstance();
jp.endpointAnchorClass = "anchor_";

连接器

连接器实际上是一种将元素添加到用户界面的线。jsPlumb 实现了四个连接器—一条直线，一个贝兹尔曲线，流程图和状态机。默认连接器是贝兹尔曲线。

你可以通过调用 jsPlumb.connect ，jsPlumb.addEndpoint(s)，jsPlumb.makeSource 或者 jsPlumb.makeTarget 方法来设置 connector 属性，以选择你想要的连接器。

你可以使用连接器、端点、锚点&覆盖中描述的语法来定义连接器，以下描述了所有连接器的构造器的值。

Bezier (贝兹尔) 提供了在两个端点之间提供了一个立体的 Beizier 路径。它支持单一的构造函数参数。
- curviness(曲线) - 可选择的，默认为150.它定义了 Bezier 的控制点到锚点之间像素的距离。它并不能代表你的连接器到曲线的距离。它暗示了曲线的路径。如果你想了解更多关于 Bezier 曲线的内容，我们建立你参考维基百科。
Straight（直线）绘制了一条端点到端点的直线。支持两种构造函数参数。
- stup(存根) - 参数可选，默认为0.这个参数的任何正值都有一个存根，这个存根代表着从直线的一个端点到另一个直线端点的距离。
- gab(间隔) - 参数可选，默认为0.代表着连线中存根开始或者端点到其他连线的距离。
Flowchart (流程图) 由垂直或者水平片段组成，参数可选。

入职第一波-jsPlumb 官方文档部分翻译