[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:canvas-coordinate-ruler":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 混合图工作区的 Canvas 坐标标尺\n\n## 这个示例构建了什么\n\n这个示例构建了一个全屏 relation-graph 查看器，并在其上叠加了两个额外的工作区辅助层：位于顶部和左侧边缘的制图风格标尺，以及悬浮在画布上方的辅助窗口。图本身在同一块画布上组合了两种不同的结构：一个环形中心簇，以及其右侧的一棵独立树。\n\n用户可以平移和缩放图，通过辅助面板切换画布的滚轮和拖拽模式，移动或最小化悬浮窗口，并将当前图导出为图片。这里最值得关注的并不只是图数据本身，而是这个标尺叠加层，它会持续显示当前可见区域对应的 canvas 坐标。\n\n## 数据是如何组织的\n\n图数据不是通过一次 `setJsonData` 调用加载的。相反，`MyGraph.tsx` 内联声明了两个 `RGJsonData` 对象：根节点为 `a` 的 `treeJsonData`，以及根节点为 `2` 的 `centerJsonData`。这两组数据通过分别调用 `addNodes` 和 `addLines` 被插入到同一个图实例中。\n\n在布局运行之前，代码会修改这两组数据。树节点被设置为半透明并使用透明填充，这样连",true,500,1782615409082]