指引線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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。