近期项目需要一个流程图需要划线的组件发现一个好用的开源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>
Вот эта информационная подборка притягивает уважение. А ещё меня изумила информация здесь https://dveriokna.dp.ua/
Благодарствую. Было исключительно привлекательно
Непогрешность Ваших размещённых статей совсем не знает границ