leader-line

leader-line 是一个基于 svg 在网页上画指引线的库。

本文对 leader-line 官方文档 进行了提炼整理，方便快速上手开发。

一、安装

1. 下载插件

   npm install leader-line
   

2. 引入

   方式一

   在依赖文件夹中找到leader-line.min.js，路径可参考node_modules\_leader-line@1.0.7@leader-line\leader-line.min.js。直接使用 script 标签引入。

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

   方式二

   直接使用import LeaderLine from 'leader-line'会报错报模块找不到，是因为 leader-line 包文件没有支持 es6 等模块导出语法，整个文件就只有一个函数。

   需要把leader-line.min.js文件复制到项目文件中，并在文件末尾末尾添加导出语句 export default LeaderLine，如下：

   

然后引用该文件。

import LeaderLine from "@/plugins/leader-line.min.js";

二、配置项

仅列举了部分常用配置项，完整配置项参考官方文档。

const styleOption = {
  // 连线颜色 coral （默认） , 取值参考颜色值
  color: "coral",
  // 连线尺寸 4（默认）
  size: 10,
  // 连线类型 straight 直线 , arc 曲线 , fluid 流体线（默认） , magnet 磁铁线 , grid 折线
  path: "fluid",

  // 连线边框显示 false （默认）
  outline: true,
  // 连线边框颜色 indianred （默认） , 取值参考颜色值
  outlineColor: "rgba(0,255,255,1)",

  // 连线使用虚线 true 开启 ， false 不开启（默认）
  dash: {
    // 绘制线的长度 'auto'=size*2
    len: "auto",
    // 绘制线之间的间隙 'auto'=size
    gap: "auto",
    // 线条滚动 true 是(或者{duration: 1000, timing: 'linear'}，详见动画选项)， false 否（默认）
    animation: {
      duration: 1000,
      timing: "linear",
    },
  },

  // 连线使用渐变色 true 开启 ， false 不开启（默认）
  // 渐变色开始色为startPlugColor，渐变色结束色为endPlugColor
  gradient: true,

  // 连线开始元素
  start: "",
  // 连线结束元素
  end: "",
  // 连线从元素某侧开始 top 上 , right 右 , bottom 下 , left 左 , auto 自适应（默认）
  startSocket: "auto",
  // 连线从元素某侧结束
  endSocket: "auto",
  // 连线开始点样式 
  // disc 圆形 , square 方形 , arrow1 箭头1 , arrow2 箭头2 , arrow3 箭头3 , 
  // hand 手指 , crosshair 十字准线 , behind 无（默认）
  startPlug: "behind",
  // 连线结束点样式 arrow1 箭头1（默认）
  endPlug: "arrow1",
  // 连线开始点颜色 auto 自适应（默认） , 取值参考颜色值
  startPlugColor: "#ff3792",
  // 连线结束点颜色
  endPlugColor: "#fff386",
  // 连线开始点尺寸 1 （默认）
  startPlugSize: 1,
  // 连线结束点尺寸 1 （默认）
  endPlugSize: 1,
  // 连线开始文字 默认为空
  startLabel: "开始",
  // 连线中间文字 默认为空
  middleLabel: "中间",
  // 连线结束文字 默认为空
  endLabel: "结束",
};

1、颜色值

与 CSS 颜色取值相同。例如：hsl(200, 70%, 58%),rgba(73，172，223，0.5),#49acdf,bule等。

2、动画选项

duration 动画时长。

timing 指示如何改变速度，它的工作原理和 CSS 动画相同。取值如：ease，linear，ease-in，ease-out，ease-in-out，[0.5, 0, 1, 0.42]等。

三、创建连线

styleOption配置项参考配置项

const leaderLine = new LeaderLine(styleOption);

四、方法

1. setOption

   设置配置项。

   leaderLine.setOption(配置项);
   

2. position

   更改连线位置。

   leaderLine.position();
   

3. show

   设置连线显示。

   leaderLine.show();
   

4. hide

   设置连线隐藏。

   leaderLine.hide();
   

5. remove

   移除连线。

   leaderLine.remove();
   

五、示例

<template>
  <div class="page">
    <div
      v-for="i in 10"
      :key="i"
      v-drag="changPosition"
      :id="'item item-' + i"
      class="item"
      :style="i | itemFilter"
    ></div>
    <!-- v-drag 为自定义拖拽指令 -->
  </div>
</template>

<script>
// import LeaderLine from "leader-line";
import LeaderLine from "@/plugins/leader-line.min.js";
export default {
  mounted() {
    this.init();
  },
  filters: {
    itemFilter(i) {
      let top = 0,
        left = 0;
      if (i <= 5) {
        top = 5 + (i - 1) * 10;
        left = 5;
      } else {
        top = (i - 5) * 15;
        left = 30;
      }
      return `top:${top}vh;left:${left}vw;`;
    },
  },
  methods: {
    init() {
      const styleOption = {
        // 连线颜色 coral （默认） , 取值参考颜色值
        color: "coral",
        // 连线尺寸 4（默认）
        size: 10,
        // 连线类型 straight 直线 , arc 曲线 , fluid 流体线（默认） , magnet 磁铁线 , grid 折线
        path: "fluid",

        // 连线边框显示 false （默认）
        outline: true,
        // 连线边框颜色 indianred （默认） , 取值参考颜色值
        outlineColor: "rgba(0,255,255,1)",

        // 连线使用虚线 true 开启 ， false 不开启（默认）
        dash: {
          // 绘制线的长度 'auto'=size*2
          len: "auto",
          // 绘制线之间的间隙 'auto'=size
          gap: "auto",
          // 线条滚动 true 是({duration: 1000, timing: 'linear'}，详见动画选项)， false 否（默认）
          animation: {
            duration: 1000,
            timing: "linear",
          },
        },

        // 连线使用渐变色 true 开启 ， false 不开启（默认）
        // 渐变色开始色为startPlugColor，渐变色结束色为endPlugColor
        gradient: true,

        // 连线开始元素
        start: "",
        // 连线结束元素
        end: "",
        // 连线从元素某侧开始 top 上 , right 右 , bottom 下 , left 左 , auto 自适应（默认）
        startSocket: "auto",
        // 连线从元素某侧结束
        endSocket: "auto",
        // 连线开始点样式 
        // disc 圆形 , square 方形 , arrow1 箭头1 , arrow2 箭头2 , arrow3 箭头3 , 
        // hand 手指 , crosshair 十字准线 , behind 无（默认）
        startPlug: "behind",
        // 连线结束点样式 arrow1 箭头1（默认）
        endPlug: "arrow1",
        // 连线开始点颜色 auto 自适应（默认） , 取值参考颜色值
        startPlugColor: "#ff3792",
        // 连线结束点颜色
        endPlugColor: "#fff386",
        // 连线开始点尺寸 1 （默认）
        startPlugSize: 1,
        // 连线结束点尺寸 1 （默认）
        endPlugSize: 1,
        // 连线开始文字 默认为空
        startLabel: "开始",
        // 连线中间文字 默认为空
        middleLabel: "中间",
        // 连线结束文字 默认为空
        endLabel: "结束",
      };

      const itemEls = document.getElementsByClassName("item");
      const pathTyps = ["straight", "arc", "fluid", "magnet", "grid"];
      this.lines = pathTyps.map((item, i) => {
        return new LeaderLine({
          ...styleOption,
          start: itemEls[i],
          end: itemEls[i + 5],
          path: item,
        });
      });
    },
    changPosition() {
      this.lines.forEach((item) => {
        item.position();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: rgba(0, 0, 0, 0.5);
  .item {
    width: 50px;
    height: 50px;
    background: #0f0;
  }
}
</style>

效果图如下：

image.png

看日出必须守到拂晓。