墙裂推荐指引线的JS库leader-line

近期项目需要一个流程图需要划线的组件发现一个好用的开源JS组件 leader-line

LeaderLine：Draw a leader line in your web page.Document and Examples https://anseki.github.io/leader-line/

简单说明一下就是各种连线的方式基本都可以实现比如线的连接位置、线条的样式、线条上写字、以及

箭头各种可以自定义的连线方式。

下面亲自案例试验下：效果如下：




<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <style type="text/css">
#container div{width:100px;height:60px;}
.F{background: red;float: left;margin-left:80px}
.P{background:green;float:left;margin-left:80px}
.V{background:yellow;float:left;margin-left:80px}
.D{background: gray;float:left;margin-left:80px}
.T{background: blue;float:left;margin-left:80px}
</style>
</head>
<body>
    <div class="container" id="container">
        <div class="F" id="F">F</div>
        <div class="P" id="P">P</div>
		<div class="V" id="V">V</div>
		<div class="D" id="D">D</div>
		<div class="T" id="T">T</div>
    </div>
	<!--script src="/leader-line.min.js"></script-->
	<script src="https://p.ampmake.com/fed/text/javascript/96a47df10f7abedf471b2796b281ac27.js"></script>
    <script type="text/javascript">	
	var startF = document.getElementById('F'),
    endP = document.getElementById('P');
    var FP=new LeaderLine(
	startF, endP, 
	{color: 'red', size: 1,middleLabel: '80',},
	);
   FP.setOptions({startSocket: 'right', endSocket: 'left',path:'straight',middleLabel: '80',});
   var startP = document.getElementById('P'),
    endV = document.getElementById('V');
    var PV=new LeaderLine(startP, endV, {color: 'red', size: 1});
    PV.setOptions({startSocket: 'right', endSocket: 'left',path:'straight',middleLabel: '80',});
    var endD = document.getElementById('D');
    var PD=new LeaderLine(startP, endD, {color: 'red', size: 1});
   PD.setOptions({startSocket: 'bottom', endSocket: 'bottom',path:'grid',middleLabel: '80',});     
	var startV = document.getElementById('V'),
    endD = document.getElementById('D');
    var VD=new LeaderLine(startV, endD, {color: 'red', size: 1});
    VD.setOptions({startSocket: 'right', endSocket: 'left',path:'straight'});  
   	var startD = document.getElementById('D'),
    endT = document.getElementById('T');
    var DT=new LeaderLine(startD, endT, {color: 'red', size: 1});
    DT.setOptions({startSocket: 'right', endSocket: 'left',path:'straight'});   
    </script>
</body>
</html>

leader-line 划线的组件开源JS组件流程图

技术碎片

发表评论 取消回复

发表评论取消回复