指引线leader-line库的使用

今天给大家介绍一个用于做指引线的库，叫做leader-line。简单好用，非常容易上手。

这个库是用于在二个dom元素之间，画上一条线。可以用作产品详细点补充说明，也有用作相关关系表明。这样说有点空洞，先看一下几个示例。

引入与简单使用

leader-line库不依赖任何库，你无需引入jquery，vue，或其他的第三方库。

一个简单的案例

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

使用场景

可以用于产品，详细点的介绍，

可以用于二个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: '', }

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

英文文档

如果要线动起来

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} });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

GitHub地址

官网地址

CDN引用地址

首发地址 https://www.ebaina.com/articles/140000005139

JSON

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。