jsplumb 绘制页面链接线

最新推荐文章于 2024-06-02 10:40:01 发布

xunbaogang

最新推荐文章于 2024-06-02 10:40:01 发布

阅读量5.1k

点赞数

分类专栏： # JavaScript # 前端 HTML前端设计文章标签： jsplumb

本文链接：https://blog.csdn.net/xunbaogang/article/details/82782217

版权

HTML前端设计同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

最近公司打算实现通用的流程设计，对比之前公司有一套源码，发现它采用的是FlowDesign来实现的，但从晚上查找之后发现它实际上是采用了jsplumb 来实现流程绘制的，这也不难理解，毕竟jsplumb 是通用的程序，FlowDesign只能算是jsplumb的具体使用，

FlowDesign 的地址是http://flowdesign.leipi.org/

Jsplumb官网：https://jsplumbtoolkit.com

GitHub：https://github.com/sporritt/jsplumb/

jsplumb 的概念中主要分为四部分：参照jsplumb介绍的文档写的

锚(Anchor)：一个位置，放置端点的地方，相对于一个元素的来源，您不需要自己硬编码来创建它，jsPlumb提供给您各种功能，您只需要按照您的需要创建它就可以了。它没有可视化的显示，只是一个逻辑位置，可以使用锚的id来引用它，jsPlumb支持这样做，并且您可以使用坐标来表示[x,y,x方向,y方向]

端点(Endpoint )：链接的一端的可视化表示，您可以创建并可以链接他们；您可以让他们支持拖拽，或者您可以直接使用jsPlumb.connect()在创建链接时直接创建它们。

连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您需要使用它们时，您只需要定义它们即可。

覆盖物(Overlay)：一个UI组件，是用来是用来装饰连接器，例如标签、箭头等。

参照https://segmentfault.com/a/1190000013422507 绘制的位置图来理解

按照说明必须引用的文件如下：

在使用jsplumb来实现自己的示例程序如下：

<style>
		    #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;
			}
		
		    .item {
		      height: 80px;
		      width: 80px;
		      border: 1px solid blue;
		      float: left;
		    }
					    
			.myCssClass
			{
				color: bisque;
				background-color: red;
			}
					    
		  </style>
  
	</head>
	<body>
		 <div id="diagramContainer">
		    <div id="item_left" class="item"></div>
		    <div id="item_right" class="item" style="margin-left:300px;margin-top: 100px;"></div>
		  </div>
	</body>
	<script>
	
	  //Straight:直线，Bezier :Bezier曲线,流程图链接器 Flowchart
	
	  var common = {
        isSource:true,
        isTarget:true,
        connector: ['Bezier'],
        //paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//空的锚点风格
        endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
       
      }
	  
	  jsPlumb.ready(function(){
	  	
           //添加节点
		   jsPlumb.addEndpoint('item_left',{achors:['Right']},common)
		   jsPlumb.addEndpoint('item_right',{achors:['Left']},common)
	       	
          
       	  jsPlumb.draggable('item_left', {
			  containment: 'parent',
			  grid: [10, 10]
			})
       	  
           jsPlumb.draggable('item_right')
           
            // 单点击了连接线, 似乎不怎么好用
			jsPlumb.bind('click', function (conn, originalEvent) {
			  if (confirm('确定删除所点击的链接吗？')) {
			    jsPlumb.detach(conn)
			  }
			})
       });
       //增加拖拽，也不怎么好用
       $('.item').resizable({
	      resize: function (event, ui) {
	        jsPlumb.repaint(ui.helper)
	      }
	    })
       
       //jsPlumb.setContainer('adiagramContainer')
       
      
  </script>

显示效果如下

C#实现参考地址：http://www.cnblogs.com/sggx/p/3836432.html

xunbaogang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsplumb 绘制页面链接线

最近公司打算实现通用的流程设计，对比之前公司有一套源码，发现它采用的是FlowDesign来实现的，但从晚上查找之后发现它实际上是采用了jsplumb 来实现流程绘制的，这也不难理解，毕竟jsplumb 是通用的程序，FlowDesign只能算是jsplumb的具体使用，FlowDesign 的地址是http://flowdesign.leipi.org/Jsplumb官网：https:/...
复制链接

扫一扫