JSで要素同士に線や矢印を引けるライブラリ"LeaderLine"

LeaderLineとは

矢印や線の描画、範囲の描画が簡単に行えるオープンソース・ソフトウェアです。

https://anseki.github.io/leader-line/

使用方法

１、ホームページでフォルダのダウンロードを行います

２、ダウンロードしたフォルダの"leader-line.min.js"をwebページに埋め込みます

test.html

<script src="leader-line.min.js"></script>

３、矢印や線でつなぎたい要素をLeaderLineのコンストラクタに渡す

test.js

new LeaderLine(
  document.getElementById('要素1'),
  document.getElementById('要素2')
);

使用例を一部紹介します

１、ノーマル

test.js

new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

２、サイズや形、色の変更

test.js

new LeaderLine(element1, element2, {
  startPlugColor: '#1a6be0',
  endPlugColor: '#1efdaa',
  gradient: true
});
new LeaderLine(element2, element3, {dash: {animation: true}});
new LeaderLine(element4, element5, {dropShadow: true});
new LeaderLine(element5, element6, {dash: true});

３、一定条件に矢印がひかれる

test.js

new LeaderLine(LeaderLine.mouseHoverAnchor(startElement), endElement);

４、範囲を描画できる

test.js

new LeaderLine(startElement, LeaderLine.areaAnchor(endElement));

最後に

この他にもスクロールによる要素の位置の変更にも対応できたり、
div要素だけでなくbutton,ul,text,circle,,,などにも線をつなげることができます。詳しくはこちら
使ってみて便利だったので紹介させていただきました。