jsplumb 中文教程

时间 2019-11-06

标签 jsplumb 中文教程繁體版

原文原文链接

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

1. jsplumb 中文基础教程

后续更新会在仓库：https://github.com/wangduanduan/jsplumb-chinese-tutorial.gitcss

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

1.1. 什么是jsplumb？

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

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

1.2. jsplumb能干什么？

那么若是你应该使用它取决于你想用jsPlumb作什么。该框架适用于必须绘制图表的Web应用程序，例如相似于Visio的应用程序或工做流程设计器等。因为图表项目和链接的全部参数都是很是精细可控的，所以您能够绘制您能够想到的任何类型的图表的！jquery

1.3. 基本概念

Souce 源节点
Target 目标节点
Anchor 锚点
Endpoint 端点
Connector 链接

2. 基础demos

2.1. 链接两个节点

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/01.htmlwebpack

jsPlumb.ready方法和jquery的ready方法差很少的功能，jsPlumb.connect用于创建连线git

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="margin-left:50px;"></div> </div> <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Dot' }) }) </script>

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

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

>>> connect方法详情web

2.2. 可拖动节点

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/02.html

使用draggable可让节点被拖动，draggable方法参考

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;"></div> </div> <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle' }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.3. 链接的其余参数

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/03.html

能够经过connector去设置连接线的形状，如直线或者曲线之类的。anchor能够去设置锚点的位置。

jsplumb连线的样式有四种

Bezier: 贝塞尔曲线
Flowchart: 具备90度转折点的流程线
StateMachine: 状态机
Straight: 直线

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;"></div> </div> <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle', connector: ['Bezier'], anchor: ['Left', 'Right'] }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.4. 设置链接的默认值

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/04.html

不少连线都是相同设置的状况下，能够将配置抽离出来，做为一个单独的变量，做为connect的第二个参数传入。实际上connect的第二个参数会和第一个参数merge，做为一个总体。

<script> /* global jsPlumb */ jsPlumb.ready(function () { var common = { endpoint: 'Rectangle', connector: ['Bezier'], anchor: ['Left', 'Right'] } jsPlumb.connect({ source: 'item_left', target: 'item_right' }, common) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.5. 给链接加上样式

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/05.html

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

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

2.6. 给链接加上箭头

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/06.html

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

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

overlays有五种类型，下面给出简介。具体使用方法参见 https://jsplumbtoolkit.com/community/doc/overlays.html

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)

2.7. 增长一个端点

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/07.html

addEndpoint方法能够用来增长端点，具体使用请看

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

2.8. 拖动建立链接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/08.html

若是你将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
  })

2.9. 给端点增长样式

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/09.html

经过设置各类 *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)
    })

2.10. 节点改变尺寸

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/10.html

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

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;"></div> </div> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="./lib/jquery.jsplumb.js"></script> <script> /* global jsPlumb, $ */ $('.item').resizable({ resize: function (event, ui) { jsPlumb.repaint(ui.helper) } }) jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle' }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.11. 限制节点拖动区域

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/11.html

默认状况下，节点能够被拖动到区域外边，若是想只能在区域内拖动，须要设置containment，这样节点只能在固定区域内移动。

jsPlumb.setContainer('area-id')

2.12. 节点网格对齐

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/12.html 网格对齐其实是设置了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]
})

2.13. 给连接添加点击事件：点击删除连线

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/13.html

// 请单点击一下链接线, 
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

参考用法参考：https://jsplumbtoolkit.com/community/doc/events.html#jsPlumbEvents

2.14. 删除节点，包括节点相关的链接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/14.html

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

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

2.15. 经过编码链接endPoint

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/15.html

初始化数据后，给节点加上了endPoint, 若是想编码让endPoint连接上。须要在addEndpoint时，就给该断点加上一个uuid, 而后经过connect()方法，将两个断点连接上。建议使用node-uuid给每一个断点都加上惟一的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)

2.16. 链接前的检查，判断是否创建链接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/16.html

有时候当用户从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
  }
})

2.17. 一个端点如何拖拽出多条连线

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

你也能够设置成其余值，例如5，表示最多能够有5条连线。

若是你想不限制连线的数量，那么能够将该值设置为-1

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

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

2.18. 整个节点做为source或者target

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/18.html

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

jsPlumb的锚点分为四类

Static 静态固定位置的锚点
Dynamic jsPlumb自动选择合适的锚点，动态锚点
Perimeter 边缘锚点，会根据节点形状去改变位置
Continuous 根据节点位置，自动调整位置的锚点

详情：https://jsplumbtoolkit.com/community/doc/anchors.html

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')
    })

2.19. 节点缩放

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/19.html

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

3. jsPlumb默认配置简介

参考地址: https://jsplumbtoolkit.com/community/doc/defaults.html

jsPlumb的配置项有不少，若是你不主动去设置，那么jsPlumb就使用默认的配置。

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

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

参见demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/17.html 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" }]
});