[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:interactive-line-path-editing":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用内置覆盖层控制柄编辑现有连线路径\n\n## 这个示例构建了什么\n\n这个示例构建了一个紧凑的图编辑工作区，用于修改已有连接的路径。界面包含一个全高图画布、一个浮动说明窗口、默认显示为绿色的弧形连线，以及一个点状背景，让画布更像可编辑的工作面，而不是只读查看器。\n\n用户可以点击连线来激活内置的路径编辑控制柄，在画布上拖拽进行框选，并通过点击空白区域清除当前编辑状态。这个示例最值得关注的地方在于，它把连线路径编辑单独抽离出来，而没有扩展成一个完整的图编辑器，因此选择状态与连线编辑之间的关系更容易观察和理解。\n\n## 数据是如何组织的\n\n图数据以内联方式声明为一个 `RGJsonData` 对象。它使用 `rootId`、一个仅包含 `id` 和 `text` 字段的扁平 `nodes` 数组，以及一个包含 `from`、`to`、`text` 和部分连线级覆盖项（如 `lineShape` 和 junction points）的 `lines` 数组。\n\n在调用 `setJsonData()` 之前没有任何预处理流程。组件会在 `initializeGraph()` 中创建这份数据集，",true,500,1782615408021]