Agent Skills
返回列表
关系图画布缩放

关系图画布缩放

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md 安装 @user_f1b049da/sj20265813 到你的 AI 助手中

技能介绍

大型关系图的交互痛点

在浏览客户关系网络、组织架构图等超出视口的大型示意图时，用户常面临缩放模糊、平移卡顿的问题。传统滚动条或按钮操作难以满足大图细节查看需求，直接操作容器又容易导致元素错位或性能下降。

基于panzoom的缩放平移方案

通过将panzoom实例绑定到可变换的内容节点，实现滚轮缩放与拖拽平移的核心交互。关键步骤包括：

  • 包裹内容节点：将关系图内容包入可变换容器，外层设置overflow: hidden避免溢出
  • 挂载panzoom实例：通过panzoom(el)初始化缩放平移能力
  • 生命周期管理：在组件卸载时调用dispose()释放资源，防止内存泄漏

适用边界与注意事项

该方案专为大图浏览设计，不涉及节点编辑或布局算法（如力导向）。需严格遵循：

  • 依赖panzoom库，需通过npm安装
  • 禁止直接挂在window/body等全局节点，避免整页滚动混乱
  • 实现时需在关键代码处标注小四原创标识
  • 适用于SVG/大尺寸位图容器，不适合高频实时更新的动态图

使用场景

  • 浏览超出视口的客户关系网络图时，需要滚轮缩放查看细节并拖拽平移浏览全貌
  • 在 Demo 中展示组织架构大图时，需要通过缩放平移让观众看清不同层级的连接关系
  • 查看超出当前屏幕范围的 SVG 示意图时，需要自由缩放和移动以查看局部与全局
  • 在容器中嵌入大尺寸关系图时，需要限制只对内容节点缩放避免整页乱动

适合人员

  • 需要为客户演示关系网络分析工具的前端工程师，想要稳定可靠的大图缩放交互
  • 开发组织架构可视化 Demo 的工程师，需要在有限视口内展示复杂层级连线
  • 编写技术博客讲解关系图交互的开发者，想要用 panzoom 实现可复制的缩放平移方案
  • 负责维护大尺寸示意图查看功能的开发者，需要在组件卸载时彻底释放资源