cornerstoneTools多视口同步实战：7种Synchronizer让医学影像联动如丝般顺滑

cornerstoneTools多视口同步实战7种Synchronizer让医学影像联动如丝般顺滑【免费下载链接】cornerstoneToolsA framework for tools built on top of Cornerstone.项目地址: https://gitcode.com/gh_mirrors/co/cornerstoneToolscornerstoneTools是构建在 Cornerstone.js 之上的开源工具框架为医学影像浏览提供丰富的交互工具。其中多视口同步Multi-viewport Synchronization能力尤为实用通过内置的7种Synchronizer 同步器你可以让多个视口在平移缩放、窗宽窗位、滚动定位等操作上实时联动实现丝般顺滑的联动体验。为什么医学影像需要多视口同步在放射科、PACS 系统中医生常常需要同时对比多个视口 同一检查的不同序列CT 平扫 增强同一部位的随访对比去年的片子 vs 今年的片子CT 与 PET 融合显示topogram 与胸部断层联动如果没有同步机制你在 A 视口调窗宽窗位、翻页滚动时B 视口却纹丝不动——读片体验会非常割裂。cornerstoneTools 的同步器正是为了解决这个问题而设计的。核心机制一个事件驱动的 Synchronizer所有同步功能都基于 Synchronizer 基类它的原理非常直观源元素Source触发事件 → 同步器捕获 → 把变更应用到所有目标元素Target关键设计点事件驱动构造时传入事件名如cornerstoneimagerendered和处理函数源元素上该事件一触发同步逻辑立即执行源/目标双向管理add(element)让元素同时作为源和目标实现任意视口操作、全部视口跟随防回环内置ignoreFiredEvents标记目标视口被更新时不会再反向触发同步避免死循环无感更新setViewport/displayImage封装了在更新期间暂停同步的能力自动清理元素被禁用ELEMENT_DISABLED时自动移出同步组创建同步器只需三行const synchronizer new cornerstoneTools.Synchronizer( cornerstoneimagerendered, cornerstoneTools.wwwcSynchronizer );随后把每个视口元素synchronizer.add(element)即可。7种Synchronizer全解析7 个同步器均位于 src/synchronization/ 目录覆盖影像联动的全部核心场景同步器同步内容典型场景panZoomSynchronizer缩放比例 平移位置同序列双屏对比wwwcSynchronizer窗宽窗位 反色不同序列统一观感stackScrollSynchronizer翻页方向与幅度双屏同步滚动stackImageIndexSynchronizer按索引对齐两个等长序列对齐翻页stackImagePositionSynchronizer按解剖位置就近对齐CT 与 PET 空间配准stackImagePositionOffsetSynchronizer带固定偏移的位置对齐不同层厚的序列联动updateImageSynchronizer强制目标视口重绘标注变化后刷新1. panZoomSynchronizer平移缩放联动源码src/synchronization/panZoomSynchronizer.js把源视口的scale和translation直接复制到目标视口。它会先比对数值相同则跳过避免无谓重绘。配合ZoomToolPanTool使用双屏浏览时两个视口的视野始终一致放大看结节时另一屏跟着走。2. wwwcSynchronizer窗宽窗位同步源码src/synchronization/wwwcSynchronizer.js同步windowWidth、windowCenter和invert三个属性。调窗宽窗位是读片最高频的操作让所有视口共用一套窗位医生调一次、处处生效。示例见 examples/tools/wwwc-sync.md。3. stackScrollSynchronizer翻页方向同步源码src/synchronization/stackScrollSynchronizer.js与按绝对位置对齐不同它同步的是滚动动作本身读取事件的direction让目标视口从当前位置翻相同张数并用clip把索引限制在序列边界内。适合两个长度不同的序列一起翻的场景。4. stackImageIndexSynchronizer按索引对齐源码src/synchronization/stackImageIndexSynchronizer.js将目标序列翻到与源序列相同索引的图像超出范围则钳制到边界。两个序列帧数一致时如两次随访扫描它能保证同一编号层严格对齐还自动触发目标视口的加载回调显示加载进度。5. stackImagePositionSynchronizer按解剖位置就近对齐源码src/synchronization/stackImagePositionSynchronizer.js这是最懂医学的同步器它读取每张图像的 DICOMimagePositionPatient患者坐标系位置遍历目标序列找出空间距离最近的那张图。即使两个序列层数、层厚都不同也能让视口显示解剖位置最接近的层面——CT/PET 融合、多序列对照的标配。6. stackImagePositionOffsetSynchronizer带偏移的位置对齐源码src/synchronization/stackImagePositionOffsetSynchronizer.js在上一个同步器基础上增加了一个positionDifference偏移量Synchronizer 在初始化时会自动测量各视口当前显示图像的间距之后始终按这个偏移寻找最近图像。适合两个序列本来就不在同一位置的联动如不同期相无需人工对齐起点。7. updateImageSynchronizer重绘同步源码src/synchronization/updateImageSynchronizer.js最简单也最实用源视口重绘时调用目标视口的updateImage立即刷新。适合在目标视口上叠加了标注、分割结果等动态内容的场景保证所有屏幕的叠加层同框刷新。三步把同步器接进你的工具以官方 sync-tool 示例topogram 胸部 CT 双视口为例接入流程只有三步创建同步器new cornerstoneTools.Synchronizer(cornerstoneimagerendered, 同步处理函数)注册视口图像加载完成后对每个视口元素执行synchronizer.add(element)并synchronizer.enabled true传给工具在激活工具时通过工具选项synchronizationContext: synchronizer把同步器交给工具这样你在任一视口上操作 Wwwc、StackScroll 等工具时其余视口就会自动跟随整个联动过程无需手写任何事件监听代码。选型指南该用哪个同步器你的需求推荐同步器两个视口同序列、同视角浏览panZoomSynchronizer多个序列统一窗宽窗位wwwcSynchronizer序列长度不同想一起翻页stackScrollSynchronizer序列长度相同按层号严格对齐stackImageIndexSynchronizer不同序列按解剖位置对齐stackImagePositionSynchronizer两个序列起点位置不同stackImagePositionOffsetSynchronizer多视口标注/叠加层同步刷新updateImageSynchronizer小贴士多个同步器可以叠加使用为同一组视口分别创建 Wwwc 与 PanZoom 两个 Synchronizer 实例一次配置即可得到平移、缩放、调窗、翻页全联动的专业级读片界面。相关源码文件速查同步基类src/synchronization/Synchronizer.js平移缩放src/synchronization/panZoomSynchronizer.js窗宽窗位src/synchronization/wwwcSynchronizer.js滚动翻页src/synchronization/stackScrollSynchronizer.js索引对齐src/synchronization/stackImageIndexSynchronizer.js位置对齐src/synchronization/stackImagePositionSynchronizer.js偏移位置对齐src/synchronization/stackImagePositionOffsetSynchronizer.js重绘同步src/synchronization/updateImageSynchronizer.js双视口联动示例examples/_layouts/sync-tool.html掌握这 7 个 Synchronizer你就拥有了构建专业级多视口医学影像工作台的全部联动能力——让每一屏都如丝般顺滑地跟随医生操作。【免费下载链接】cornerstoneToolsA framework for tools built on top of Cornerstone.项目地址: https://gitcode.com/gh_mirrors/co/cornerstoneTools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考