今天给大家介绍一个用于做指引线的库，叫做leader-line。简单好用，非常容易上手。 这个库是用于在二个dom元素之间，画上一条线。可以用作产品详细点补充说明，也有用作相关关系表明。这样说有点空洞，先看一下几个示例。
引入与简单使用
leader-line库不依赖任何库，你无需引入jquery，vue，或其他的第三方库。 一个简单的案例
<!DOCTYPE html> <html> <head> <title>demo</title> <meta charset=”UTF-8″> <style type=”text/css”> .container { height: 500px; width: 500px; position: relative; } .start, .end { position: absolute; display: inline-block; height: 50px; width: 50px; border: 1px solid #ddd; } .start { left: 0; top: 0; } .container .end { right: 0; bottom: 0; } </style> </head> <body> <div class=”container”> <div class=”start” id=”start”>start</div> <div class=”end” id=”end”>end</div> </div> <script src=”./leader-line.min.js”></script> <script type=”text/javascript”> new LeaderLine( document.getElementById(start), document.getElementById(end) ); </script> </body> </html>使用场景
可以用于产品，详细点的介绍， 
可以用于二个dom元素的相关关系，上下游关系
也可以画轨迹 
配置参数
leader-line的基本用法就是使用构造器，第一个参数是开始节点，第二个参数是结束节点，第三个参数是配置参数，一个json对象 第一个节点和第二个节点可以是div，button，ul， td，text，甚至是在iframe json的配置如下图，官网有很清晰的解释，还有配图，这里就不多做解释了。
{ color:, size: , path:, startSocket: , endSocket: , startSocketGravity:, endSocketGravity: , startPlug: , endPlug: , startPlugColor: , endPlugColor: , startPlugSize: , endPlugSize: , outline: , outlineColor: , outlineSize: , startPlugOutline: , endPlugOutline: , startPlugOutlineColor: , endPlugOutlineColor: , startPlugOutlineSize: , endPlugOutlineSize: , dash: , len: , gap: , animation: , gradient: , startColor: , endColor: , dropShadow: , dx: , dy: , blur: , color: , opacity: , }英文文档
如果要线动起来
var leader_line = new LeaderLine( document.getElementById(start), document.getElementById(end), { startPlugColor: #ff3792, // 渐变色开始色 endPlugColor: #fff386,// 渐变色结束色 gradient: true, // 使用渐变色 dash: { // 虚线样式 animation: true,// 让线条滚动起来 } } ); // 重新设置样式 leader_line .setOptions({ color: #f7f5ee, dropShadow: {dx: 0, dy: 3} });
GitHub地址 官网地址 [CDN引用地址](
免责声明：文章内容来自互联网，本站不对其真实性负责，也不承担任何法律责任，如有侵权等情况，请与本站联系删除。
转载请注明出处：指引线leader-line库的使用 https://www.yhzz.com.cn/a/13575.html