指引线插件-leader-line
xdf 业务插件
介绍
今天给大家介绍一个用于做指引线的库leader-line (opens new window) 这个库是用于在二个dom元素之间，画上一条线。一般用作与相关关系表明。这样说有点不太理解，下面为大家详细的介绍一下。
# 使用场景
1、可以用于产品的介绍
2、可以用于二个dom元素的相关关系，上下游关系
3、也可以用于画抛物线
# 使用方法
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# 配置参数
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: '',
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37