[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:line-endpoint-gap-control":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在两种布局中实时控制连线端点间距\n\n## 本示例构建了什么\n本示例构建了一个用于比较连线端点间距的全屏对照面板。其中一个互不连通的子图会渲染为居中的环形聚类，并使用从边框到边框的直线连接；另一个子图则渲染为从左到右的树形结构，并使用带标签的曲线连接。一个悬浮面板会说明该行为、提供范围滑块，并开放继承而来的画布工具能力。\n\n真正的重点不在示例数据本身，而在于你可以通过修改 `junctionOffset`，在运行时让每条连线的端点都从节点边框向外移开，然后在同一张画布上对比两种不同连接样式下的视觉效果。\n\n## 数据是如何组织的\n图被拆分为 `MyGraph.tsx` 中两个内联的 `RGJsonData` 对象：`treeJsonData` 和 `centerJsonData`。它们各自拥有自己的 `rootId`、`nodes` 和 `lines`，示例始终不会把它们合并成一个连通数据集。\n\n在布局运行之前，这两个数据集都会先在代码中做预处理。树图节点会被设置为半透明，并使用透明填充。中心区域的节点会被重新设置为圆形且尺寸更小，中心区域的连线也会被切换为两端都使用 `RGJunc",true,500,1782615374662]