jsplumb介绍

更新时间：2024-06-23 22:26:01 阅读量：综合文库文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

jsPlumb jquery推荐度：
相关推荐

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进行代码托管。

官方示例：http://morrisonpitt.com/jsPlumb/html/demo.html 代码地址：http://code.google.com/p/jsplumb/ Jsplumb介绍地址：http://jsplumb.tumblr.com/ 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 )：链接的一端的可视化表示，您可以创建并可以链接他们；您可以连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认

让他们支持拖拽，或者您可以直接使用jsPlumb.connect()在创建链接时直接创建它们。

类型: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)

这些都是可以在若干地点之一定位的锚点，当你每次移动一个元素时，会自动选择一个最合适的位置，没有特殊的语法来创建一个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有三个端点实现，点、矩形和图形，你可以指定端点的属性，在jsPlumb.connect时指定属性，或者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：一个三角形箭头，没有折回点

七．示例

1. Connection示例