繪製指引線的JS庫leader-line

時間 2020-09-20

標籤繪製引線 leader line 欄目 JavaScript 简体版

原文原文鏈接

前言

以前看到一篇推薦Magi這個搜索引擎的新聞，對於這個搜索引擎是否好用我們不予置評，可是我在這個搜索引擎上面發現了一個好玩的前端功能。javascript

如上圖，將鼠標浮動到學習來源上時，會展現一堆指引線。html

本博客的右側文章目錄也集成了這個功能，諸位能夠玩一玩。前端

當時以爲這個功能很好玩，並且前端領域其實這種指引線仍是有不少用處的，好比新手指引，功能指引，腦圖之類的功能。java

鑑於之後極可能須要用到，當時就調試了一下這個網站，發現使用了leader-line這個庫。git

而後百度了一下，發現網上也沒什麼人介紹這個庫，因此這裏寫個安利文吧。github

LeaderLine

這個庫在Github上的介紹很簡單：web

Draw a leader line in your web page.

意思就是在網頁上畫指引線。api

使用起來也很是方便：數組

<script src="leader-line.min.js"></script>
<script> new LeaderLine( document.getElementById('start'), document.getElementById('end') ); </script>

new一個LeaderLine對象便可，只須要輸入兩個dom元素節點而已。markdown

完整示例代碼

<html lang="zh-cn">
<head>
  <title>test</title>
  <style>
    #start {
      left: 0;
      top: 0;
    }
    #end {
      right: 0;
      bottom: 0;
    }
    #start,#end{
      position: fixed;
      width: 60px;
      height: 60px;
      background-color: red;
      color: #fff;
      line-height: 60px;
      text-align: center;
    }
  </style>
</head>
 
<body>
  <div id="start">開始點</div>
  <div id="end">結束點</div>
  <script src="https://magi.com/assets/thirdparty/leader-line.min.js"></script>
  <script>
    new LeaderLine(
      document.getElementById('start'),
      document.getElementById('end')
    );
  </script>
</body>
</html>

View Code

固然也能夠輸入更多的參數來繪製各類各樣的指引線：

具體的使用方法能夠去查看lead-line的Github地址，這裏就不贅述了。

並且這個庫自己就提供了hover繪製指引線的功能，而且能偏移起始點和結束點的位置，同時當起始點和結束點變更時，也能夠實時調整指引線。

這兩個功能能夠將鼠標hover到右側的文章目錄上，而後滾動鼠標輪來查看效果。

原理

這個庫的實現原理其實很簡單，根據提供的兩個dom元素，找到這兩個dom元素的位置，而後經過svg在body下繪製一條指引線。

這個庫雖然只是個js，可是在引入後會將一些樣式寫到一個id爲leader-line-defs的svg元素內。

這些指引線使用了一個叫leader-line的樣式class，若是繪製指引線時出現遮擋狀況，能夠經過調整這個樣式class的z-index或者position來處理。

能夠預想一下，這些指引線都是position:absolute的，由於position:fixed的元素在滾動時確定會存在問題。

原理都講了，因此諸位請在頁面有fixed元素或者absolute元素時，仔細查看指引線是否會與這些元素產生遮擋。

示例代碼

這裏就以我博客右側目錄集成的指引線功能做爲示例代碼：

// 生成目錄上的指引線
function createCatalogLeaderLine($h2Arr) { // $h2Arr是一個dom元素集合，注意不是數組哦
  // lines的目的是爲了保留leader-line變量，方便重繪
  var lines = {};
  var options = {
    color: '#5bf', // 指引線顏色
    endPlug: "disc", // 指引線結束點的樣式
    size: 2, // 線條尺寸
    startSocket: "left", //在指引線開始的地方從元素左側開始
    endSocket: "right", //在指引線開始的地方從元素右側結束
    hide:true // 繪製時隱藏，默認爲false，在初始化時可能會出現閃爍的線條
  };
  [].slice.call($h2Arr).forEach(function (item) {
    var anchor = LeaderLine.mouseHoverAnchor(document.getElementById('catalog' + item.id), 'draw', {
      // 指引線動效
      animOptions: {
        duration: 500
      },
      // 清除默認的hover樣式
      hoverStyle:{
        backgroundColor: null
      },
      // 起始點樣式，這裏爲了清除默認樣式
      style: {
        paddingTop: null,
        paddingRight: null,
        paddingBottom: null,
        paddingLeft: null,
        cursor: null,
        backgroundColor: null,
        backgroundImage: null,
        backgroundSize: null,
        backgroundPosition: null,
        backgroundRepeat: null
      },
      // 當起始點被hover時調用的事件
      onSwitch: function (event) {
        var line = lines[item.id]
        // 浮動上去就重繪
        if (event.type == "mouseenter") {
          line.position();
        }
      }
    });
    lines[item.id] = new LeaderLine(
      anchor,
      document.getElementById(item.id),
      options
    );
  })
  // 滾動時重繪指引線
  $(window).scroll(function () {
    for (var key in lines) {
      lines[key].position()
    }
  })
}