jsplumb 中文教程 连线绘图工具库介绍 附简单在线demo与实战项目

最新推荐文章于 2024-03-14 11:52:44 发布
最新推荐文章于 2024-03-14 11:52:44 发布
阅读量1k 收藏 6
点赞数
文章标签： 前端 数据库 ui ViewUI
原文链接：https://segmentfault.com/a/1190000013422507
版权

1. jsplumb 中文基础教程

后续的更新会直接在github上，如需查看最新文档，请直接访问原始仓库。
另外用了七牛的测试域名做图片托管，现在发现很多图片都无法显示了，建议直接参看git仓库里的, 仓库中的示例图片不是用的七牛云，都能正常显示。
仓库地址：https://github.com/wangduandu...

1.1. 什么是jsplumb？

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

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

1.2. jsplumb能干什么？

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

1.3. 基本概念

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

2. 基础demos

注意：点击标题即可查看demo的在线效果

2.1. 连接两个节点

demo: https://wdd.js.org/jsplumb-ch...

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

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

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

>>> connect方法详情

2.2. 可拖动节点

demo: https://wdd.js.org/jsplumb-ch...

使用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-ch...

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

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

很多连线都是相同设置的情况下，可以将配置抽离出来，作为一个单独的变量，作为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-ch...

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

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

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

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

addEndpoint方法可以用来增加端点，具体使用请看

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

2.8. 拖动创建连接

demo: https://wdd.js.org/jsplumb-ch...

如果你将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-ch...

通过设置各种 *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-ch...

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

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

jsPlumb.setContainer('area-id')

2.12. 节点网格对齐

demo: https://wdd.js.org/jsplumb-ch...
网格对齐实际上是设置了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. 点击删除连线

// 单点击了连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (confirm('确定删除所点击的链接吗？')) {
    jsPlumb.detach(conn)
  }
})

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

// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线
jsPlumb.remove(nodeId)

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

2.15. 通过编码连接endPoint

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

jsPlumb.addEndpoint(id, {
    anchors: 'Top',
    uuid: uuid() // 这里需要唯一的一个Id, 
}, config)

jsPlumb.connect({ uuids: [fromId, toId] })

2.16 一个端点如何拖拽出多条连线？

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

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

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

参见 https://wdd.js.org/jsplumb-ch...

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

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

图片描述

3. 有没有稍微复杂一点，带有拖放的栗子？

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

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

4. 实战项目 一个可视化IVR编辑器

项目地址：https://github.com/wangduandu... 该项目还在开发完善中，不过已经具备基本功能。

该项目是用webpack打包的项目，所有文件都在src目录下。

5. 参考资源

扫码订阅我的微信公众号：洞香春天。每天一篇技术短文，让知识不再高冷。

weixin_34253539
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsplumb中文文档+示例项目
04-25
本人在用jsplumb时，苦于网上找不到中文资源， 花费2天时间翻译，实在头疼。。 之前忘了吧实例放进去， 放到这儿供大家下载，大家给个幸苦分把... 望大家批评指正。
jsplumb中文
03-28
本人在用jsplumb时，苦于网上找不到中文资源， 花费2天时间翻译，实在头疼。。 放到这儿供大家下载，大家给个幸苦分把... 望大家批评指正。
jsPlumb.jsAPI阅读笔记(官方文档翻译)
dianhelan5485的博客
01-24 898
jsPlumb DOCS 公司要开始做流程控制器，所以先调研下jsPlumb，下文是阅读jsPlumb提供的document所产生的归纳总结 setup 如果不使用jQuery或者类jQuery库，则传入的节点得用id的形式,否则jsPlumb会为元素设置一个id。 jsPlumb.ready(function(){ ··· }); //or jsPlumb.bind("read...
推荐jsplumb项目：可视化连接插件
最新发布
gitblog_00040的博客
03-14 403
推荐jsplumb项目：可视化连接插件 如果你需要在网页上创建可交互的、带有连接线的对象，那么jsplumb就是你需要的工具。 什么是jsplumb？ jsplumb是一个开源JavaScript库，它提供了用于在HTML页面中绘制、管理和操作连接线的功能。这个库可以让你轻松地创建出复杂的交互式图表和布局，如流程图、网络拓扑图等。 jsplumb能用来做什么？ 借助jsplumb，你可以实现以下功...
jsplumb.js中文说明文档
liv空间站
08-05 5722
jsplumb.js中文说明文档
jsplumb中文文档地址
SmallGirlYang的博客
10-06 1274
jsplumb中文文档地址： https://github.com/wangduanduan/jsplumb-chinese-tutorial
jsPlumb连线实例
09-05
简单的jsPlumb连线实例，该教程http://blog.csdn.net/zhaoxy2850/article/details/9532143中有详细说明
jsplumb连线的demo
04-13
jsplumb的简单demo
最完整的jsPlumb流程图demo
10-15
史上最完整jsPlumb流程图实例，初始化流程图，添加删除移动节点，修改节点名称，添加删除连接线，以及保存所有节点连接线等功能！
最新官方修改jsplumbtoolkit+demo
03-06
修改了最新官方jsplumbtoolkit文件，解除域名访问限制，比原来jsplumb有更多的功能，同时为了方便理解加入了toolkit相应的demo
jsplumb中文文档
qq_21280835的博客
03-04 1359
1. jsplumb 中文基础教程 1.1. 什么是jsplumb？ 1.2. jsplumb能干什么？
jsplumb.js
08-08
jsplumb.js ,直接引入即可使用。详细使用方法参照官方文档。
jsplumb中文说明文档+demo
04-06
jsplumb中文说明文档+demo
jsplumb中文API
05-12
Jsplumb是Jquery的一个插件，它能够让你用动态的或静态的链接来连接html界面上行的元素，并且从1.1.0版本开始，提供用鼠标拖动来链接。
jsPlumb完整实例
06-24
完整的jsPlumb流程图案例，实现页面初始化流程图，添加删除移动节点，修改节点属性，添加删除连接线，以及保存所有节点连接线等功能
jspLumb中文文档（保真！）
M_mfy的博客
06-15 607
mirrors / wangduanduan / jsplumb-chinese-tutorial · GitCode
详解js中构造流程图的核心技术JsPlumb
小飞侠的博客
12-19 350
项目里面用到了Web里面的拖拽流程图的技术JsPlumb，其实真不算难，不过项目里面用HTML做的一些类似flash的效果，感觉还不错，在此分享下。 一、效果图展示 1、从左边拖动元素到中间区域，然后连线 2、连线类型可以自定义：这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等 商城系...
jsplumb删除连线
07-28
要删除 jsPlumb 中的连线，可以使用 `jsPlumb.detach()` 方法。该方法用于从两个元素之间删除连接。 下面是一个示例代码，展示如何使用 `jsPlumb.detach()` 方法删除连线： ```javascript // 获取连接的 ID var connectionId = "connection1"; // 删除连接 jsPlumb.detach(connectionId); ``` 在上面的示例中，我们通过指定连接的 ID 来删除连接。你可以在创建连接时保存连接的 ID，并在需要删除连接时使用。 另外，你还可以使用 `jsPlumb.deleteConnection()` 方法删除连接。这个方法与 `jsPlumb.detach()` 方法类似，也是用于删除连接。 ```javascript // 获取连接的 ID var connectionId = "connection1"; // 删除连接 jsPlumb.deleteConnection(connectionId); ``` 希望能帮到你！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值