[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:freehand-strokes-to-graph-nodes":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 将徒手笔画转换为可编辑的图节点\n\n## 这个示例构建了什么\n\n这个示例构建了一个小型图编辑器，允许用户直接在图画布上绘制，并将每一条完成的笔画转换成一个新节点。页面从一个固定位置的初始图开始，然后叠加一个全屏绘图层、一个悬浮工具窗口、用于已选节点的尺寸调整手柄，以及一个用于删除单个已选节点的一键操作。\n\n可见结果并不是一个临时批注层。每一条完成的笔画都会变成一个真实的图节点，拥有自己的位置、宽度、高度、已存储的 SVG 路径数据、描边颜色和描边宽度。插入后，这个绘制出来的节点可以进入与初始节点相同的选择流程，因此这里最重要的要点是：将白板式输入转换为普通的 relation-graph 内容。\n\n## 数据如何组织\n\n初始图是一个本地 `RGJsonData` 对象，包含三个节点和两条连线。由于该图使用固定布局，每个初始节点在 `setJsonData(...)` 运行之前就已经包含了明确的 `x` 和 `y` 坐标。初始数据集没有外部获取过程，也没有复杂的预处理。\n\n运行时生成的节点采用不同的结构。当绘图叠加层完成一条笔画时，`MyGraph` 会把发出的 `M/L` 路径字符串",true,500,1782615410815]