jsplumb 中文教程-白红宇

jsplumb 中文教程

阅读量：5745 次

发布时间：2019-06-18

本文共 9355 字，大约阅读时间需要 31 分钟。

https://wdd.js.org/jsplumb-chinese-tutorial/#/

后续更新会在仓库：

本文的图片是托管于七牛云的，由于使用的是测试域名，可能不知道哪天，图片就无法显示了。不过每个例子都有简单的在线demo, demo剩千图，还是能看懂的。

你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。

该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。 jsPlumb由他积极开发。作为许多优秀的开发人员，他似乎更喜欢开发代码而不是编写教程，这就是为什么我提供一个简单的入门教程。

那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！

Souce 源节点

Target 目标节点

Anchor 锚点

Endpoint 端点

Connector 连接

demo:

jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用于建立连线

参数说明： jsPlumb.connect(config) return connection

参数	参数类型	是否必须	说明
source	String,Object,Endpoint	是	连线源的标识，可以是id, element, 或者Endpoint
target	String,Object,Endpoint	是	连线目标的标识，可以是id, element, 或者Endpoint
endpoint	String	可选	端点类型，形状

demo:

使用draggable可以让节点被拖动，

demo:

可以通过connector去设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。

jsplumb连线的样式有四种

Bezier: 贝塞尔曲线

Flowchart: 具有90度转折点的流程线

StateMachine: 状态机

Straight: 直线

demo:

很多连线都是相同设置的情况下，可以将配置抽离出来，作为一个单独的变量，作为connect的第二个参数传入。实际上connect的第二个参数会和第一个参数merge，作为一个整体。

demo:

例如给连线设置不同的颜色，设置不同的粗细之类的。

jsPlumb.connect({  source: 'item_left',  target: 'item_right',  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }}, common)

demo:

箭头实际上是通过设置overlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。一根连线是可以添加多个箭头的。

overlays也是一个比较重要的概念，overlays可以理解为遮罩层。遮罩层不仅仅可以设置箭头，也可以设置其他内容。

overlays有五种类型，下面给出简介。具体使用方法参见

Arrow 一个可配置的箭头

Label 标签，可以在链接上显示文字信息

PlainArrow 原始类型的箭头

Diamond 菱形箭头

Custom 自定义类型

jsPlumb.connect({  source: 'item_left',  target: 'item_right',  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]}, common)

demo:

addEndpoint方法可以用来增加端点，

jsPlumb.ready(function () {      jsPlumb.addEndpoint('item_left', {        anchors: ['Right']      })    })

demo:

如果你将isSource和isTarget设置成true，那么久可以用户在拖动时，自动创建链接。

jsPlumb.ready(function () {      jsPlumb.setContainer('diagramContainer')      var common = {        isSource: true,        isTarget: true,        connector: ['Straight']      }      jsPlumb.addEndpoint('item_left', {        anchors: ['Right']      }, common)      jsPlumb.addEndpoint('item_right', {        anchor: 'Left'      }, common)      jsPlumb.addEndpoint('item_right', {        anchor: 'Right'      }, common)    })

一般来说拖动创建的链接，可以再次拖动，让链接断开。如果不想触发这种行为，可以设置。

jsPlumb.importDefaults({    ConnectionsDetachable: false  })

demo:

通过设置各种 *Style来改变链接或者端点的样式。

jsPlumb.ready(function () {      jsPlumb.setContainer('diagramContainer')      var common = {        isSource: true,        isTarget: true,        connector: 'Straight',        endpoint: 'Dot',        paintStyle: {          fill: 'white',          outlineStroke: 'blue',          strokeWidth: 3        },        hoverPaintStyle: {          outlineStroke: 'lightblue'        },        connectorStyle: {          outlineStroke: 'green',          strokeWidth: 1        },        connectorHoverStyle: {          strokeWidth: 2        }      }      jsPlumb.addEndpoint('item_left', {        anchors: ['Right']      }, common)      jsPlumb.addEndpoint('item_right', {        anchor: 'Left'      }, common)      jsPlumb.addEndpoint('item_right', {        anchor: 'Right'      }, common)    })

demo:

jsplumb实际上不支持改变节点大小，实际上只能通过jquery ui resizable 方法去改变。

demo:

默认情况下，节点可以被拖动到区域外边，如果想只能在区域内拖动，需要设置containment，这样节点只能在固定区域内移动。

jsPlumb.setContainer('area-id')

demo: 网格对齐实际上是设置了grid属性，使移动只能按照固定的尺寸移动。然后用一张图作为背景铺开作为网格来实现的。

#diagramContainer {  padding: 20px;  width: 80%;  height: 400px;  border: 1px solid gray;  background-image: url(http://p3alsaatj.bkt.clouddn.com/20180227163310_1bVYeW_grid.jpeg);  background-repeat: repeat;}jsPlumb.draggable('item_left', {  containment: 'parent',  grid: [10, 10]})

demo:

// 请单点击一下连接线, jsPlumb.bind('click', function (conn, originalEvent) {  if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {    jsPlumb.detach(conn)  }})

jsPlumb支持许多事件

jsPlumb Events列表

connection

connectionDetached

connectionMoved

click

dblclick

endpointClick

endpointDblClick

contextmenu

beforeDrop

beforeDetach

zoom

Connection Events

Endpoint Events

Overlay Events

Unbinding Events

参考用法参考：

demo:

// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线console.log('3 秒后移除左边节点包括它的连线')setTimeout(function () {  jsPlumb.remove('item_left')}, 3000)

注意remove方法有些情况下是无法删除干净连线的，

demo:

初始化数据后，给节点加上了endPoint, 如果想编码让endPoint链接上。需要在addEndpoint时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点链接上。建议使用给每个断点都加上唯一的uuid，这样以后链接就方便多了。

jsPlumb.addEndpoint('item_left', {  anchors: ['Right'],  uuid: 'fromId'})jsPlumb.addEndpoint('item_right', {  anchors: ['Left'],  uuid: 'toId'})console.log('3 秒后建立连线')setTimeout(function () {  jsPlumb.connect({ uuids: ['fromId', 'toId'] })}, 3000)

demo:

有时候当用户从A端点链接到B端点时，需要做一些检查，如果不符合条件，就不让链接建立。

// 当链接建立前jsPlumb.bind('beforeDrop', function (info) {  var a = 10  var b = 2  if (a < b) {    console.log('链接会自动建立')    return true // 链接会自动建立  } else {    console.log('链接取消')    return false // 链接不会建立，注意，必须是false  }})

默认情况下，maxConnections的值是1，也就是一个端点最多只能拉出一条连线。

你也可以设置成其他值，例如5，表示最多可以有5条连线。

如果你想不限制连线的数量，那么可以将该值设置为-1

var common = {  isSource: true,  isTarget: true,  connector: ['Straight'],  maxConnections: -1}jsPlumb.addEndpoint('item_left', {  anchors: ['Right']}, common)

demo:

整个节点作为source或者target，并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。

jsPlumb的锚点分为四类

Static 静态固定位置的锚点

Dynamic jsPlumb自动选择合适的锚点，动态锚点

Perimeter 边缘锚点，会根据节点形状去改变位置

Continuous 根据节点位置，自动调整位置的锚点

详情：

window.jsPlumb.ready(function () {      var jsPlumb = window.jsPlumb      jsPlumb.makeSource('A', {        endpoint:"Dot",        anchor: "Continuous"      })      jsPlumb.makeTarget('B', {        endpoint:"Dot",        anchor: "Continuous"      })      jsPlumb.draggable('A')      jsPlumb.draggable('B')    })

demo:

window.jsPlumb.ready(function () {      var jsPlumb = window.jsPlumb      jsPlumb.setContainer("diagramContainer")      jsPlumb.connect({        source: 'A',        target: 'B',        endpoint: 'Dot'      })      var baseZoom = 1      setInterval(() => {        baseZoom -= 0.1        if (baseZoom < 0.5) {          baseZoom = 1        }        zoom(baseZoom)      }, 1000)    })    function zoom (scale) {      $("#diagramContainer").css({          "-webkit-transform": `scale(${scale})`,          "-moz-transform": `scale(${scale})`,          "-ms-transform": `scale(${scale})`,          "-o-transform": `scale(${scale})`,          "transform": `scale(${scale})`      })      jsPlumb.setZoom(0.75);    }

参考地址:

jsPlumb的配置项有很多，如果你不主动去设置，那么jsPlumb就使用默认的配置。

另外建议你不要修改默认的配置，而是使用自定义的方式。

另外一点要注意，如果你想修改默认配置，那么使用importDefaults方法，并且属性的首字母要大写。如果你用addEndpoint, 并使用类似maxConnections的属性，那么首字母要小写。

参见demo: demo上需要你自己手动拖动创建链接。

var common = {  isSource: true,  isTarget: true,  connector: ['Straight'],  maxConnections: -1}jsPlumb.addEndpoint('item_left', {  anchors: ['Right']}, common)

Anchor : "BottomCenter",Anchors : [ null, null ],ConnectionsDetachable   : true,ConnectionOverlays  : [],Connector : "Bezier",Container : null,DoNotThrowErrors  : false,DragOptions : { },DropOptions : { },Endpoint : "Dot",Endpoints : [ null, null ],EndpointOverlays : [ ],EndpointStyle : { fill : "#456" },EndpointStyles : [ null, null ],EndpointHoverStyle : null,EndpointHoverStyles : [ null, null ],HoverPaintStyle : null,LabelStyle : { color : "black" },LogEnabled : false,Overlays : [ ],MaxConnections : 1,PaintStyle : { strokeWidth : 8, stroke : "#456" },ReattachConnections : false,RenderMode : "svg",Scope : "jsPlumb_DefaultScope"

你也可以从jsPlumb.Defaults对象中查看默认的配置。如果你想要更加个性化的设置连线，那么最好可以了解一下，它的默认设置有哪些，从而方便的来完成自己的设计需求。

默认参数的简介:

Anchor 锚点，即端点链接的位置

Anchors 多个锚点 [源锚点，目标锚点].

Connector 链接

ConnectionsDetachable 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开。

Container 连线的容器

DoNotThrowErrors 是否抛出错误

ConnectionOverlays 链接遮罩层

DragOptions 拖动设置

DropOptions 拖放设置

Endpoint 端点

Endpoints 数组形式的，[源端点，目标端点]

EndpointOverlays 端点遮罩层

EndpointStyle 端点样式

EndpointStyles [源端点样式，目标端点样式]

EndpointHoverStyle 端点鼠标经过的样式

EndpointHoverStyles [源端点鼠标经过样式，目标端点鼠标经过样式]

HoverPaintStyle 鼠标经过链接线时的样式

LabelStyle 标签样式

LogEnabled 是否启用日志

Overlays 连接线和端点的遮罩层样式

MaxConnections 端点最大连接线数量默认为1，设置成-1可以表示无数个链接

PaintStyle 连线样式

ReattachConnections 端点是否可以再次重新链接

RenderMode 渲染模式，默认是svg

Scope 作用域，用来区分哪些端点可以链接，作用域相同的可以链接

// 可以使用importDefaults，来重写某些默认设置jsPlumb.importDefaults({  PaintStyle : {    strokeWidth:13,    stroke: 'rgba(200,0,0,0.5)'  },  DragOptions : { cursor: "crosshair" },  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],  EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }]});

项目地址：，将views目录下的drag-drop-demo.html拖放到浏览器中，就可以愉快的玩耍了。

从该demo中除了可以学到基本的jsplumb的api, 也可以学到其他的关于拖放的知识点。其中目前只做了语音节点的拖放，其他的还时间做。该demo没有使用webpack打包，代码写的有点乱，大家凑合着看，有问题可以提issue, 或者评论。