开始
连线是 X6 中十分重要的一部分，X6 内置了很多实用的连线性能，也提供了优雅的扩大机制 ，这是相比于其余流程图框架占据绝对优势的中央。本文通过实现流程图的连线性能来一步步介绍 X6 的连线机制。
实现
图形定义
X6 中连线分两种模式，代码生成的和用户手动拖拽而成，首先来看怎么通过代码建设连线：
// source 或 target 是坐标点graph.addEdge({ source: [0, 0], target: [100, 100]})// source 或 target 是节点对象graph.addEdge({ source: sourceNode, target: targetNode,})// source 或 target 是节点 IDgraph.addEdge({ source: 'sourceId', target: 'targetId',})// source 或 target 是连贯桩graph.addEdge({ source: { cell: 'cellId1', port: 'portId1' }, target: { cell: 'cellId2', port: 'portId2' }})如果想通过手动操作来创立连线，须要有两个条件：
- 须要从具备 magnet: true 属性的元素上能力手动拖拽出连线
- 须要在全局 connecting 配置中自定义 createEdge 办法
import { Graph, Shape } from '@antv/x6'const graph = new Graph({ connecting: { createEdge() { return new Shape.Edge() }, },})graph.addNode({ shape: 'rect', x: 100, y: 100, width: 80, height: 40, attrs: { body: { stroke: 'red', magnet: true } }})graph.addNode({ shape: 'rect', x: 400, y: 100, width: 80, height: 40, attrs: { body: { stroke: 'red', magnet: true } }})默认的连线款式并不难看，咱们常常须要本人来定义连线的款式，其实连线和图形都是由 markup 和 attrs 来定义的，默认连线的 markup 为：
[ { tagName: 'path', selector: 'wrap', groupSelector: 'lines', attrs: { fill: 'none', cursor: 'pointer', stroke: 'transparent', strokeLinecap: 'round', }, }, { tagName: 'path', selector: 'line', groupSelector: 'lines', attrs: { fill: 'none', pointerEvents: 'none', }, },]其中 line 为理论展现的连线，wrap 是为了不便响应交互的占位元素。个别场景咱们不须要去自定义连线的 markup，然而咱们常常须要配置 attrs 来定制连线款式：
graph.addEdge({ source: 'sourceId', target: 'targetId', attrs: { line: { stroke: '#000', // 连线色彩 strokeWidth: 1, // 连线宽度 }, },})连线的箭头也是非常容易配置，比方咱们想将下面箭头批改为实心箭头，并且显示的修长一点儿：
graph.addEdge({ source: 'sourceId', target: 'targetId', attrs: { line: { stroke: '#000', strokeWidth: 1, targetMarker: { name: 'block', width: 12, height: 8, } }, },})和节点相似，动静批改连线的属性形式如下：
const edge = graph.addEdge({ source: 'sourceId', target: 'targetId', attrs: { line: { stroke: '#000', strokeWidth: 1, }, },})edge.attr('line/stroke', '#ccc')同样，连线也提供了注册自定义连线的形式来解决反复定义问题：
Graph.registerEdge('custom-edge', { inherit: 'edge', attrs: { line: { strokeWidth: 1, stroke: '#5755a1', targetMarker: { name: 'path', d: 'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z', } }, },})graph.addEdge({ shape: 'custom-edge', source: [50, 50], target: [300, 50],})graph.addEdge({ shape: 'custom-edge', source: [50, 150], target: [300, 150], attrs: { line: { stroke: '#31d0c6' } }})路由和连接器
在每一种图场景中，连线状态有所不同，比方流程图和思维导图的连线款式：
流程图的连线是横平竖直的，思维导图的连线是一种树状，X6 提供了路由和连接器两个概念来实现不同状态的连线。路由就是在原有连线根底上减少一些固定点，让连线合乎某种规定，比方 orth 路由，减少固定点后，边的每一条线段都是程度或垂直的正交线段。连接器就是将连线所有点通过肯定规定加工后，产生肯定形态的连线，比方 smooth 连接器，是用三次贝塞尔曲线线连贯终点、路由点和起点。
在咱们的流程图中，须要横平竖直的连线，并且能避开重合的图形，所以抉择 manhattan 路由，而后连线的拐角处须要平滑解决，这里抉择 rounded 连接器。路由和连接器都能够在 connecting 配置中全局配置（对所有连线无效），也能够在一条连线中独自配置：
// 全局配置const graph = new Graph({ connecting: { router: 'manhattan', connector: { name: 'rounded', args: { radius: 8, } } }})// 独自针对一条边配置graph.addEdge({ source: 'sourceId', target: 'targetId', router: 'manhattan', connector: { name: 'rounded', args: { radius: 8, } }})终点和起点
连线的终点和起点是由 NodeAnchor 和 ConnectionPoint 独特确定。
- 终点：从第一个门路点或指标节点的核心（没有门路点时）画一条参考线到源节点的锚点，而后依据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从最初一个门路点或源节点的核心（没有门路点时）画一条参考线到指标节点的锚点，而后依据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
下面的形容可能比拟难以了解，能够看上面的例子，图形 1 和 图形 2 的 NodeAnchor 默认在图形核心，ConnectionPoint 默认是 boundary，也就是图形边框，从锚点 1 拉出一条线来连贯到锚点 2，这条线与图形边框的交点就是连线的终点和起点。
常常会遇到这种状况，终点和起点在连贯桩的核心，那么 NodeAnchor 和 ConnectionPoint 该怎么设置呢？
const graph = new Graph({ // 锚点在连贯桩的核心，连接点是锚点自身 connecting: { anchor: 'center', connectionPoint: 'anchor', }})工具
工具是渲染在节点/边上的小部件，用于加强节点/边的交互能力，当初咱们须要在连线上减少一个线段工具，在边的每条线段的核心渲染一个工具条，能够拖动工具条调整线段两端的门路点的地位。
graph.addEdge({ tools: [ { name: 'segments', args: { attrs: { fill: '#459CDB', } } } ]})最初
连线是 X6 的外围性能之一，通过本文能够理解到连线的根底用法，咱们能够实现大部分场景下连线的配置，在一些简单场景下，还须要在连线上定制标签的需要，能够参考 edge-label。
- 源码：传送门
- 记得给 X6 仓库加星