leader-line一個在網頁上畫指引線的庫，文檔地址
leader-line 繪制指引線部分效果圖預覽
安裝
在你的頁面引入 leader-line 依賴項（下載鏈接）
<script src="https://files.cnblogs.com/files/mggahui/leader-line.min.js"></script>
當然，也可通過npm方式安裝，不過通過npm形式安裝，使用的的時候會有一些問題，可參考文章末尾給出的解決方案
npm install leader-line -S
使用
指示線會被畫在 start 和 end 兩個元素之間
<div id="start">start</div> <div id="end">end</div> <script> new LeaderLine( document.getElementById('start'), document.getElementById('end') ); </script>
執行以上初始化代碼后，頁面效果如下
（這些指引線使用了一個叫leader-line的樣式class，如果繪制指引線時出現遮擋情況，可以通過調整這個樣式class的z-index或者position來處理。
同時我們也應該注意到：
①，避免定義全局className 為 leader-line 的樣式，避免覆蓋庫的樣式；
②，生成的 svg 指示線標簽使用了相對於 body 絕對行為 (查看leader-line 的class樣式可以看到)
）
現在我們來修改一下樣式效果，讓頁面看起來更舒服些，可以通過css 修改元素樣式和通過給 LeaderLine 構造函數傳遞參數修改樣式（此處指 leader-line 修改指示線樣式）。
其實我們也可以通過 LeaderLine 構造函數返回的實例來修改屬性，因為這個實例具有和構造函數接收參數一樣的同名屬性（除了 hide 屬性），當然我們推薦使用 setOptions 方法來修改屬性，詳情請參考文檔。
給開始（start）和結束（end）元素添加樣式后，重新運行效果如下
<style> .target { display: inline-block; background-color: #9ee7ea; padding: 12px; } #start {} #end { float: right; margin-top: 200px; } </style>
<div id="start" class="target">start</div> <div id="end" class="target">end</div>
現在，通過css樣式把 start 和 end兩個元素位置分隔的距離變大了，LeaderLine 初始化后默認會以紅色帶箭頭實線繪制指示線，現在我們試試修改指示線的樣式吧
修改指示線樣式
通過添加 dash 參數修改為虛線樣式
var startEle = document.getElementById('start'); var endEle = document.getElementById('end'); var leader_line = new LeaderLine( startEle, endEle, { dash: true, } );
讓指示線動起來
通過添加 animation 等參數，從下方開始，僅展示核心代碼部分
var leader_line = new LeaderLine( startEle, endEle, { startPlugColor: '#ff3792', // 漸變色開始色 endPlugColor: '#fff386',// 漸變色結束色 gradient: true, // 使用漸變色 dash: { // 虛線樣式 animation: true,// 讓線條滾動起來 } } );
實例的屬性和方法
setOptions 方法
leader_line.setOptions(options)
該方法接受和構造函數相同的參數選項（除了 hide 屬性）
show , hide 方法
leader_line.show([showEffectName[, animOptions]])
leader_line.hide([showEffectName[, animOptions]])
顯示或隱藏指示線 (showEffectName效果可取 'draw' 慢慢繪制效果和 'fade'淡入淡出效果)
position 方法
leader_line.position()
將 start 和 end 元素的當前位置和大小重新定位到指示線。如果您的網頁在不調整窗口大小的情況下移動或調整了元素的大小應調用此方法重新定位指示線位置
scrollableBox.addEventListener('scroll', AnimEvent.add(function() {
leader_line.position();
}), false);
remove 方法
leader_line.remove()
實例相關的svg標簽將從頁面上被刪除，leader_line 實例也被銷毀
更多方法和屬性請參考文檔。
讓指示線從開始到結束慢慢繪制出來
var leader_line = new LeaderLine( startEle, endEle, { startPlugColor: '#ff3792', // 漸變色開始色 endPlugColor: '#fff386', // 漸變色結束色 gradient: true, // 使用漸變色 dash: { // 虛線樣式 animation: true, // 讓線條滾動起來 }, hide: true, }, ); /** 顯示效果 * draw 從起點到終點繪制線條 * fade 淡入淡出 * none 無效果，即直接顯示 */ var showEffectName = 'draw'; // 動畫參數 var animOptions = { duration: 1000, //持續時長 timing: 'ease-in', // 動畫函數 } leader_line.show(showEffectName, animOptions)
注意，想實現這個效果，必須先隱藏指示線，然后再調用實例 show 方法，並控制繪制時長。即在構造函數中添加 hide 選項來影藏指示線，然后再調用show方法，繪制效果寫入 'draw'。
學習代碼
頁面效果完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>leader-line學習</title> <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> <script> var vConsole = new VConsole(); // 移動端調試工具 </script> <script src="https://files.cnblogs.com/files/mggahui/leader-line.min.js"></script> <style> .target { display: inline-block; padding: 12px; background-color: #9ee7ea; } #start {} #end { float: right; margin-top: 200px; } </style> </head> <body> <div id="start" class="target">start</div> <div id="end" class="target">end</div> <script> var startEle = document.getElementById('start'); var endEle = document.getElementById('end'); var leader_line = new LeaderLine( startEle, endEle, { startPlugColor: '#ff3792', // 漸變色開始色 endPlugColor: '#fff386', // 漸變色結束色 gradient: true, // 使用漸變色 dash: { // 虛線樣式 animation: true, // 讓線條滾動起來 }, hide: true, }, ); /** 顯示效果 * draw 繪制線條 * fade 淡入 * none 無效果，即直接顯示 */ var showEffectName = 'draw'; // 動畫參數 var animOptions = { duration: 1000, //持續時長 timing: 'ease-in', // 動畫函數 } leader_line.show(showEffectName, animOptions) </script> </body> </html>
使用 leader-line 遇到的問題
①，安裝引入依賴問題
1，在項目中直接使用 script 標簽引入的時候，會報錯 Uncaught ReferenceError: LeaderLine is not defined
2，若使用如下方式（通過 npm 安裝的），會報錯 Uncaught TypeError: leader_line__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor
import LeaderLine from 'leader-line'; const myLine = new LeaderLine( document.getElementById('start'), document.getElementById('end') );
報模塊找不到，是因為 leader-line 包文件沒有支持 es6 等模塊導出語法，整個文件就只有一個函數。
查看 leader-line node_module 包文件發現，該文件僅僅定義了一個LeaderLine 函數 ，並沒有使用任何模塊導出語句 （即沒有module.export 或者 es6 export 導出語句）
既然找到了問題產生原因，有以下對應方案解決問題
方案一
解決思想是手工在文件末尾添加es6模塊導出語句
①，把 leader-line.min.js 文件復制出來到自己項目文件中，並在文件末尾末尾添加 es6 模塊導出語句 "export default LeaderLine"，如下圖所示
②，然后在你的項目中使用import語句導入
import LeaderLine from 'leader-line'
方案二
解決思想是申明LeaderLine為全局外部變量（使用webpack 配置CDN方式）
①，在index.html文件中以script標簽形式引入leader-line.min.js 文件（因為是script引入，所以需要將文件修改為UMD模塊規范，為什么還是要改源碼呢，因為cdn引入后，在頁面上依舊使用模塊導入語句使用代碼的，如，reuqire后者import）
②，在vue.config.js文件中配置 externals 字段來申明引入外部依賴文件，配置如下所示
configureWebpack: (config) => { config.externals = { 'leader-line': 'LeaderLine', } },
③，然后在你的項目中使用import語句導入
import LeaderLine from 'leader-line'
上面兩種方案需要手動修改源碼，推薦使用下面方案三
方案三 (推薦)
使用 skeleton-loader （自定義loader）
①，npm安裝依賴
npm install skeleton-loader -D npm install leader-line -S
②，添加如下 webpack loader 配置
module: { rules: [ { test: require('path').resolve(__dirname, 'node_modules/leader-line/'), use: [{ loader: 'skeleton-loader', options: {procedure: content => `${content}export default LeaderLine`} }] } ] }
若是 vuecli3 項目，可在 vue.config.js 配置文件中添加如下配置
configureWebpack: (config) => { config.module.rules.push( { test: path.resolve(__dirname, 'node_modules/leader-line/'), use: [{ loader: 'skeleton-loader', options: {procedure: content => `${content}export default LeaderLine`} }] } ) },
③，然后在你的項目中使用import語句導入
import LeaderLine from 'leader-line'
解決方案參考鏈接
https://stackoverflow.com/questions/62932910/using-leader-line-on-vuejs
https://github.com/anseki/leader-line/issues/8
②，移動端屏幕滾動問題
可以看到，指示線繪制出來后，屏幕滾動，指示線並沒有跟隨滾動，而是固定在屏幕上啦。
究其本質，是因為leader-line 繪制的svg指示線是利用相對於 body 的 absolute 定位。而在移動端給body的布局高度為 height:100%，頁面是在body局部滾動的，所以指示線的位置相對body始終是固定的，在屏幕上看起來也就是固定不變的。
解決方案：
方案一：使得頁面的滾動是body在滾動，而不是body的局部區域滾動，即需要修改body高度為非頁面高度，同時調整布局 (修改代價比較大)
方案二：使用實例 position 方法重新定位指示線位置 （推薦）
方案三：移動svg（指示線元素）到另外一個容器中(定位基准) https://github.com/anseki/leader-line/issues/54
③，SPA應用頁面間切換問題
舉例：在 SPA（單頁面應用）中有 A，B 兩個頁面，當在 A 頁面生成 leader-line 指示線后，這個時候切換到 B 頁面，在 B 頁面依舊會顯示上一個頁面的 leader-line 指示線（由 svg 定位決定）。
原因：因為 leader-line svg 標簽相對於 body 絕對定位生成，所以即使你切換新頁面，也依舊會顯示上個頁面的 leader-line 指示線。（本質上 A，B 兩個頁面還是同一個 html 頁面上）
解決方案：
方案一：切換頁面時候，銷毀 leader_line 實例 ，即調用 leader_line.remove() 方法
方案二：切換頁面時候，隱藏 leader_line 實例 ，重新切換回來的時候，再顯示 leader_line 實例。即調用 leader_line.show() 方法，leader_line.hide() 方法
④，html2canvas不能保存生成的指示線為圖片
原因：html2canvs有些情況下會出現不能保存 svg 為圖片（具體哪些情況待定）
解決：參考 https://www.cnblogs.com/mggahui/p/14118293.html