js leader-line链接div元素划线工具

文档：LeaderLine

安装

npm install leader-line -S

基本使用

引入

import LeaderLine from 'leader-line-vue';

配置项

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: "结束",
};

创建连线

let line = LeaderLine.setLine(startElement, endElement,
 
{ startPlug: 'disc', endPlug: 'disc',color: 'white', size: 2 });

注意：startElement, endElement为template中的元素节点，在Vue3中不要使用GetElementById去获取元素节点，而是要使用ref

指示线会被画在 start 和 end 两个元素之间

    <div id="start">start</div>
    <div id="end">end</div>
    <script>
        new LeaderLine(
            document.getElementById('start'),
            document.getElementById('end')
        );
    </script>

方法

setOptions 方法

leader_line.setOptions(options)

该方法接受和构造函数相同的参数选项（除了 hide 属性）

position

更改连线位置

leaderLine.position();

show , hide 方法

leader_line.show([showEffectName[, animOptions]])
leader_line.hide([showEffectName[, animOptions]])

显示或隐藏指示线 (showEffectName效果可取 'draw' 慢慢绘制效果和 'fade'淡入淡出效果)

remove

移除连线，实例相关的svg标签将从页面上被删除，leader_line 实例也被销毁

leaderLine.remove();

原文地址：https://blog.csdn.net/qq_43641110/article/details/142767711

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！