jsplumb 系列（一）

最新推荐文章于 2025-04-29 14:31:57 发布

念雅

最新推荐文章于 2025-04-29 14:31:57 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_43865681/article/details/117291835

版权

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了jsPlumb库在HTML页面中创建图形化连接的基础用法，包括连接源与目标节点、设置连接样式、定义端点形状以及拖动节点。同时展示了如何更改连接线的颜色、宽度以及端点填充色，还涉及到了通过jQuery UI实现节点大小调整。此外，还提到了删除连接线和节点的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsplumb中文基础教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <title>Document</title>
  <style>
    #diagramContainer {
      padding: 20px;
      width: 80%;
      height: 200px;
      border: 1px solid gray;
    }

    .item {
      height: 80px;
      width: 80px;
      border: 1px solid blue;
      float: left;
    }
  </style>
</head>
<body>
<div id="diagramContainer">
  <div id="item_left" class="item"></div>
  <div id="item_right" class="item" style="margin-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连线的样式有四种
    // Bezier: 贝塞尔曲线
    // Flowchart: 具有90度转折点的流程线
    // StateMachine: 状态机
    // Straight: 直线
    jsPlumb.draggable('item_left')//让节点可以被拖动
    jsPlumb.draggable('item_right')
  })

</script>
</body>
</html>

修改连线样式

<script>
  /* global jsPlumb */
  jsPlumb.ready(function () {
    let common = {
      endpoint: 'Rectangle',
      connector: ['Bezier'],
      anchor: ['Left', 'Right']
    }

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

    jsPlumb.draggable('item_left')//让节点可以被拖动
    jsPlumb.draggable('item_right')
  })
</script>

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

var common = {
paintStyle: {
          fill: 'white',
          outlineStroke: 'blue',
          strokeWidth: 3
        },
        hoverPaintStyle: {
          outlineStroke: 'lightblue'
        },
        connectorStyle: {
          outlineStroke: 'green',
          strokeWidth: 1
        },
        connectorHoverStyle: {
          strokeWidth: 2
        }
 }

节点改变大小

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

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

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

删除连接线

jsPlumb.deleteConnection(conn)// 删除连接线
jsPlumb.remove('item_left')// 删除节点