简书 jsPlumb使用(2)-木庄网络博客

（3）具体连线的方法

jsPlumbs.ready(function() {
     jsPlumbs.connect({
         source: '开始id',
         target: '结束id',
         anchor: [Right, Left],
         endpoint: ["Dot"],
         connector: ["Bezier", { curviness: '150' }],
         paintStyle: {
                 stroke: "#9254DE",
                 strokeWidth: 1.5,
                 dashstyle: '3',
               },
         endpointStyle: {
                 fill: "#120e3a",
                 outlineStroke: "#120e3a",
                 outlineWidth: 0,
               },
     });
})

注释

1.jsPlumbs.connect：连线的具体方法，可循环调用连接多条线
2.source与target：进行连接的两个节点设置的id
3.anchor连接线端点的位置：Left Right Top Bottom Center TopRight TopLeft BottomRight BottomLeft
4.Endpoint设置端点类型：Dot 圆点、Rectangle 矩形、Image 图像、Blank 空白
5.connector连线类型：Bezier 贝塞尔曲线（通过{ curviness: '150' }可以设置弧度，默认150）、Straight 直线、Flowchart 流程图、State Machine 状态机
6.paintStyle：设置连接线的样式，strokeWidth设置粗细，dashstyle控制是否是虚线
7.endpointStyle：设置端点的样式

（4）清除连接（用于清除之前所有的连线）