指引线leader-line库的使用

这把我C 2020-12-09 23:14:18 8325

今天给大家介绍一个用于做指引线的库,叫做leader-line。简单好用,非常容易上手。
这个库是用于在二个dom元素之间,画上一条线。可以用作产品详细点补充说明,也有用作相关关系表明。这样说有点空洞,先看一下几个示例。

在这里插入图片描述

在这里插入图片描述

引入与简单使用

leader-line库不依赖任何库,你无需引入jquery,vue,或其他的第三方库。
一个简单的案例

<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .container {
            height: 500px;
            width: 500px;
            position: relative;
        }

        .start,
        .end {
            position: absolute;

            display: inline-block;
            height: 50px;
            width: 50px;
            border: 1px solid #ddd;
        }

        .start {
            left: 0;
            top: 0;
        }

        .container .end {
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="start" id="start">start</div>
        <div class="end" id="end">end</div>
    </div>
    <script src="./leader-line.min.js"></script>
    <script type="text/javascript">
        new LeaderLine(
            document.getElementById('start'),
            document.getElementById('end')
        );
    </script>
</body>
</html>

使用场景

可以用于产品,详细点的介绍,
在这里插入图片描述

可以用于二个dom元素的相关关系,上下游关系

在这里插入图片描述

也可以画轨迹
在这里插入图片描述

配置参数

leader-line的基本用法就是使用构造器,第一个参数是开始节点,第二个参数是结束节点,第三个参数是配置参数,一个json对象
第一个节点和第二个节点可以是divbuttonultdtext,甚至是在iframe
json的配置如下图,官网有很清晰的解释,还有配图,这里就不多做解释了。

{
  color:'',
  size: '',
  path:'',
  startSocket: '',
  endSocket: '',
  startSocketGravity:'',
  endSocketGravity: '',
  startPlug: '',
  endPlug: '',
  startPlugColor: '',
  endPlugColor: '',
  startPlugSize: '',
  endPlugSize: '',
  outline: '',
  outlineColor: '',
  outlineSize: '',
  startPlugOutline: '',
  endPlugOutline: '',
  startPlugOutlineColor: '',
  endPlugOutlineColor: '',
  startPlugOutlineSize: '',
  endPlugOutlineSize: '',
  dash: '',
  len: '',
  gap: '',
  animation: '',
  gradient: '',
  startColor: '',
  endColor: '',
  dropShadow: '',
  dx: '',
  dy: '',
  blur: '',
  color: '',
  opacity: '',
}

英文文档

如果要线动起来

var leader_line = new LeaderLine(
   document.getElementById('start'),
   document.getElementById('end'),
   {
       startPlugColor: '#ff3792', // 渐变色开始色
       endPlugColor: '#fff386',// 渐变色结束色
       gradient: true, // 使用渐变色
       dash: { // 虚线样式
           animation: true,// 让线条滚动起来
       }
   }
);
// 重新设置样式
leader_line .setOptions({
  color: '#f7f5ee',
  dropShadow: {dx: 0, dy: 3}
});

在这里插入图片描述

GitHub地址
官网地址
[CDN引用地址]()

声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。
红包 59 9 评论 打赏
评论
0个
内容存在敏感词
手气红包
    易百纳技术社区暂无数据
相关专栏
置顶时间设置
结束时间
删除原因
  • 广告/SPAM
  • 恶意灌水
  • 违规内容
  • 文不对题
  • 重复发帖
打赏作者
易百纳技术社区
这把我C
您的支持将鼓励我继续创作!
打赏金额:
¥1易百纳技术社区
¥5易百纳技术社区
¥10易百纳技术社区
¥50易百纳技术社区
¥100易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

举报反馈

举报类型

  • 内容涉黄/赌/毒
  • 内容侵权/抄袭
  • 政治相关
  • 涉嫌广告
  • 侮辱谩骂
  • 其他

详细说明

审核成功

发布时间设置
发布时间:
是否关联周任务-专栏模块

审核失败

失败原因
备注
拼手气红包 红包规则
祝福语
恭喜发财,大吉大利!
红包金额
红包最小金额不能低于5元
红包数量
红包数量范围10~50个
余额支付
当前余额:
可前往问答、专栏板块获取收益 去获取
取 消 确 定

小包子的红包

恭喜发财,大吉大利

已领取20/40,共1.6元 红包规则

    易百纳技术社区