jsplumb设置锚点_jsplumb 中文教程

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

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

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

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

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

Souce 源节点

Target 目标节点

Anchor 锚点

Endpoint 端点

Connector 连接

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

jsPlumb.ready(function () {

jsPlumb.connect({

source: 'item_left',

target: 'item_right',

endpoint: 'Dot'

})

})

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

参数参数类型是否必须说明

source

String,Object,Endpoint

是

连线源的标识，可以是id, element, 或者Endpoint

target

String,Object,Endpoint

是

连线目标的标识，可以是id, element, 或者Endpoint

endpoint

String

可选

端点类型，形状

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

jsPlumb.ready(function () {

jsPlumb.connect({

source: 'item_left',

target: 'item_right',

endpoint: 'Rectangle'

})

jsPlumb.draggable('item_left')

jsPlumb.draggable('item_right')

})

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

jsplumb连线的样式有四种

Bezier: 贝塞尔曲线

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

StateMachine: 状态机

Straight: 直线

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

})

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

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

})

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

jsPlumb.connect({

source: 'item_left',

target: '