X6 连接点Connection Point与锚点完全指南从边界求交到自定义特殊连线【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6本指南围绕 X6 图编辑引擎中边如何吸附到节点这一核心机制展开系统讲解锚点Anchor与连接点Connection Point的概念、计算流程、全局与单边配置方式并基于仓库源码深入解析boundary、bbox、rect、anchor四种内置连接点与十余种内置锚点的全部参数。读完本文你将掌握如何让多条连线在节点上保持固定间隔、如何让连线精准吸附任意图形边界以及如何通过Graph.registerConnectionPoint/Graph.registerAnchor注册自定义连接点与锚点定制出贴合业务场景的特殊连线。先看效果固定连接点的多连线示例教程章节以一个可交互示例开场对应源码site/src/tutorial/intermediate/connection-point/multi/index.tsx当你在画布上拖动节点时边与节点的连接位置始终保持不变且多条边之间保留固定间隔。这与默认的连线行为连接点随节点移动而重算完全不同。其实现思路正是本指南的主题通过给每条边显式指定锚点与连接点把连接位置从跟随图形变化转变为固定在节点上的特定点。理解锚点与连接点一条参考线的两端两个概念的职责划分X6 用两个独立的概念共同决定边的起点和终点锚点Anchor边在节点上的瞄准点。默认值为center即元素的几何中心。它只负责指向哪里并不直接决定最终的起止点。连接点Connection Point决定交点怎么算。默认值为boundary即与元素边框的交点。边的绘制过程可以拆解为三步从起点元素的锚点向终点元素的锚点连一条参考线按照connectionPoint指定的计算方法求出参考线与元素图形的交点该交点即为边的起点/终点。更精确地讲参见 连接点注册表文档起点从第一个路径点若没有路径点则取终点元素的中心连参考线到起点元素的锚点再按指定连接点算法求参考线与图形的交点即为边的起点终点从最后一个路径点若没有路径点则取起点元素的中心连参考线到终点元素的锚点再按指定连接点算法求交点即为边的终点。源码中的计算链路这条计算流水线在边视图EdgeView中按固定顺序执行见 src/view/edge/index.tsfindAnchors(vertices)求出源/目标锚点sourceAnchor/targetAnchorfindRoutePoints(vertices)求出路由点路径点findConnectionPoints(routePoints, sourceAnchor, targetAnchor)结合锚点与路由点计算最终连接点。在模型层src/model/edge.ts 的getTerminalPoint(type)会先判断终点是否为纯坐标点若绑定的是 Cell则调用cell.getConnectionPoint(this, type)交给节点侧解析。而全局默认值定义在 src/graph/options.ts 的Connecting配置中anchor: center, connectionPoint: boundary, router: normal, connector: normal,使用方式一在connecting中全局配置锚点与连接点都可以在图实例的connecting选项中全局配置所有后续创建的边都会继承该默认值const graph new Graph({ connecting: { // 锚点会在节点右侧中心向上偏移 10px sourceAnchor: { name: right, args: { dy: -10, }, }, // 锚点会在节点右侧中心向上偏移 10px targetAnchor: { name: right, args: { dy: -10, }, }, // 连接点直接用锚点位置不再做边界求交 connectionPoint: anchor, }, })这里sourceAnchor/targetAnchor对应节点锚点NodeAnchorconnectionPoint对应连接点ConnectionPoint。配置对象由name内置类型名或自定义注册名与args该类型支持的参数组成当无参数时可直接写成字符串简写例如connectionPoint: boundary。需要留意的是src/graph/options.ts 还提供了更细粒度的覆盖项sourceConnectionPoint/targetConnectionPoint、sourceEdgeAnchor/targetEdgeAnchor边锚点 EdgeAnchor可用于区分起点与终点采用不同算法。使用方式二在source/target中单边配置优先级更高创建边时可以在source、target中分别指定锚点与连接点单边配置的优先级高于connecting中的全局配置graph.addEdge({ source: { cell: source, anchor: { name: right, args: { dy: -10, }, }, connectionPoint: anchor, }, target: { cell: target, anchor: { name: left, args: { dy: -10, }, }, connectionPoint: anchor, }, })边创建完成后还可以通过edge.setSource/edge.setTarget动态修改连接点见 connection-point 注册表文档edge.setSource({ cell: source-id, connectionPoint: { name: boundary, args: { sticky: true, }, }, })上述示例中锚点固定为right/left并偏移 10px、连接点直接取锚点connectionPoint: anchor正是多边固定连接位置、彼此保持间隔效果的通用写法——连接点不再参与求交边的起止点即锚点本身。四种内置连接点详解X6 提供四种内置连接点算法实现统一注册于 src/registry/connection-point/main.ts 与 src/registry/connection-point/index.ts名称说明boundary默认值与连接元素的实际图形边界求交bbox与连接元素的包围盒求交rect与连接元素的旋转后矩形区域求交anchor直接以锚点作为连接点boundary智能识别图形边界boundary会自动识别连接元素的真实几何形状如ellipse会按椭圆求交、矩形按矩形求交无法识别的元素如text、path则退化为包围盒求交行为等同于bbox。其实现位于 src/registry/connection-point/boundary.ts。参数名类型必填默认值说明offsetnumber \| Point.PointLike否0连接点的偏移量strokedboolean否true是否考虑图形描边宽度insideoutboolean否true参考线位于图形内部且无交点时是否延长参考线求交extrapolateboolean否false参考线位于图形外部且无交点时是否延长参考线求交优先级高于stickystickyboolean否false参考线位于图形外部且无交点时是否取边界上距离参考线最近的点作为连接点precisionnumber否2交点计算精度selectorstring否undefined选择器用于指定节点内某个子元素取其边界求交默认取节点内第一个非g的子元素结合源码看几个关键行为insideout当锚点在图形内部、参考线与图形无交点时若insideout false且参考线起点被图形包围盒包含则直接返回锚点见boundary.ts中localBBox.containsPoint(localRef)分支extrapolate为true时将参考线长度延长到1e6再求交localLine.setLength(1e6)保证远距离也能命中边界sticky无交点时对矩形调用getNearestPointToPoint、对椭圆调用intersectsWithLineFromCenterToPoint、其余图形调用closestPoint把连接点粘到边界最近点stroked为true时通过 src/registry/connection-point/util.ts 的getStrokeWidth读取stroke-width把连接点再外扩半个描边宽度precision对Path类图形路径会被细分成小段getSegmentSubdivisions后求交精度越高分段越细。提示boundary对复杂path图形的支持在仓库示例 examples/src/pages/edge/sticky-point.tsx 中有完整演示sticky: true, extrapolate: true配合circle、ellipse、polygon、polyline、自定义path图标等形状。anchor锚点即连接点anchor连接点直接返回参考线端点锚点位置支持以下参数参数名类型必填默认值说明offsetnumber \| Point.PointLike否0连接点偏移量其实现 src/registry/connection-point/anchor.ts 还额外支持两个可选参数aligntop | right | bottom | left与alignOffset可将参考线对齐到指定方向后再取端点源码与测试tests/registry/connection-point/anchor.spec.ts中均有对应逻辑。bbox 与 rectbbox求参考线与元素未旋转包围盒的交点。参数offset默认0、stroked默认false注意与boundary的默认值不同。rect求参考线与元素旋转后矩形区域的交点参数与bbox一致offset默认0、stroked默认false。适合元素带有angle旋转角度的场景。两种算法的参数均以对象形式传入const edge graph.addEdge({ source: { cell: source-id, connectionPoint: { name: boundary, args: { sticky: true, }, }, }, target: { cell: target-id, connectionPoint: boundary, // 无参数时可简写 }, })全局默认配置同样支持完整写法与简写new Graph({ connecting: { connectionPoint: { name: boundary, args: { sticky: true, }, }, // 简写connectionPoint: boundary }, })内置锚点NodeAnchor速查锚点决定了参考线从节点的哪个位置引出。X6 内置 12 种锚点完整参数见 NodeAnchor 注册表文档注册入口在 src/registry/node-anchor/main.ts。名称说明center元素中心点默认值top/bottom/left/right元素上/下/左/右边缘的中点midSide距离最近的那条边的中点topLeft/topRight/bottomLeft/bottomRight元素四个角orth正交点nodeCenter节点中心点其中center、top、bottom、left、right、四个角点共用一套参数参数名类型必填默认值说明dxnumber \| string否0X 轴偏移支持绝对偏移与百分比相对偏移dynumber \| string否0Y 轴偏移支持绝对偏移与百分比相对偏移rotateboolean否false是否使用随节点旋转的包围盒默认不考虑旋转角度midSide额外支持参数名类型必填默认值说明paddingnumber否0沿边方向偏移的像素距离directionH \| V否-限定连接方向如设为H则只连接节点左右侧中点根据相对位置自动判断orth支持padding默认0nodeCenter支持dx、dy默认均为0。锚点同样支持在创建边时指定、事后用edge.setSource/edge.setTarget修改、以及在connecting中全局配置const edge graph.addEdge({ source: { cell: source-id, anchor: { name: midSide, args: { dx: 10 }, }, }, target: { cell: target-id, anchor: orth, // 无参数时简写 }, }) // 全局默认 new Graph({ connecting: { anchor: { name: midSide, args: { dx: 10 }, }, }, })自定义连接点与自定义锚点当内置类型无法满足需求时X6 允许注册任意数量的自定义实现注册后即可像内置类型一样按名称使用。自定义连接点连接点定义是一个返回Point的函数export type DefinitionT ( line: Line, // 参考线 view: NodeView, // 所连接节点的视图 magnet: SVGElement, // 所连接节点上的元素 args: T, // 参数 ) Point完成定义后注册到全局注册表内部实现为 src/registry/connection-point/index.ts 的connectionPointRegistryGraph.registerConnectionPoint(custom-connection-point, (line, view, magnet, args) { // 返回连接点坐标 return new Point(0, 0) })之后即可直接按名称使用new Graph({ connecting: { connectionPoint: custom-connection-point, }, })自定义锚点锚点定义同样是一个函数签名为export type DefinitionT ( this: EdgeView, // 边视图 nodeView: NodeView, // 节点视图 magnet: SVGElement, // magnet 元素 ref: Point.PointLike | SVGElement, // 参考点/元素 args: T, // 参数 type: Edge.TerminalType, // 边端点类型source / target ) Point注册与使用方式与连接点一致Graph.registerAnchor(custom-anchor, (nodeView, magnet, ref, args, type) { // 返回锚点坐标 return new Point(0, 0) }) new Graph({ connecting: { anchor: { name: custom-anchor, }, }, })小结锚点与连接点是 X6 边渲染链路中决定边从哪里出发、落在哪里的两个关键环节锚点负责瞄准连接点负责求交。通过connecting全局配置与source/target单边配置后者优先级更高配合boundary的sticky/extrapolate/selector等参数、midSide/right等锚点的dx/dy偏移即可稳定实现多连线等间隔、吸附任意形状边界等特殊连线效果当内置能力不够时还可通过注册函数的方式完全自定义连接点与锚点的计算逻辑。建议继续阅读仓库内配套文档以获得完整参数矩阵与可交互示例ConnectionPoint 注册表文档、NodeAnchor 注册表文档以及边的基础用法 edge 教程。【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
X6 连接点Connection Point与锚点完全指南从边界求交到自定义特殊连线【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6本指南围绕 X6 图编辑引擎中边如何吸附到节点这一核心机制展开系统讲解锚点Anchor与连接点Connection Point的概念、计算流程、全局与单边配置方式并基于仓库源码深入解析boundary、bbox、rect、anchor四种内置连接点与十余种内置锚点的全部参数。读完本文你将掌握如何让多条连线在节点上保持固定间隔、如何让连线精准吸附任意图形边界以及如何通过Graph.registerConnectionPoint/Graph.registerAnchor注册自定义连接点与锚点定制出贴合业务场景的特殊连线。先看效果固定连接点的多连线示例教程章节以一个可交互示例开场对应源码site/src/tutorial/intermediate/connection-point/multi/index.tsx当你在画布上拖动节点时边与节点的连接位置始终保持不变且多条边之间保留固定间隔。这与默认的连线行为连接点随节点移动而重算完全不同。其实现思路正是本指南的主题通过给每条边显式指定锚点与连接点把连接位置从跟随图形变化转变为固定在节点上的特定点。理解锚点与连接点一条参考线的两端两个概念的职责划分X6 用两个独立的概念共同决定边的起点和终点锚点Anchor边在节点上的瞄准点。默认值为center即元素的几何中心。它只负责指向哪里并不直接决定最终的起止点。连接点Connection Point决定交点怎么算。默认值为boundary即与元素边框的交点。边的绘制过程可以拆解为三步从起点元素的锚点向终点元素的锚点连一条参考线按照connectionPoint指定的计算方法求出参考线与元素图形的交点该交点即为边的起点/终点。更精确地讲参见 连接点注册表文档起点从第一个路径点若没有路径点则取终点元素的中心连参考线到起点元素的锚点再按指定连接点算法求参考线与图形的交点即为边的起点终点从最后一个路径点若没有路径点则取起点元素的中心连参考线到终点元素的锚点再按指定连接点算法求交点即为边的终点。源码中的计算链路这条计算流水线在边视图EdgeView中按固定顺序执行见 src/view/edge/index.tsfindAnchors(vertices)求出源/目标锚点sourceAnchor/targetAnchorfindRoutePoints(vertices)求出路由点路径点findConnectionPoints(routePoints, sourceAnchor, targetAnchor)结合锚点与路由点计算最终连接点。在模型层src/model/edge.ts 的getTerminalPoint(type)会先判断终点是否为纯坐标点若绑定的是 Cell则调用cell.getConnectionPoint(this, type)交给节点侧解析。而全局默认值定义在 src/graph/options.ts 的Connecting配置中anchor: center, connectionPoint: boundary, router: normal, connector: normal,使用方式一在connecting中全局配置锚点与连接点都可以在图实例的connecting选项中全局配置所有后续创建的边都会继承该默认值const graph new Graph({ connecting: { // 锚点会在节点右侧中心向上偏移 10px sourceAnchor: { name: right, args: { dy: -10, }, }, // 锚点会在节点右侧中心向上偏移 10px targetAnchor: { name: right, args: { dy: -10, }, }, // 连接点直接用锚点位置不再做边界求交 connectionPoint: anchor, }, })这里sourceAnchor/targetAnchor对应节点锚点NodeAnchorconnectionPoint对应连接点ConnectionPoint。配置对象由name内置类型名或自定义注册名与args该类型支持的参数组成当无参数时可直接写成字符串简写例如connectionPoint: boundary。需要留意的是src/graph/options.ts 还提供了更细粒度的覆盖项sourceConnectionPoint/targetConnectionPoint、sourceEdgeAnchor/targetEdgeAnchor边锚点 EdgeAnchor可用于区分起点与终点采用不同算法。使用方式二在source/target中单边配置优先级更高创建边时可以在source、target中分别指定锚点与连接点单边配置的优先级高于connecting中的全局配置graph.addEdge({ source: { cell: source, anchor: { name: right, args: { dy: -10, }, }, connectionPoint: anchor, }, target: { cell: target, anchor: { name: left, args: { dy: -10, }, }, connectionPoint: anchor, }, })边创建完成后还可以通过edge.setSource/edge.setTarget动态修改连接点见 connection-point 注册表文档edge.setSource({ cell: source-id, connectionPoint: { name: boundary, args: { sticky: true, }, }, })上述示例中锚点固定为right/left并偏移 10px、连接点直接取锚点connectionPoint: anchor正是多边固定连接位置、彼此保持间隔效果的通用写法——连接点不再参与求交边的起止点即锚点本身。四种内置连接点详解X6 提供四种内置连接点算法实现统一注册于 src/registry/connection-point/main.ts 与 src/registry/connection-point/index.ts名称说明boundary默认值与连接元素的实际图形边界求交bbox与连接元素的包围盒求交rect与连接元素的旋转后矩形区域求交anchor直接以锚点作为连接点boundary智能识别图形边界boundary会自动识别连接元素的真实几何形状如ellipse会按椭圆求交、矩形按矩形求交无法识别的元素如text、path则退化为包围盒求交行为等同于bbox。其实现位于 src/registry/connection-point/boundary.ts。参数名类型必填默认值说明offsetnumber \| Point.PointLike否0连接点的偏移量strokedboolean否true是否考虑图形描边宽度insideoutboolean否true参考线位于图形内部且无交点时是否延长参考线求交extrapolateboolean否false参考线位于图形外部且无交点时是否延长参考线求交优先级高于stickystickyboolean否false参考线位于图形外部且无交点时是否取边界上距离参考线最近的点作为连接点precisionnumber否2交点计算精度selectorstring否undefined选择器用于指定节点内某个子元素取其边界求交默认取节点内第一个非g的子元素结合源码看几个关键行为insideout当锚点在图形内部、参考线与图形无交点时若insideout false且参考线起点被图形包围盒包含则直接返回锚点见boundary.ts中localBBox.containsPoint(localRef)分支extrapolate为true时将参考线长度延长到1e6再求交localLine.setLength(1e6)保证远距离也能命中边界sticky无交点时对矩形调用getNearestPointToPoint、对椭圆调用intersectsWithLineFromCenterToPoint、其余图形调用closestPoint把连接点粘到边界最近点stroked为true时通过 src/registry/connection-point/util.ts 的getStrokeWidth读取stroke-width把连接点再外扩半个描边宽度precision对Path类图形路径会被细分成小段getSegmentSubdivisions后求交精度越高分段越细。提示boundary对复杂path图形的支持在仓库示例 examples/src/pages/edge/sticky-point.tsx 中有完整演示sticky: true, extrapolate: true配合circle、ellipse、polygon、polyline、自定义path图标等形状。anchor锚点即连接点anchor连接点直接返回参考线端点锚点位置支持以下参数参数名类型必填默认值说明offsetnumber \| Point.PointLike否0连接点偏移量其实现 src/registry/connection-point/anchor.ts 还额外支持两个可选参数aligntop | right | bottom | left与alignOffset可将参考线对齐到指定方向后再取端点源码与测试tests/registry/connection-point/anchor.spec.ts中均有对应逻辑。bbox 与 rectbbox求参考线与元素未旋转包围盒的交点。参数offset默认0、stroked默认false注意与boundary的默认值不同。rect求参考线与元素旋转后矩形区域的交点参数与bbox一致offset默认0、stroked默认false。适合元素带有angle旋转角度的场景。两种算法的参数均以对象形式传入const edge graph.addEdge({ source: { cell: source-id, connectionPoint: { name: boundary, args: { sticky: true, }, }, }, target: { cell: target-id, connectionPoint: boundary, // 无参数时可简写 }, })全局默认配置同样支持完整写法与简写new Graph({ connecting: { connectionPoint: { name: boundary, args: { sticky: true, }, }, // 简写connectionPoint: boundary }, })内置锚点NodeAnchor速查锚点决定了参考线从节点的哪个位置引出。X6 内置 12 种锚点完整参数见 NodeAnchor 注册表文档注册入口在 src/registry/node-anchor/main.ts。名称说明center元素中心点默认值top/bottom/left/right元素上/下/左/右边缘的中点midSide距离最近的那条边的中点topLeft/topRight/bottomLeft/bottomRight元素四个角orth正交点nodeCenter节点中心点其中center、top、bottom、left、right、四个角点共用一套参数参数名类型必填默认值说明dxnumber \| string否0X 轴偏移支持绝对偏移与百分比相对偏移dynumber \| string否0Y 轴偏移支持绝对偏移与百分比相对偏移rotateboolean否false是否使用随节点旋转的包围盒默认不考虑旋转角度midSide额外支持参数名类型必填默认值说明paddingnumber否0沿边方向偏移的像素距离directionH \| V否-限定连接方向如设为H则只连接节点左右侧中点根据相对位置自动判断orth支持padding默认0nodeCenter支持dx、dy默认均为0。锚点同样支持在创建边时指定、事后用edge.setSource/edge.setTarget修改、以及在connecting中全局配置const edge graph.addEdge({ source: { cell: source-id, anchor: { name: midSide, args: { dx: 10 }, }, }, target: { cell: target-id, anchor: orth, // 无参数时简写 }, }) // 全局默认 new Graph({ connecting: { anchor: { name: midSide, args: { dx: 10 }, }, }, })自定义连接点与自定义锚点当内置类型无法满足需求时X6 允许注册任意数量的自定义实现注册后即可像内置类型一样按名称使用。自定义连接点连接点定义是一个返回Point的函数export type DefinitionT ( line: Line, // 参考线 view: NodeView, // 所连接节点的视图 magnet: SVGElement, // 所连接节点上的元素 args: T, // 参数 ) Point完成定义后注册到全局注册表内部实现为 src/registry/connection-point/index.ts 的connectionPointRegistryGraph.registerConnectionPoint(custom-connection-point, (line, view, magnet, args) { // 返回连接点坐标 return new Point(0, 0) })之后即可直接按名称使用new Graph({ connecting: { connectionPoint: custom-connection-point, }, })自定义锚点锚点定义同样是一个函数签名为export type DefinitionT ( this: EdgeView, // 边视图 nodeView: NodeView, // 节点视图 magnet: SVGElement, // magnet 元素 ref: Point.PointLike | SVGElement, // 参考点/元素 args: T, // 参数 type: Edge.TerminalType, // 边端点类型source / target ) Point注册与使用方式与连接点一致Graph.registerAnchor(custom-anchor, (nodeView, magnet, ref, args, type) { // 返回锚点坐标 return new Point(0, 0) }) new Graph({ connecting: { anchor: { name: custom-anchor, }, }, })小结锚点与连接点是 X6 边渲染链路中决定边从哪里出发、落在哪里的两个关键环节锚点负责瞄准连接点负责求交。通过connecting全局配置与source/target单边配置后者优先级更高配合boundary的sticky/extrapolate/selector等参数、midSide/right等锚点的dx/dy偏移即可稳定实现多连线等间隔、吸附任意形状边界等特殊连线效果当内置能力不够时还可通过注册函数的方式完全自定义连接点与锚点的计算逻辑。建议继续阅读仓库内配套文档以获得完整参数矩阵与可交互示例ConnectionPoint 注册表文档、NodeAnchor 注册表文档以及边的基础用法 edge 教程。【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
