leader-line

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

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

一、安装

1. 下载插件

   npm install leader-line
   

2. 引入

   方式一

   在依赖文件夹中找到leader-line.min.js，路径可参考node_modules\[email protected]@leader-line\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();
   

五、示例

效果图如下：

image.png

看日出必须守到拂晓。