@abdullahcalisir12/vl-leader-line 中文文档教程

发布于 3年前 浏览 23 项目主页 更新于 3年前

LeaderLine

 npm GitHub 问题 dependencies license

在您的网页中绘制引导线。

文档和示例 https://anseki.github.io/leader-line/

<div id="start">start</div>
<div id="end">end</div>
// Add new leader line from `start` to `end` (HTML/SVG element, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

< a href="https://anseki.github.io/leader-line/">ex-010

它支持自定义选项.

ex-020

基本上可以表示

ex-021

也可以表示元素的一部分而不是元素。

ex-030

ex-031

另外,它可以表示一个元素另一个图书馆。
例如,以下代码将 LeaderLine 与 D3.js 结合使用。 在列表上移动鼠标。

ex-040

Usage

将 LeaderLine 加载到您的网页。

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

将两个 HTML/SVG 元素传递给 LeaderLine 构造函数。 然后在这些元素之间绘制一条引出线。

new LeaderLine(
  document.getElementById('element-1'),
  document.getElementById('element-2')
);

ex-050

任何具有边界框被接受。 例如,

而且,构造函数接受选项。

var startElement = document.getElementById('element-1'),
  endElement = document.getElementById('element-2');

// New leader line has red color and size 8.
new LeaderLine(startElement, endElement, {color: 'red', size: 8});

ex-060

另外,选项可以通过实例的属性访问(可读和可写)。

var line = new LeaderLine(startElement, endElement);
line.color = 'red'; // Change the color to red.
line.size++; // Up size.
console.log(line.size); // Output current size.

您可以通过 colorsize< 更改引导线的样式/code>outlineColor 以及更多选项

new LeaderLine(startElement, endElement, {
  color: '#fff',
  outline: true,
  endPlugOutline: true,
  endPlugSize: 1.5
});

ex-070

可以添加效果通过一些选项到引导线。

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});

ex-080

您可以更改符号通过 startPlugendPlug 选项显示在引导线的末尾。

new LeaderLine(startElement, endElement, {
  startPlug: 'square',
  endPlug: 'hand'
});

ex-090

您可以指定一个元素的点或区域,而不是通过 pointAnchorareaAnchor 的元素 附件。 您也可以指示文档的一个点或区域。

您可以通过 startLabelmiddleLabelendLabel 选项指定其他标签. 此外,captionLabelpathLabel 附件可以指定为标签。

new LeaderLine(
  startElement1,
  LeaderLine.pointAnchor(endElement, {
    x: 60,
    y: 20
  }),
  {endLabel: LeaderLine.pathLabel('This is additional label')}
);

new LeaderLine(
  startElement2,
  LeaderLine.areaAnchor(endElement, {
    x: 80,
    y: 60,
    width: 50,
    height: 80,
  }),
  {endLabel: 'This is additional label'}
);

ex-100

你可以显示和通过 showhide 方法隐藏带效果的引导线。
mouseHoverAnchor 附件允许它轻松实现随鼠标移动显示和隐藏。

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

ex-110

更多详情,请参考以下内容。

Constructor

line = new LeaderLine(options)

或者

line = new LeaderLine(start, end[, options])

options 参数是一个对象,它可以具有 options 的属性。 hide 选项也可以被包含。

startend 参数是 options.startoptions.end 的快捷方式。 以下两个代码工作相同。

new LeaderLine({start: element1, end: element2});
new LeaderLine({start: element3, end: element4, color: 'red'});
new LeaderLine(element1, element2);
new LeaderLine(element3, element4, {color: 'red'});

该实例具有与获取或设置这些值的每个选项同名的属性(hide 选项除外)。

var line = new LeaderLine(startElement, endElement);

upButton.addEventListener('click', function() {
  if (line.size < 20) { line.size++; }
}, false);

downButton.addEventListener('click', function() {
  if (line.size > 4) { line.size--; }
}, false);

如果您想在构造后设置多个选项,使用 setOptions 方法而不是属性可能会提供更好的性能。

当您要对 HTML 文档执行某些操作而不考虑 LeaderLine 时,您通常会在 HTML 文档准备就绪后执行此操作(即 HTML 文档已被网络浏览器加载和解析)。
例如:

// Wait for HTML document to get ready
window.addEventListener('load', function() { // NOT `DOMContentLoaded`
  // Do something about HTML document
  var line = new LeaderLine(
    document.getElementById('start'),
    document.getElementById('end')
  );
});

如果您不等待 HTML 文档准备好,您可能还无法获取目标元素,或者可能会出现布局不完整的问题。 此外,为了提高性能,您应该像上面那样异步执行,因为同步代码会阻止解析 HTML。

hide option

只有构造函数接受 hide 选项。 也就是说,该实例没有 hide 属性。 (请注意,该实例具有 hide 方法。)
如果指定了 true,则不显示前导线,它由 show 方法显示。
这用于在不使用 hide 方法的情况下隐藏它,它根本不会显示,直到 show 方法是叫。

// The leader line is never shown until the button is clicked.
var line = new LeaderLine(startElement, endElement, {hide: true});
button.addEventListener('click', function() { line.show(); });

Methods

setOptions

self = line.setOptions(options)

设置一个或多个选项。
options 参数是一个对象,可以具有 options 的属性。

由于此方法在设置所有指定选项后仅更新视图一次,因此当多个选项设置为已存在的实例时,它可能比通过属性设置选项提供更好的性能。

show, hide

self = line.show([showEffectName[, animOptions]])
self = line.hide([showEffectName[, animOptions]])

显示或隐藏指引线。

var line = new LeaderLine(startElement, endElement, {hide: true});
showButton.addEventListener('click', function() { line.show(); }, false);
hideButton.addEventListener('click', function() { line.hide(); }, false);

showEffectName

类型:字符串
默认值: 上次指定的值,或第一次fade

以下关键字之一作为效果:

  • none
  • fade
    Default animOptions: {duration: 300, timing: 'linear'}
  • draw
    Default animOptions: {duration: 500, timing: [0.58, 0, 0.42, 1]}

animOptions

类型: 对象
默认值:见上文

一个对象可以具有动画选项的属性。

position

self = line.position()

将元素的当前位置和大小重新定位为 startend 选项。< br> 默认情况下,调整加载 LeaderLine 的窗口大小时,每条引线的位置会自动固定。 如果您的网页在不调整窗口大小的情况下移动或调整元素大小,您应该调用 position 方法。 例如,动画、滚动的框或调整大小的

scrollableBox.addEventListener('scroll', AnimEvent.add(function() {
  line.position();
}), false);

(上面的代码使用 AnimEvent 以获得更好的性能。)

如果你想禁用自动固定位置,设置 LeaderLine.positionByWindowResizefalse

remove

line.remove()

从网页中删除引出线。 不能再用了。

Options

以下选项由 constructorsetOptions 方法指定。 而且,这些是通过实例的每个属性访问的。

start, end

类型: HTML/SVG 元素或附件 引导

线从start 元素绘制到end 元素。

line.end = document.getElementById('end-element');

接受任何具有边界框的元素。 例如,

注意:如果你想在另一个窗口中处理元素而不考虑 LeaderLine,你应该了解安全性。

或者您可以指定 附件 而不是 HTML/SVG 元素来指示某些内容。

color

类型:字符串
默认值: 'coral'

引导线的颜色(参见颜色值)。

line.color = 'rgba(30, 130, 250, 0.5)';

size

类型:数字
默认值: 4

引导线的宽度,以像素为单位。

line.size = 20;

path

类型:字符串
默认值: 'fluid'

以下关键字之一指示如何绘制线条:

  • straight
  • arc
  • fluid
  • magnet
  • grid

ex-180

startSocket, endSocket

类型: 字符串
默认值: 'auto'

指示引线连接元素哪一侧的字符串。 它可以是 'top''right''bottom''left' '自动'

line.setOptions({startSocket: 'bottom', endSocket: 'top'});

如果指定了 'auto'(默认值),则会自动选择最近的一侧。

startSocketGravity, endSocketGravity

类型:数字、数组或字符串
默认值: 'auto'

插座处的重力。

如果指定了一个数字,则引出线被拉向插座的方向。 数字是拉力。

line.startSocketGravity = 400;

如果指定坐标为 [x, y] 的数组,则引出线将沿坐标方向拉动。 坐标与 [0, 0] 之间的距离就是拉力。
例如指定[50, -100],则为向右向上的方向拉动(Y轴方向的强度大于X轴方向)。 如果指定[-50, 0],则向左方向拉动(Y轴方向无力)。

例如抛物线:

line.setOptions({
  startSocketGravity: [192, -172],
  endSocketGravity: [-192, -172]
});

如果指定了'auto'(默认),则调整为适合当前path 自动选择。

startPlug, endPlug

类型:字符串
默认值: startPlug'behind' | endPlug: 'arrow1'

以下关键字之一指示插头类型(显示在引出线末尾的符号):

ex-220

startPlugColor, endPlugColor

类型: string< br> 默认值: 'auto'

当为 startPlug/endPlug 选项。

插头的颜色(参见颜色值)。
它与线分开绘制(即它们不相互重叠)。 因此 colorstartPlugColor/endPlugColor 之一或两个选项都可以有一个阿尔法通道。

lineA.setOptions({ // element-1, element-2
  color: 'rgba(30, 130, 250, 0.5)', // translucent
  startPlugColor: 'rgb(241, 76, 129)',
  endPlugColor: 'rgba(241, 76, 129, 0.5)' // translucent
});

lineB.setOptions({ // element-3, element-4
  color: 'rgb(30, 130, 250)',
  startPlugColor: 'rgb(241, 76, 129)',
  endPlugColor: 'rgba(241, 76, 129, 0.5)' // translucent
});

如果指定了 'auto'(默认值),则同步设置 color 选项的值(即,它会在 color 更改时更改)。

startPlugSize, endPlugSize

类型:数字
默认值: 1

指定的值不是 behind 时的每个选项startPlug/endPlug 选项。

插头尺寸的乘数。
插件同步调整大小,以下选项包含 size

Plug Size: size * [default -plug-scale] * [startPlugSizeendPlugSize]

new LeaderLine(element1, element2, {
  startPlug: 'arrow1',
  size: 4,
  startPlugSize: 1,
  endPlugSize: 2
});

new LeaderLine(element3, element4, {
  startPlug: 'arrow1',
  size: 8,
  startPlugSize: 1,
  endPlugSize: 2
});

outline

类型: boolean
默认值: false

如果指定了 true,则启用引导线的轮廓。

line.outline = true;

outlineColor

类型:字符串
默认值: 'indianred'

当为 outline 指定 true 时的选项> 选项。

引导线轮廓的颜色(参见颜色值)。
它是从线的内部单独绘制的(即那些不相互重叠)。 因此,coloroutlineColor 之一或两个选项都可以有一个 alpha 通道。

lineA.setOptions({ // element-1, element-2
  color: 'rgb(248, 205, 30)',
  outlineColor: 'rgb(30, 130, 250)'
});

lineB.setOptions({ // element-3, element-4
  color: 'rgba(248, 205, 30, 0.5)', // translucent
  outlineColor: 'rgba(30, 130, 250, 0.5)' // translucent
});

lineC.setOptions({ // element-5, element-6
  color: 'rgba(248, 205, 30, 0.5)', // translucent
  outlineColor: 'rgb(30, 130, 250)'
});

lineD.setOptions({ // element-7, element-8
  color: 'rgb(248, 205, 30)',
  outlineColor: 'rgba(30, 130, 250, 0.5)' // translucent
});

outlineSize

类型:数字
默认值: 0.25

outline 指定 true 时的选项/a> 选项。

引出线轮廓大小的倍数,大于0且小于等于0.48
大纲同步调整大小,以下选项包含 size

大纲大小:size * outlineSize

lineA.setOptions({ // element-1, element-2
  size: 12,
  outlineSize: 0.4
});

lineB.setOptions({ // element-3, element-4
  size: 24,
  outlineSize: 0.08
});

startPlugOutline, endPlugOutline

类型: 布尔值
默认值: false

当为 startPlug/ 指定接受此选项的插头时的每个选项endPlug 选项。

如果指定了 true,则启用插头的轮廓。

line.endPlugOutline = true;

startPlugOutlineColor, endPlugOutlineColor

类型:字符串
默认值: 'auto'

当为 startPlugOutline< 指定 true 时的每个选项/code>/endPlugOutline 选项。

插头轮廓的颜色(参见颜色值)。
它与插头内部分开涂漆(即它们不相互重叠)。 因此 startPlugColor/endPlugColorstartPlugOutlineColor/endPlugOutlineColor< 之一/code> 或两个选项都可以有一个 alpha 通道。

lineA.setOptions({ // element-1, element-2
  startPlugColor: 'rgb(248, 205, 30)',
  startPlugOutlineColor: 'rgb(30, 130, 250)',
  endPlugColor: 'rgba(248, 205, 30, 0.5)', // translucent
  endPlugOutlineColor: 'rgb(30, 130, 250)'
});

lineB.setOptions({ // element-3, element-4
  startPlugColor: 'rgb(248, 205, 30)',
  startPlugOutlineColor: 'rgba(30, 130, 250, 0.5)', // translucent
  endPlugColor: 'rgba(248, 205, 30, 0.5)', // translucent
  endPlugOutlineColor: 'rgba(30, 130, 250, 0.5)' // translucent
});

如果指定了 'auto'(默认值),则同步设置 outlineColor 选项的值(即它被更改当 outlineColor 改变时)。

startPlugOutlineSize, endPlugOutlineSize

类型:数字
默认值: 1

startPlugOutline 指定 true 时的每个选项>/endPlugOutline 选项。

插头轮廓尺寸的倍数,大于或等于1且小于或等于outlineMax ="#startplug-endplug">startPlug/endPlug 选项。
轮廓同步调整大小,以下选项包含 size

Plug Outline Size: size * [ default-plug-scale] * [startPlugSizeendPlugSize] * [default-plug-outline-scale ] * [startPlugOutlineSizeendPlugOutlineSize]

lineA.setOptions({ // element-1, element-2
  size: 4,
  startPlugSize: 1.5,
  startPlugOutlineSize: 2.5,
  endPlugSize: 3,
  endPlugOutlineSize: 1
});

lineB.setOptions({ // element-3, element-4
  size: 10,
  startPlugSize: 1.5,
  startPlugOutlineSize: 1,
  endPlugSize: 3,
  endPlugOutlineSize: 2.5
});

startLabel, middleLabel, endLabel

类型: 字符串或附件
默认值: ''

显示在引导线上的附加标签。

new LeaderLine(startElement, endElement, {
  startLabel: 'START',
  middleLabel: 'MIDDLE',
  endLabel: 'END'
});

或者您可以指定 附件 而不是字符串。

dash (effect)

类型:布尔值或对象
默认值: false

使用可以具有以下选项属性的指定对象启用效果。
或者 true 以使用所有默认选项启用它。

new LeaderLine(startElement, endElement, {dash: true});

len, gap

类型:数字或字符串
默认值: 'auto'

虚线部分的大小,以像素为单位。
len 是画线的长度,gap 是画线之间的间距。

如果指定了'auto'(默认值),则同步设置以下每个值(即在size 更改时更改)。

len: size * 2 间隙大小

new LeaderLine(element1, element2, {
  dash: {len: 4, gap: 24}
});

new LeaderLine(element3, element4, {
  size: 8,
  dash: true // len: 16, gap: 8
});

animation

类型:布尔值或对象
默认值: false

一个对象,它可以具有动画选项的属性来动画效果。
或者 true 使用以下默认选项为其设置动画。

默认动画选项:{duration: 1000, timing: 'linear'}

new LeaderLine(startElement, endElement, {dash: {animation: true}});

gradient (effect)

Type: boolean or Object
默认值: false

使用可以具有以下选项属性的指定对象启用效果。
或者 true 以使用所有默认选项启用它。

new LeaderLine(startElement, endElement, {startPlugColor: '#a6f41d', gradient: true});

startColor, endColor

类型:字符串
默认值: 'auto'

渐变的开始颜色(参见颜色值)和结束颜色。

如果指定了 'auto'(默认值),则 startPlugColorendPlugColor 的每个值 a> 同步设置(即当 startPlugColor/endPlugColor 改变时它也改变)。

lineA.setOptions({ // element-1, element-2
  gradient: {
    startColor: '#2e17c3',
    endColor: '#1df3f9'
  }
});

lineB.setOptions({ // element-3, element-4
  gradient: {
    startColor: 'rgba(17, 148, 51, 0.1)',
    endColor: 'rgb(17, 148, 51)'
  }
});

由于渐变仅由两种颜色组成,因此可能并不美观。

dropShadow (effect)

类型:布尔值或对象
默认值: false

使用可以具有以下选项属性的指定对象启用效果。
或者 true 以使用所有默认选项启用它。

new LeaderLine(startElement, endElement, {dropShadow: true});

dx, dy

类型:数字
默认: dx2 | dy: 4

阴影的偏移量 X 和偏移量 Y,以像素为单位。

line.setOptions({
  color: '#f7f5ee',
  dropShadow: {dx: 0, dy: 3}
});

blur

类型:数字
默认值: 3

投影中模糊操作的标准偏差。

line.setOptions({
  dropShadow: {
    dx: 6,
    dy: 8,
    blur: 0.2
  }
});

color

类型:字符串
默认值: '#000'

阴影的颜色(参见颜色值)。
可以包含 alpha 通道,但应改用 opacity 选项。

new LeaderLine(startElement, endElement, {dropShadow: {color: 'blue', dx: 0, dy: 0}});

opacity

类型:数字
默认值: 0.8

一个从01 的数字,表示投影的透明度。

Attachments

附件通过一些选项传递到引导线,这些选项使该选项具有特殊的行为。

您可以通过 LeaderLine 的各个静态方法(不是实例方法)获取新的附件实例。
例如,LeaderLine.pointAnchor 方法创建新的 pointAnchor 附件实例。 它通过引导线的 startend 选项附加到引导线。
以下代码通过作为 end 选项的第二个参数将新的 pointAnchor 附件实例传递给 LeaderLine 构造函数。

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

在计划之后使用附件的情况下。

var attachment = LeaderLine.pointAnchor(endElement);

function attach() {
  line.end = attachment;
}

pointAnchor

attachment = LeaderLine.pointAnchor(options)

或者

attachment = LeaderLine.pointAnchor(element[, options])

为引导线的 startend 选项指定的附件,而不是元素,用于指示点而不是元素。

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

options 参数是一个对象,它可以具有属性作为稍后描述的选项。

element 参数是 options.element 的快捷方式。 以下两个代码工作相同。

attachment1 = LeaderLine.pointAnchor({element: element1});
attachment2 = LeaderLine.pointAnchor({element: element2, x: 16, y: 32});
attachment1 = LeaderLine.pointAnchor(element1);
attachment2 = LeaderLine.pointAnchor(element2, {x: 16, y: 32});

此附件可以在多条引导线之间共享。

// A new attachment instance is shared between `line1` and `line2`.
line1.end = line2.end = LeaderLine.pointAnchor(endElement);
line1.end = LeaderLine.pointAnchor(endElement);

function share() {
  // The `line1`'s attachment instance is shared with `line2`.
  line2.end = line1.end;
}

通过引导线的 startend 选项附加附件后,如果为该选项指定了其他内容,则引导线与附件分离。 当最后一条前导线分离时,附件自动从网页中删除,不能再使用。

element

类型: HTML/SVG 元素

作为点基础的元素。 请参阅 xy 选项。
您也可以指定 元素。 也就是说,您可以使引出线指示文档中的任何位置。

x, y

类型:数字或字符串
默认值: '50%'

点的 X 和 Y 坐标,以像素为单位,相对于 element 选项。
每个值都可以是元素宽度或高度的百分比。 例如,{x: '50%', y: '50%'}(默认)表示元素的中心,{x: '100%', y: 0} 表示右上角。
而且,每个值可以是负值或超过元素宽度或高度的值,它表示元素的外部。

new LeaderLine(element1, LeaderLine.pointAnchor(element3, {x: 10, y: 30}));
new LeaderLine(element2, LeaderLine.pointAnchor(element3, {x: '100%', y: 0}));

areaAnchor

attachment = LeaderLine.areaAnchor(options)

或者

attachment = LeaderLine.areaAnchor(element[, shape][, options])

为引导线的 startend 选项指定的附件,而不是元素,用于指示区域而不是元素。

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

options 参数是一个对象,它可以具有属性作为稍后描述的选项。

elementshape 参数是 options.elementoptions.shape 的快捷方式。 以下两个代码工作相同。

attachment1 = LeaderLine.areaAnchor({element: element1});
attachment2 = LeaderLine.areaAnchor({element: element2, color: 'red'});
attachment3 = LeaderLine.areaAnchor({element: element3, shape: 'circle'});
attachment4 = LeaderLine.areaAnchor({element: element4, shape: 'circle', color: 'red'});
attachment1 = LeaderLine.areaAnchor(element1);
attachment2 = LeaderLine.areaAnchor(element2, {color: 'red'});
attachment3 = LeaderLine.areaAnchor(element3, 'circle');
attachment4 = LeaderLine.areaAnchor(element4, 'circle', {color: 'red'});

此附件可以在多条引导线之间共享。 分享和生命周期见pointAnchor附件。

element

类型: HTML/SVG 元素

作为区域基础的元素。 请参阅 xy宽度高度 选项。
您也可以指定 元素。 也就是说,可以指示文档中的任何区域。

shape

类型:字符串
默认值: 'rect'

以下关键字之一表示区域的形状:

  • rect
  • circle
  • polygon

ex-450

x, y

类型:数字或字符串
默认值: '-5%'

shape 选项。

区域左上角的 X 和 Y 坐标,以像素为单位,相对于 element 选项。
每个值都可以是元素宽度或高度的百分比。 例如{x: '50%', y: '50%'}表示元素的中心,{x: '100%', y: 0} 表示右上角。
而且,每个值可以是负值或超过元素宽度或高度的值,它表示元素的外部。

width, height

类型:数字或字符串
默认值: '110%'

shape 选项。

区域的宽度和高度,以像素为单位。
每个值都可以是元素宽度或高度的百分比。 例如,{x: '50%', y: 0, width: '50%', height: '100%'} 表示元素的右半部分。
而且,每个值都可以是超过元素宽度或高度的值。

radius

类型:数字
默认值: 0

shape 指定 rect 时的选项/a> 选项。

区域圆角的半径,以像素为单位。

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {x: '20%', y: '20%', width: '60%', height: '60%', radius: 10}));

points

类型: 数组

shape 选项指定 polygon 时的选项。

包含多边形的三个或更多点的数组。 作为点的每个项目都是一个数组,其中包含该点的 X 和 Y 坐标。 即是包含数组的数组,如[[x1, y1], [x2, y2], ...]
X 和 Y 坐标的处理方式与 xy 选项相同。

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {shape: 'polygon', points: [[10, 15], ['90%', '70%'], [10, '80%']]}));

color

类型:字符串
默认值: color 当前第一条连接的前导线(同步)

颜色(见 区域边界的颜色值)。
默认情况下,同步设置当前附加引导线中第一条引导线的 color 选项的值(即在 <引导线的代码>颜色已更改)。

fillColor

类型:字符串
默认值: ''

区域的填充颜色(参见颜色值)。
如果未指定(默认),则不绘制该区域。 它比指定 'rgba(0, 0, 0, 0)' 更好。

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {x: 14, y: 20, width: 42, height: 60, radius: 10, fillColor: '#f8cd1e'}));

size

类型:数字
默认值: size 当前附加的第一条引导线(同步)

区域边界的宽度,以像素为单位。
如果指定了 0,则不绘制边框。

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {shape: 'polygon', points: [[10, 15], [63, 70], [10, 80]],
      fillColor: '#f8cd1e', size: 0}));

dash

类型:布尔值或对象
默认值: false

为具有指定对象的区域的边界启用“虚线”效果,该对象可以具有以下选项的属性。
或者 true 以使用所有默认选项启用它。

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {x: 14, y: 20, width: 42, height: 60, radius: 8, dash: true}));
len, gap

类型:数字
默认值: lensize * 2(同步)| gap: size(同步)

虚线部分的大小,以像素为单位。
len 是画线的长度,gap 是画线之间的间距。

mouseHoverAnchor

attachment = LeaderLine.mouseHoverAnchor(options)

或者

attachment = LeaderLine.mouseHoverAnchor(element[, showEffectName][, options])

为引导线的 startend 选项指定的附件,而不是元素,用于通过鼠标悬停显示和隐藏引导线。
这是在鼠标进入元素时调用show方法的一种便捷方式,调用hide 鼠标离开元素时的方法。 此外,元素中还添加了一个小图标和一些样式。
此外,它还包含一些 Web 浏览器不支持的 mouseentermouseleave 事件的 polyfill。

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

这是一个附件,用于提供执行上述行为的便捷方法。 如果您想要更多样式或更多自定义行为,您将使用 show/hide 方法和您的 CSS 代码而不是这个附件。

options 参数是一个对象,它可以具有属性作为稍后描述的选项。

elementshowEffectName 参数是 options.elementoptions.showEffectName 的快捷方式。 以下两个代码工作相同。

attachment1 = LeaderLine.mouseHoverAnchor({element: element1});
attachment2 = LeaderLine.mouseHoverAnchor({element: element2, style: {color: 'red'}});
attachment3 = LeaderLine.mouseHoverAnchor({element: element3, showEffectName: 'draw'});
attachment4 = LeaderLine.mouseHoverAnchor(
  {element: element4, showEffectName: 'draw', style: {color: 'red'}});
attachment1 = LeaderLine.mouseHoverAnchor(element1);
attachment2 = LeaderLine.mouseHoverAnchor(element2, {style: {color: 'red'}});
attachment3 = LeaderLine.mouseHoverAnchor(element3, 'draw');
attachment4 = LeaderLine.mouseHoverAnchor(element4, 'draw', {style: {color: 'red'}});

此附件可以在多条引导线之间共享。 分享和生命周期见pointAnchor附件。

element

类型: HTML 元素

作为显示和隐藏引导线的触发器的元素。

showEffectName

类型:字符串
默认值: 上次指定

的值,或第一次fade 传递给 show< 的值/code>/hide 方法作为其 showEffectName 参数。

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

animOptions

类型:对象
默认值:请参阅 showEffectName of < code>show/hide 方法

传递给 show/ 的值hide 方法作为其 animOptions 参数。

style

类型:对象
默认值: undefined

具有元素的附加样式属性的对象。
您可以将 null 指定为属性以禁用添加样式属性。 请注意,它不会禁用样式属性。 例如,如果指定了 {backgroundColor: null},则附件不会更改元素的当前 backgroundColor 样式属性。

hoverStyle

类型:对象
默认值: undefined

这与 style 选项相同,只是添加了这些样式属性当鼠标进入元素时。

onSwitch

类型:函数
默认值: undefined

show/hide 后调用的函数> 方法,带有一个 event 参数。

captionLabel

attachment = LeaderLine.captionLabel(options)

attachment = LeaderLine.captionLabel(text[, options])

startLabelmiddleLabelendLabel 引线的选项,用于在引线上显示自定义标签。

new LeaderLine(startElement, endElement, {
  startLabel: LeaderLine.captionLabel('START'),
  middleLabel: LeaderLine.captionLabel('MIDDLE'),
  endLabel: LeaderLine.captionLabel('END')
});

options 参数是一个对象,它可以具有属性作为稍后描述的选项。

text 参数是 options.text 的快捷方式。 以下两个代码工作相同。

attachment1 = LeaderLine.captionLabel({text: 'LABEL-1'});
attachment2 = LeaderLine.captionLabel({text: 'LABEL-2', color: 'red'});
attachment1 = LeaderLine.captionLabel('LABEL-1');
attachment2 = LeaderLine.captionLabel('LABEL-2', {color: 'red'});

此附件不能在多个引导线之间共享。
当已经连接的附件连接到另一条引线时,前一条引线会自动分离。 即,附件从引线移动到另一引线。

// A new attachment instance is attached to `line1`.
line1.endLabel = LeaderLine.captionLabel('LABEL-1');

// The attachment is attached to `line2`, then, `line1` is detached.
line2.endLabel = line1.endLabel;

此外,它可以在同一引导线的标签之间移动。

// The attachment is moved from `endLabel` to `startLabel`.
line1.startLabel = line1.endLabel;

当引出线与附件分离并且没有附加任何引出线时,附件会自动从网页中删除,不能再使用。

text

类型: string

显示为标签的字符串。

offset

类型:数组
默认: 计算出的合适位置

默认情况下,作为 startLabel 附加的 captionLabel 附件位于决定的插座(即连接点)附近通过引导线的 startSocket 选项。 同理,附加一个作为endLabel 的位置靠近由endSocket 选项决定的套接字。 这些是根据引导线的大小、标签的字体大小等计算的。

如果为 offset 指定了以像素为单位的 [x, y] 数组选项,附件位于相对于确定的插座的指定坐标处。

new LeaderLine(startElement, endElement, {
  startLabel: LeaderLine.captionLabel('START', {color: 'blue', offset: [-20, 0]})
});

lineOffset

类型:数字
默认值: 0

默认情况下,作为 middleLabel 附加的 captionLabel 附件位于引导线的路径。
如果为 lineOffset 选项指定了以像素为单位的长度,则附件位于距离路径中点的偏移点处。 长度是沿路径的距离,负值使它变得接近 start 选项的元素。

color

类型:字符串
默认值: color 当前连接的前导线(同步)

颜色(见 颜色值)。
默认情况下,同步设置当前附加引导线的 color 选项的值(即当 color< /code> 引导线已更改)。

outlineColor

类型:字符串
默认值: '#fff'

文本轮廓的颜色(参见颜色值)。< br> 轮廓使文本避免看起来与背景融为一体。
如果指定了 '',则不绘制轮廓。 它比指定 'rgba(0, 0, 0, 0)' 更好。

Other Style Properties

You can specify the following CSS properties also:

  • fontFamily
  • fontStyle
  • fontVariant
  • fontWeight
  • fontStretch
  • fontSize
  • fontSizeAdjust
  • kerning
  • letterSpacing
  • wordSpacing
  • textDecoration

Note that some properties might not be supported by some web browsers, LeaderLine doesn't care for those.

pathLabel

attachment = LeaderLine.pathLabel(options)

Or

attachment = LeaderLine.pathLabel(text[, options])

An attachment that is specified instead of a string for the startLabel, middleLabel or endLabel option of the leader line, for showing a label along the path of the leader line.

new LeaderLine(startElement, endElement, {
  startLabel: LeaderLine.pathLabel('START'),
  middleLabel: LeaderLine.pathLabel('MIDDLE'),
  endLabel: LeaderLine.pathLabel('END')
});

The options argument is an Object that can have properties as options that are described later.

The text argument is shortcut to options.text. The following two codes work same.

attachment1 = LeaderLine.pathLabel({text: 'LABEL-1'});
attachment2 = LeaderLine.pathLabel({text: 'LABEL-2', color: 'red'});
attachment1 = LeaderLine.pathLabel('LABEL-1');
attachment2 = LeaderLine.pathLabel('LABEL-2', {color: 'red'});

This attachment can not be shared between multiple leader lines. See captionLabel attachment for the sharing and the life cycle.

Note that the characters are put along the path of the leader line from the start element toward the end element even if the path curves sharply or it is drawn toward the left. If you have to avoid those cases for important text, use captionLabel instead.

text

Type: string

A string that is shown as a label.

lineOffset

Type: number
Default: 0

By default, a pathLabel attachment that is attached as startLabel is positioned near the element as start option. In like manner, attached one as endLabel is positioned near the element as end option. And attached one as middleLabel is positioned at the middle point of the path of the leader line.
If a length in pixels is specified for lineOffset option, the attachment is positioned at the offset point from the position above. The length is distance along the path, a negative value makes it become close to the element as start option.

color

Type: string
Default: color of current attached leader line (synchronously)

A color (see Color Value) of the text.
By default, a value of color option of the current attached leader line is set synchronously (ie it is changed when color of the leader line was changed).

outlineColor

Type: string
Default: '#fff'

A color (see Color Value) of an outline of the text.
The outline makes the text avoid seeming to blend with a background.
If '' is specified, the outline is not drawn. It is better than specifying 'rgba(0, 0, 0, 0)'.

Other Style Properties

See the option of captionLabel.

Animation Options

duration

Type: number

A number determining how long (milliseconds) the animation will run.

new LeaderLine(
  LeaderLine.mouseHoverAnchor(startElement, 'draw', {
    animOptions: {
      duration: 3000
    }
  }),
  endElement
);

timing

Type: Array or string

An Array that is [x1, y1, x2, y2] as a "timing function" that indicates how to change the speed. It works same as that of CSS animation.

new LeaderLine(
  LeaderLine.mouseHoverAnchor(startElement, 'draw', {
    animOptions: {
      duration: 3000,
      timing: [0.5, 0, 1, 0.42]
    }
  }),
  endElement
);

You can specify one of the following keywords also. These values mean keywords for common timing functions.

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

Color Value

CSS color notations are accepted. A value might contain an alpha channel that specifies the transparency.
For example, hsl(200, 70%, 58%), rgba(73, 172, 223, 0.5), #49acdf, skyblue, etc. Some web browsers support hwb(), device-cmyk() and gray() also.


Thanks for images: Brain & Storm, Michael Gaida, CGvector

LeaderLine

npm GitHub issues dependencies license

Draw a leader line in your web page.

Document and Examples https://anseki.github.io/leader-line/

<div id="start">start</div>
<div id="end">end</div>
// Add new leader line from `start` to `end` (HTML/SVG element, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

ex-010

It supports options to customize.

ex-020

Basically, it can indicate HTML/SVG element such as <div>, <button>, <ul>, <td>, <circle>, <text>, etc.

ex-021

It can indicate a part of an element also instead of the element.

ex-030

ex-031

Also, it can indicate an element of another library.
For example, the following uses LeaderLine with D3.js. Move the mouse on the list.

ex-040

Usage

Load LeaderLine into your web page.

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

Pass two HTML/SVG elements to LeaderLine constructor. Then a leader line is drawn between those elements.

new LeaderLine(
  document.getElementById('element-1'),
  document.getElementById('element-2')
);

ex-050

Any element that has bounding-box is accepted. For example, <div>, <button>, <ul>, <td>, <circle>, <text>, and also, elements in another window (i.e. <iframe>). (See start and end option.)

And, the constructor accepts options.

var startElement = document.getElementById('element-1'),
  endElement = document.getElementById('element-2');

// New leader line has red color and size 8.
new LeaderLine(startElement, endElement, {color: 'red', size: 8});

ex-060

Also, the options can be accessed via properties of the instance (readable and writable).

var line = new LeaderLine(startElement, endElement);
line.color = 'red'; // Change the color to red.
line.size++; // Up size.
console.log(line.size); // Output current size.

You can change the style of the leader line via color, size, outlineColor, and more options.

new LeaderLine(startElement, endElement, {
  color: '#fff',
  outline: true,
  endPlugOutline: true,
  endPlugSize: 1.5
});

ex-070

You can add effects to the leader line via some options.

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});

ex-080

You can change symbols that are shown at the end of the leader line via startPlug and endPlug options.

new LeaderLine(startElement, endElement, {
  startPlug: 'square',
  endPlug: 'hand'
});

ex-090

You can indicate a point or area of an element instead of the element via pointAnchor or areaAnchor attachment. You can indicate a point or area of the document also.

You can specify additional labels via startLabel, middleLabel and endLabel options. Also, captionLabel and pathLabel attachments can be specified as labels.

new LeaderLine(
  startElement1,
  LeaderLine.pointAnchor(endElement, {
    x: 60,
    y: 20
  }),
  {endLabel: LeaderLine.pathLabel('This is additional label')}
);

new LeaderLine(
  startElement2,
  LeaderLine.areaAnchor(endElement, {
    x: 80,
    y: 60,
    width: 50,
    height: 80,
  }),
  {endLabel: 'This is additional label'}
);

ex-100

You can show and hide the leader line with effects by show and hide methods.
mouseHoverAnchor attachment allows it to implement showing and hiding with mouse moving, easily.

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

ex-110

For more details, refer to the following.

Constructor

line = new LeaderLine(options)

Or

line = new LeaderLine(start, end[, options])

The options argument is an Object that can have properties as options. hide option also can be contained.

The start and end arguments are shortcuts to options.start and options.end. The following two codes work same.

new LeaderLine({start: element1, end: element2});
new LeaderLine({start: element3, end: element4, color: 'red'});
new LeaderLine(element1, element2);
new LeaderLine(element3, element4, {color: 'red'});

The instance has properties that have the same name as each option to get or set those values (other than hide option).

var line = new LeaderLine(startElement, endElement);

upButton.addEventListener('click', function() {
  if (line.size < 20) { line.size++; }
}, false);

downButton.addEventListener('click', function() {
  if (line.size > 4) { line.size--; }
}, false);

If you want to set multiple options after it was constructed, using setOptions method instead of the properties may give better performance.

When you will do something about HTML document regardless of the LeaderLine, you typically do that after the HTML document is ready (i.e. the HTML document has been loaded and parsed by web browser).
For example:

// Wait for HTML document to get ready
window.addEventListener('load', function() { // NOT `DOMContentLoaded`
  // Do something about HTML document
  var line = new LeaderLine(
    document.getElementById('start'),
    document.getElementById('end')
  );
});

If you don't wait for HTML document to be ready, you might not be able to get a target element yet, or problems with incomplete layout may occur. Also, you should do so asynchronous like the above for the performance because synchronous code blocks parsing HTML.

hide option

Only the constructor accepts hide option. That is, the instance doesn't have hide property. (Note that the instance has hide method.)
If true is specified, the leader line is not shown, it is shown by show method.
This is used to hide it without using hide method, it is not shown at all until show method is called.

// The leader line is never shown until the button is clicked.
var line = new LeaderLine(startElement, endElement, {hide: true});
button.addEventListener('click', function() { line.show(); });

Methods

setOptions

self = line.setOptions(options)

Set one or more options.
The options argument is an Object that can have properties as options.

Since this method updates a view only once after it sets all specified options, it may give better performance than setting options via the properties when multiple options are set to the instance that already exists.

show, hide

self = line.show([showEffectName[, animOptions]])
self = line.hide([showEffectName[, animOptions]])

Show or hide the leader line.

var line = new LeaderLine(startElement, endElement, {hide: true});
showButton.addEventListener('click', function() { line.show(); }, false);
hideButton.addEventListener('click', function() { line.hide(); }, false);

showEffectName

Type: string
Default: Value that was specified last time, or fade at first time

One of the following keywords as effect:

  • none
  • fade
    Default animOptions: {duration: 300, timing: 'linear'}
  • draw
    Default animOptions: {duration: 500, timing: [0.58, 0, 0.42, 1]}

animOptions

Type: Object
Default: See above

An Object that can have properties as Animation Options.

position

self = line.position()

Re-position the leader line with current position and size of the elements as start or end option.
By default, the position of each leader line is fixed automatically when the window that loads LeaderLine was resized. You should call position method if your web page moved or resized the elements without resizing the window. For example, animation, a box that was scrolled or <iframe> that was resized.

scrollableBox.addEventListener('scroll', AnimEvent.add(function() {
  line.position();
}), false);

(The code above uses AnimEvent for a better performance.)

If you want to disable the fixing the position automatically, set LeaderLine.positionByWindowResize to false.

remove

line.remove()

Remove the leader line from the web page. It can't be used anymore.

Options

The following options are specified by constructor or setOptions method. And also, those are accessed via each property of instance.

start, end

Type: HTML/SVG element or Attachment

The leader line is drawn from the start element to the end element.

line.end = document.getElementById('end-element');

Any element that has bounding-box is accepted. For example, <div>, <button>, <ul>, <td>, <circle>, <text>, and also, elements in another window (i.e. <iframe>).

Note: if you want to handle elements in another window regardless of LeaderLine, you should understand about security.

Or you can specify an attachment instead of HTML/SVG element to indicate something.

color

Type: string
Default: 'coral'

A color (see Color Value) of the leader line.

line.color = 'rgba(30, 130, 250, 0.5)';

size

Type: number
Default: 4

The width of the leader line, in pixels.

line.size = 20;

path

Type: string
Default: 'fluid'

One of the following keywords to indicate how to draw the line:

  • straight
  • arc
  • fluid
  • magnet
  • grid

ex-180

startSocket, endSocket

Type: string
Default: 'auto'

The string to indicate which side of the element the leader line connects. It can be 'top', 'right', 'bottom', 'left' or 'auto'.

line.setOptions({startSocket: 'bottom', endSocket: 'top'});

If 'auto' (default) is specified, the closest side is chosen automatically.

startSocketGravity, endSocketGravity

Type: number, Array or string
Default: 'auto'

The force of gravity at a socket.

If a number is specified, the leader line is pulled in the direction of the socket. The number is pull strength.

line.startSocketGravity = 400;

If an Array that is coordinates [x, y] is specified, the leader line is pulled in the direction of the coordinates. The distance between the coordinates and [0, 0] is pull strength.
For example, if [50, -100] is specified, it is pulled in the direction of the rightward and upward (The strength in the Y axis direction is larger than the X axis direction). If [-50, 0] is specified, it is pulled in the direction of the leftward (no strength in the Y axis direction).

For example, parabola:

line.setOptions({
  startSocketGravity: [192, -172],
  endSocketGravity: [-192, -172]
});

If 'auto' (default) is specified, it is adjusted to gravity suitable for current path option automatically.

startPlug, endPlug

Type: string
Default: startPlug: 'behind' | endPlug: 'arrow1'

One of the following keywords to indicate type of plug (symbol that is shown at the end of the leader line):

ex-220

startPlugColor, endPlugColor

Type: string
Default: 'auto'

Each option for when a plug that accepts this option is specified for startPlug/endPlug option.

A color (see Color Value) of a plug.
It is painted separately from the line (i.e. Those don't overlap each other). Therefore one of color and startPlugColor/endPlugColor or both options can have an alpha channel.

lineA.setOptions({ // element-1, element-2
  color: 'rgba(30, 130, 250, 0.5)', // translucent
  startPlugColor: 'rgb(241, 76, 129)',
  endPlugColor: 'rgba(241, 76, 129, 0.5)' // translucent
});

lineB.setOptions({ // element-3, element-4
  color: 'rgb(30, 130, 250)',
  startPlugColor: 'rgb(241, 76, 129)',
  endPlugColor: 'rgba(241, 76, 129, 0.5)' // translucent
});

If 'auto' (default) is specified, a value of color option is set synchronously (i.e. it is changed when color was changed).

startPlugSize, endPlugSize

Type: number
Default: 1

Each option for when a value other than behind is specified for startPlug/endPlug option.

A multiplying factor of the size of a plug.
The plugs are resized synchronously, with the following options that contain size:

Plug Size: size * [default-plug-scale] * [startPlugSize or endPlugSize]

new LeaderLine(element1, element2, {
  startPlug: 'arrow1',
  size: 4,
  startPlugSize: 1,
  endPlugSize: 2
});

new LeaderLine(element3, element4, {
  startPlug: 'arrow1',
  size: 8,
  startPlugSize: 1,
  endPlugSize: 2
});

outline

Type: boolean
Default: false

If true is specified, an outline of the leader line is enabled.

line.outline = true;

outlineColor

Type: string
Default: 'indianred'

An option for when true is specified for outline option.

A color (see Color Value) of an outline of the leader line.
It is painted separately from inside of the line (i.e. Those don't overlap each other). Therefore one of color and outlineColor or both options can have an alpha channel.

lineA.setOptions({ // element-1, element-2
  color: 'rgb(248, 205, 30)',
  outlineColor: 'rgb(30, 130, 250)'
});

lineB.setOptions({ // element-3, element-4
  color: 'rgba(248, 205, 30, 0.5)', // translucent
  outlineColor: 'rgba(30, 130, 250, 0.5)' // translucent
});

lineC.setOptions({ // element-5, element-6
  color: 'rgba(248, 205, 30, 0.5)', // translucent
  outlineColor: 'rgb(30, 130, 250)'
});

lineD.setOptions({ // element-7, element-8
  color: 'rgb(248, 205, 30)',
  outlineColor: 'rgba(30, 130, 250, 0.5)' // translucent
});

outlineSize

Type: number
Default: 0.25

An option for when true is specified for outline option.

A multiplying factor of the size of an outline of the leader line, it is greater than 0 and is less than or equal to 0.48.
The outline is resized synchronously, with the following options that contain size:

Outline Size: size * outlineSize

lineA.setOptions({ // element-1, element-2
  size: 12,
  outlineSize: 0.4
});

lineB.setOptions({ // element-3, element-4
  size: 24,
  outlineSize: 0.08
});

startPlugOutline, endPlugOutline

Type: boolean
Default: false

Each option for when a plug that accepts this option is specified for startPlug/endPlug option.

If true is specified, an outline of the plug is enabled.

line.endPlugOutline = true;

startPlugOutlineColor, endPlugOutlineColor

Type: string
Default: 'auto'

Each option for when true is specified for startPlugOutline/endPlugOutline option.

A color (see Color Value) of an outline of the plug.
It is painted separately from inside of the plug (i.e. Those don't overlap each other). Therefore one of startPlugColor/endPlugColor and startPlugOutlineColor/endPlugOutlineColor or both options can have an alpha channel.

lineA.setOptions({ // element-1, element-2
  startPlugColor: 'rgb(248, 205, 30)',
  startPlugOutlineColor: 'rgb(30, 130, 250)',
  endPlugColor: 'rgba(248, 205, 30, 0.5)', // translucent
  endPlugOutlineColor: 'rgb(30, 130, 250)'
});

lineB.setOptions({ // element-3, element-4
  startPlugColor: 'rgb(248, 205, 30)',
  startPlugOutlineColor: 'rgba(30, 130, 250, 0.5)', // translucent
  endPlugColor: 'rgba(248, 205, 30, 0.5)', // translucent
  endPlugOutlineColor: 'rgba(30, 130, 250, 0.5)' // translucent
});

If 'auto' (default) is specified, a value of outlineColor option is set synchronously (i.e. it is changed when outlineColor was changed).

startPlugOutlineSize, endPlugOutlineSize

Type: number
Default: 1

Each option for when true is specified for startPlugOutline/endPlugOutline option.

A multiplying factor of the size of an outline of the plug, it is greater than or equal to 1 and is less than or equal to outlineMax that is shown in startPlug/endPlug option.
The outline is resized synchronously, with the following options that contain size:

Plug Outline Size: size * [default-plug-scale] * [startPlugSize or endPlugSize] * [default-plug-outline-scale] * [startPlugOutlineSize or endPlugOutlineSize]

lineA.setOptions({ // element-1, element-2
  size: 4,
  startPlugSize: 1.5,
  startPlugOutlineSize: 2.5,
  endPlugSize: 3,
  endPlugOutlineSize: 1
});

lineB.setOptions({ // element-3, element-4
  size: 10,
  startPlugSize: 1.5,
  startPlugOutlineSize: 1,
  endPlugSize: 3,
  endPlugOutlineSize: 2.5
});

startLabel, middleLabel, endLabel

Type: string or Attachment
Default: ''

An additional label that is shown on the leader line.

new LeaderLine(startElement, endElement, {
  startLabel: 'START',
  middleLabel: 'MIDDLE',
  endLabel: 'END'
});

Or you can specify an attachment instead of a string.

dash (effect)

Type: boolean or Object
Default: false

Enable the effect with specified Object that can have properties as the following options.
Or true to enable it with all default options.

new LeaderLine(startElement, endElement, {dash: true});

len, gap

Type: number or string
Default: 'auto'

The size of parts of the dashed line, in pixels.
len is length of drawn lines, gap is gap between drawn lines.

If 'auto' (default) is specified, the following each value is set synchronously (i.e. it is changed when size was changed).

len: size * 2 gap: size

new LeaderLine(element1, element2, {
  dash: {len: 4, gap: 24}
});

new LeaderLine(element3, element4, {
  size: 8,
  dash: true // len: 16, gap: 8
});

animation

Type: boolean or Object
Default: false

An Object that can have properties as Animation Options to animate the effect.
Or true to animate it with the following default options.

Default Animation Options: {duration: 1000, timing: 'linear'}

new LeaderLine(startElement, endElement, {dash: {animation: true}});

gradient (effect)

Type: boolean or Object
Default: false

Enable the effect with specified Object that can have properties as the following options.
Or true to enable it with all default options.

new LeaderLine(startElement, endElement, {startPlugColor: '#a6f41d', gradient: true});

startColor, endColor

Type: string
Default: 'auto'

The start color (see Color Value) and end color of the gradient.

If 'auto' (default) is specified, each value of startPlugColor and endPlugColor is set synchronously (i.e. it is changed when startPlugColor/endPlugColor was changed).

lineA.setOptions({ // element-1, element-2
  gradient: {
    startColor: '#2e17c3',
    endColor: '#1df3f9'
  }
});

lineB.setOptions({ // element-3, element-4
  gradient: {
    startColor: 'rgba(17, 148, 51, 0.1)',
    endColor: 'rgb(17, 148, 51)'
  }
});

Since the gradient is made from only two colors, it might be not beautiful.

dropShadow (effect)

Type: boolean or Object
Default: false

Enable the effect with specified Object that can have properties as the following options.
Or true to enable it with all default options.

new LeaderLine(startElement, endElement, {dropShadow: true});

dx, dy

Type: number
Default: dx: 2 | dy: 4

The offset X and offset Y of the drop shadow, in pixels.

line.setOptions({
  color: '#f7f5ee',
  dropShadow: {dx: 0, dy: 3}
});

blur

Type: number
Default: 3

The standard deviation for the blur operation in the drop shadow.

line.setOptions({
  dropShadow: {
    dx: 6,
    dy: 8,
    blur: 0.2
  }
});

color

Type: string
Default: '#000'

A color (see Color Value) of the drop shadow.
An alpha channel can be contained but opacity option should be used instead.

new LeaderLine(startElement, endElement, {dropShadow: {color: 'blue', dx: 0, dy: 0}});

opacity

Type: number
Default: 0.8

A number ranging from 0 to 1 to indicate the transparency of the drop shadow.

Attachments

Attachments are passed to the leader line via some options, and those make that option have special behavior.

You can get new attachment instance by individual static methods of LeaderLine (not instance methods).
For example, LeaderLine.pointAnchor method makes new pointAnchor attachment instance. It is attached to the leader line via start or end option of the leader line.
The following code passes a new pointAnchor attachment instance to LeaderLine constructor, via second argument as end option.

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

In the case of the plan to use the attachment afterward.

var attachment = LeaderLine.pointAnchor(endElement);

function attach() {
  line.end = attachment;
}

pointAnchor

attachment = LeaderLine.pointAnchor(options)

Or

attachment = LeaderLine.pointAnchor(element[, options])

An attachment that is specified instead of an element for the start or end option of the leader line, for indicating a point instead of the element.

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

The options argument is an Object that can have properties as options that are described later.

The element argument is shortcut to options.element. The following two codes work same.

attachment1 = LeaderLine.pointAnchor({element: element1});
attachment2 = LeaderLine.pointAnchor({element: element2, x: 16, y: 32});
attachment1 = LeaderLine.pointAnchor(element1);
attachment2 = LeaderLine.pointAnchor(element2, {x: 16, y: 32});

This attachment can be shared between multiple leader lines.

// A new attachment instance is shared between `line1` and `line2`.
line1.end = line2.end = LeaderLine.pointAnchor(endElement);
line1.end = LeaderLine.pointAnchor(endElement);

function share() {
  // The `line1`'s attachment instance is shared with `line2`.
  line2.end = line1.end;
}

After the attachment was attached by start or end option of the leader line, when something else is specified for that option, the leader line is detached from the attachment. When the last leader line is detached, the attachment is removed from the web page automatically, and it can't be used anymore.

element

Type: HTML/SVG element

An element that is a base of the point. See x and y options.
You can specify a <body> element also. That is, you can make the leader line indicate anywhere in the document.

x, y

Type: number or string
Default: '50%'

The X and Y coordinates of the point, in pixels, relative to the top-left corner of the specified element for element option.
Each value can be a percentage of the element's width or height. For example, {x: '50%', y: '50%'} (default) indicates the center of the element, {x: '100%', y: 0} indicates the top-right corner.
And also, each value can be a negative value or a value over the element's width or height, it indicates the outside of the element.

new LeaderLine(element1, LeaderLine.pointAnchor(element3, {x: 10, y: 30}));
new LeaderLine(element2, LeaderLine.pointAnchor(element3, {x: '100%', y: 0}));

areaAnchor

attachment = LeaderLine.areaAnchor(options)

Or

attachment = LeaderLine.areaAnchor(element[, shape][, options])

An attachment that is specified instead of an element for the start or end option of the leader line, for indicating an area instead of the element.

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

The options argument is an Object that can have properties as options that are described later.

The element and shape arguments are shortcuts to options.element and options.shape. The following two codes work same.

attachment1 = LeaderLine.areaAnchor({element: element1});
attachment2 = LeaderLine.areaAnchor({element: element2, color: 'red'});
attachment3 = LeaderLine.areaAnchor({element: element3, shape: 'circle'});
attachment4 = LeaderLine.areaAnchor({element: element4, shape: 'circle', color: 'red'});
attachment1 = LeaderLine.areaAnchor(element1);
attachment2 = LeaderLine.areaAnchor(element2, {color: 'red'});
attachment3 = LeaderLine.areaAnchor(element3, 'circle');
attachment4 = LeaderLine.areaAnchor(element4, 'circle', {color: 'red'});

This attachment can be shared between multiple leader lines. See pointAnchor attachment for the sharing and the life cycle.

element

Type: HTML/SVG element

An element that is a base of the area. See x, y, width and height options.
You can specify a <body> element also. That is, any area in the document can be indicated.

shape

Type: string
Default: 'rect'

One of the following keywords to indicate the shape of the area:

  • rect
  • circle
  • polygon

ex-450

x, y

Type: number or string
Default: '-5%'

An option for when rect or circle is specified for shape option.

The X and Y coordinates for the top-left corner of the area, in pixels, relative to the top-left corner of the specified element for element option.
Each value can be a percentage of the element's width or height. For example, {x: '50%', y: '50%'} indicates the center of the element, {x: '100%', y: 0} indicates the top-right corner.
And also, each value can be a negative value or a value over the element's width or height, it indicates the outside of the element.

width, height

Type: number or string
Default: '110%'

An option for when rect or circle is specified for shape option.

The width and height of the area, in pixels.
Each value can be a percentage of the element's width or height. For example, {x: '50%', y: 0, width: '50%', height: '100%'} indicates the right half of the element.
And also, each value can be a value over the element's width or height.

radius

Type: number
Default: 0

An option for when rect is specified for shape option.

The radius to round corners of the area, in pixels.

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {x: '20%', y: '20%', width: '60%', height: '60%', radius: 10}));

points

Type: Array

An option for when polygon is specified for shape option.

An Array that contains three or more points of the polygon. Each item that is a point is an Array that contains the X and Y coordinates for the point. That is, it is Array that contains Array, like [[x1, y1], [x2, y2], ...].
The X and Y coordinates are handled as same as x and y options.

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {shape: 'polygon', points: [[10, 15], ['90%', '70%'], [10, '80%']]}));

color

Type: string
Default: color of current first attached leader line (synchronously)

A color (see Color Value) of the border of the area.
By default, a value of color option of the first leader line in current attached leader lines is set synchronously (i.e. it is changed when color of the leader line was changed).

fillColor

Type: string
Default: ''

A fill-color (see Color Value) of the area.
If it is not specified (default), the area is not painted. It is better than specifying 'rgba(0, 0, 0, 0)'.

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {x: 14, y: 20, width: 42, height: 60, radius: 10, fillColor: '#f8cd1e'}));

size

Type: number
Default: size of current first attached leader line (synchronously)

The width of the border of the area, in pixels.
If 0 is specified, the border is not drawn.

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {shape: 'polygon', points: [[10, 15], [63, 70], [10, 80]],
      fillColor: '#f8cd1e', size: 0}));

dash

Type: boolean or Object
Default: false

Enable "dashed line" effect to the border of the area with specified Object that can have properties as the following options.
Or true to enable it with all default options.

new LeaderLine(startElement,
  LeaderLine.areaAnchor(endElement,
    {x: 14, y: 20, width: 42, height: 60, radius: 8, dash: true}));
len, gap

Type: number
Default: len: size * 2 (synchronously) | gap: size (synchronously)

The size of parts of the dashed line, in pixels.
len is length of drawn lines, gap is gap between drawn lines.

mouseHoverAnchor

attachment = LeaderLine.mouseHoverAnchor(options)

Or

attachment = LeaderLine.mouseHoverAnchor(element[, showEffectName][, options])

An attachment that is specified instead of an element for the start or end option of the leader line, for showing and hiding the leader line by the mouse hovering.
This is a convenient way to call show method when a mouse enters the element, and call hide method when a mouse leaves the element. Also, a small icon and some style are added to the element.
And also, it includes a polyfill for mouseenter and mouseleave events that are not supported by some web browsers.

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

This is an attachment to provide a convenient way to do the behavior above. If you want more style or more custom behavior, you will use show/hide methods and your CSS code instead of this attachment.

The options argument is an Object that can have properties as options that are described later.

The element and showEffectName arguments are shortcuts to options.element and options.showEffectName. The following two codes work same.

attachment1 = LeaderLine.mouseHoverAnchor({element: element1});
attachment2 = LeaderLine.mouseHoverAnchor({element: element2, style: {color: 'red'}});
attachment3 = LeaderLine.mouseHoverAnchor({element: element3, showEffectName: 'draw'});
attachment4 = LeaderLine.mouseHoverAnchor(
  {element: element4, showEffectName: 'draw', style: {color: 'red'}});
attachment1 = LeaderLine.mouseHoverAnchor(element1);
attachment2 = LeaderLine.mouseHoverAnchor(element2, {style: {color: 'red'}});
attachment3 = LeaderLine.mouseHoverAnchor(element3, 'draw');
attachment4 = LeaderLine.mouseHoverAnchor(element4, 'draw', {style: {color: 'red'}});

This attachment can be shared between multiple leader lines. See pointAnchor attachment for the sharing and the life cycle.

element

Type: HTML element

An element that is a trigger for showing and hiding the leader line.

showEffectName

Type: string
Default: Value that was specified last time, or fade at first time

A value that is passed to show/hide methods as its showEffectName argument.

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

animOptions

Type: Object
Default: See showEffectName of show/hide methods

A value that is passed to show/hide methods as its animOptions argument.

style

Type: Object
Default: undefined

An Object that has additional style properties for the element.
You can specify null as a property to disable adding the style property. Note that it doesn't disable the style property. For example, if {backgroundColor: null} is specified, the attachment doesn't change current backgroundColor style property of the element.

hoverStyle

Type: Object
Default: undefined

This works same to style option except that these style properties are added when a mouse enters the element.

onSwitch

Type: function
Default: undefined

A function that is called after show/hide method, with an event argument.

captionLabel

attachment = LeaderLine.captionLabel(options)

Or

attachment = LeaderLine.captionLabel(text[, options])

An attachment that is specified instead of a string for the startLabel, middleLabel or endLabel option of the leader line, for showing a custom label on the leader line.

new LeaderLine(startElement, endElement, {
  startLabel: LeaderLine.captionLabel('START'),
  middleLabel: LeaderLine.captionLabel('MIDDLE'),
  endLabel: LeaderLine.captionLabel('END')
});

The options argument is an Object that can have properties as options that are described later.

The text argument is shortcut to options.text. The following two codes work same.

attachment1 = LeaderLine.captionLabel({text: 'LABEL-1'});
attachment2 = LeaderLine.captionLabel({text: 'LABEL-2', color: 'red'});
attachment1 = LeaderLine.captionLabel('LABEL-1');
attachment2 = LeaderLine.captionLabel('LABEL-2', {color: 'red'});

This attachment can not be shared between multiple leader lines.
When the attachment that was already attached is attached to another leader line, then, the former leader line is detached automatically. That is, the attachment moves from the leader line to another leader line.

// A new attachment instance is attached to `line1`.
line1.endLabel = LeaderLine.captionLabel('LABEL-1');

// The attachment is attached to `line2`, then, `line1` is detached.
line2.endLabel = line1.endLabel;

Also, it can move between labels of the same leader line.

// The attachment is moved from `endLabel` to `startLabel`.
line1.startLabel = line1.endLabel;

When the leader line is detached from the attachment and any leader line is not attached, the attachment is removed from the web page automatically, and it can't be used anymore.

text

Type: string

A string that is shown as a label.

offset

Type: Array
Default: Calculated suitable position

By default, a captionLabel attachment that is attached as startLabel is positioned near the socket (i.e. connecting point) that is decided by startSocket option of the leader line. In like manner, attached one as endLabel is positioned near the socket that is decided by endSocket option. Those are calculated with the size of the leader line, the font size of the label, etc.

If an Array that is [x, y] in pixels is specified for offset option, the attachment is positioned at the specified coordinates relative to the decided socket.

new LeaderLine(startElement, endElement, {
  startLabel: LeaderLine.captionLabel('START', {color: 'blue', offset: [-20, 0]})
});

lineOffset

Type: number
Default: 0

By default, a captionLabel attachment that is attached as middleLabel is positioned at the middle point of the path of the leader line.
If a length in pixels is specified for lineOffset option, the attachment is positioned at the offset point from the middle point of the path. The length is distance along the path, a negative value makes it become close to the element as start option.

color

Type: string
Default: color of current attached leader line (synchronously)

A color (see Color Value) of the text.
By default, a value of color option of the current attached leader line is set synchronously (i.e. it is changed when color of the leader line was changed).

outlineColor

Type: string
Default: '#fff'

A color (see Color Value) of an outline of the text.
The outline makes the text avoid seeming to blend with a background.
If '' is specified, the outline is not drawn. It is better than specifying 'rgba(0, 0, 0, 0)'.

Other Style Properties

You can specify the following CSS properties also:

  • fontFamily
  • fontStyle
  • fontVariant
  • fontWeight
  • fontStretch
  • fontSize
  • fontSizeAdjust
  • kerning
  • letterSpacing
  • wordSpacing
  • textDecoration

Note that some properties might not be supported by some web browsers, LeaderLine doesn't care for those.

pathLabel

attachment = LeaderLine.pathLabel(options)

Or

attachment = LeaderLine.pathLabel(text[, options])

An attachment that is specified instead of a string for the startLabel, middleLabel or endLabel option of the leader line, for showing a label along the path of the leader line.

new LeaderLine(startElement, endElement, {
  startLabel: LeaderLine.pathLabel('START'),
  middleLabel: LeaderLine.pathLabel('MIDDLE'),
  endLabel: LeaderLine.pathLabel('END')
});

The options argument is an Object that can have properties as options that are described later.

The text argument is shortcut to options.text. The following two codes work same.

attachment1 = LeaderLine.pathLabel({text: 'LABEL-1'});
attachment2 = LeaderLine.pathLabel({text: 'LABEL-2', color: 'red'});
attachment1 = LeaderLine.pathLabel('LABEL-1');
attachment2 = LeaderLine.pathLabel('LABEL-2', {color: 'red'});

This attachment can not be shared between multiple leader lines. See captionLabel attachment for the sharing and the life cycle.

Note that the characters are put along the path of the leader line from the start element toward the end element even if the path curves sharply or it is drawn toward the left. If you have to avoid those cases for important text, use captionLabel instead.

text

Type: string

A string that is shown as a label.

lineOffset

Type: number
Default: 0

By default, a pathLabel attachment that is attached as startLabel is positioned near the element as start option. In like manner, attached one as endLabel is positioned near the element as end option. And attached one as middleLabel is positioned at the middle point of the path of the leader line.
If a length in pixels is specified for lineOffset option, the attachment is positioned at the offset point from the position above. The length is distance along the path, a negative value makes it become close to the element as start option.

color

Type: string
Default: color of current attached leader line (synchronously)

A color (see Color Value) of the text.
By default, a value of color option of the current attached leader line is set synchronously (i.e. it is changed when color of the leader line was changed).

outlineColor

Type: string
Default: '#fff'

A color (see Color Value) of an outline of the text.
The outline makes the text avoid seeming to blend with a background.
If '' is specified, the outline is not drawn. It is better than specifying 'rgba(0, 0, 0, 0)'.

Other Style Properties

See the option of captionLabel.

Animation Options

duration

Type: number

A number determining how long (milliseconds) the animation will run.

new LeaderLine(
  LeaderLine.mouseHoverAnchor(startElement, 'draw', {
    animOptions: {
      duration: 3000
    }
  }),
  endElement
);

timing

Type: Array or string

An Array that is [x1, y1, x2, y2] as a "timing function" that indicates how to change the speed. It works same as that of CSS animation.

new LeaderLine(
  LeaderLine.mouseHoverAnchor(startElement, 'draw', {
    animOptions: {
      duration: 3000,
      timing: [0.5, 0, 1, 0.42]
    }
  }),
  endElement
);

You can specify one of the following keywords also. These values mean keywords for common timing functions.

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

Color Value

CSS color notations are accepted. A value might contain an alpha channel that specifies the transparency.
For example, hsl(200, 70%, 58%), rgba(73, 172, 223, 0.5), #49acdf, skyblue, etc. Some web browsers support hwb(), device-cmyk() and gray() also.


Thanks for images: Brain & Storm, Michael Gaida, CGvector

更多

友情链接

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文