OHIF Basic Viewer 模式 UI 组成与测量跟踪实现详解从 Study Panel 到 Measurement Panel【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers本文以 OHIF本仓库为 OHIF zero-footprint DICOM 查看器及肿瘤测量跟踪扩展包集合用户指南中的Overview文档为核心系统拆解Basic Viewer模式的四大 UI 组件——左侧 Study Panel、中央 Viewport、右侧 Measurement Panel 与顶部 Toolbar并结合modes/basic与modes/longitudinal的源码说明各面板是如何通过布局实例layout instance装配起来的。读完后你将能够完整理解打开一个模式后界面上每个区域由哪个扩展模块提供、测量跟踪measurement tracking数据流如何在各组件间贯通并能据此定位源码深入定制。一、模式与 UI 的关系打开模式即装配界面用户指南的 Overview 开篇即点明核心机制当你打开一个模式mode时该模式的 viewport、toolbar 和 panels 会被展示出来每个模式拥有各自不同的 UI以服务于其特定用途。官方文档随后以Basic Viewer模式longitudinal 变体为讲解对象该模式内置了测量跟踪功能。原文档将查看器分解为四个主组件Left PanelStudy Panel显示序列缩略图与序列详情Viewport渲染医学影像并显示标注Right PanelMeasurements显示标注详情Toolbar显示各类工具与 logo。从源码看这套 UI 并非硬编码而是由“模式 → 布局 → 扩展模块”三层组合而成。以 modes/basic/src/index.tsx 中的basicLayout为例布局实例用字符串引用声明了左右面板与 viewport 的命名空间export const basicLayout { id: ohif.layout, // ohif/extension-default.layoutTemplateModule.viewerLayout props: { leftPanels: [ohif.thumbnailList], // 左侧 Study Panel leftPanelResizable: true, rightPanels: [cornerstone.segmentation, cornerstone.measurements], rightPanelClosed: true, // 右侧面板默认收起 rightPanelResizable: true, viewports: [ { namespace: cornerstone.viewport, ... }, // 图像 viewport { namespace: dicomsr.viewport, ... }, // 结构化报告 viewport { namespace: dicompdf.viewport, ... }, { namespace: dicomSeg.viewport, ... }, { namespace: dicomPmap.viewport, ... }, { namespace: dicomRT.viewport, ... }, ], }, };其中各引用对应的扩展模块 ID 在同文件的常量中定义如ohif.thumbnailList指向ohif/extension-default.panelModule.seriesListcornerstone.measurements指向ohif/extension-cornerstone.panelModule.panelMeasurement。viewports数组则声明了该模式支持渲染的 SOP Class 类型栈图像、视频、WSI、ECG、SR、PDF、SEG、Pmap、RT 等与原文档“viewport 渲染图像并显示标注”的描述相互印证。二、Left PanelStudy Panel 与序列跟踪状态Basic Viewer模式的左侧面板包含与当前患者相关的研究study按原文档study-panel.md的描述分为三类Primary从研究列表打开的当前研究默认始终展开Recent该患者中与主研究日期相差 1 年以内的所有研究All数据源中该患者的全部研究。Study Panel 的另一核心职责是展示每个序列的测量跟踪状态每个序列左侧的虚线圆圈表示该序列是否正被跟踪测量。研究条目可点击展开/收起若某研究内的序列正在被跟踪即使研究处于折叠状态Measurement Panel 仍会显示相应的跟踪信息。在Basic Viewerlongitudinal模式下左侧面板的序列列表并非 default 扩展的普通实现而是被测量跟踪扩展替换。modes/longitudinal/src/index.ts 中有明确的模块替换export const tracked { measurements: ohif/extension-measurement-tracking.panelModule.trackedMeasurements, thumbnailList: ohif/extension-measurement-tracking.panelModule.seriesList, viewport: ohif/extension-measurement-tracking.viewportModule.cornerstone-tracked, };也就是说tracked.thumbnailListextension/measurement-tracking提供的seriesList替换了 basic 模式默认的ohif/extension-default.panelModule.seriesList从而获得按跟踪状态分组研究、渲染虚线圆圈等能力。该模式对扩展的依赖也在同文件声明ohif/extension-measurement-tracking: ^3.0.0。三、Viewport渲染、鼠标操作与布局切换图像可视化发生在 viewport其内部由渲染序列的 canvas或多个 canvas构成详见 viewport.md。默认交互方式为缩放Zoom右键按住上下拖拽对比度/亮度Window/Level左键上下拖拽调节对比度左右拖拽调节亮度平移Pan中键按住拖拽。切换显示序列从左侧面板拖拽目标序列的缩略图并投放到 viewport 上即可更换显示序列。切换布局点击工具栏上的 layout 图标打开布局选择器改变布局后向新 viewport 拖放序列来指定各自显示的内容从 1x1 布局切换到多格布局后每个 viewport 会带有字母标签与研究中序列分节一一对应。在源码层面原文档所述“各组件随模式而变”正对应basicLayout.viewports中多个 viewport 命名空间的声明basic 模式同时声明了 cornerstone 图像 viewport、SR viewport、PDF viewport、SEG viewport、Pmap viewport 与 RT viewport 共 6 个渲染命名空间见 modes/basic/src/index.tsx 的basicLayout。longitudinal 模式则在其前面插入一个tracked.viewportcornerstone-tracked命名空间并复用 basic 的displaySetsToDisplayexport const longitudinalInstance { ...basicLayout, id: ohif.layout, props: { ...basicLayout.props, leftPanels: [tracked.thumbnailList], rightPanels: [cornerstone.segmentation, tracked.measurements], viewports: [ { namespace: tracked.viewport, // measurement-tracking 提供的跟踪 viewport displaySetsToDisplay: basicLayout.props.viewports[0].displaySetsToDisplay, }, ...basicLayout.props.viewports, ], }, };可以推断cornerstone-trackedviewport 即为承载跟踪标注绘制与导航的主图像 viewport其右侧的tracked.measurements面板trackedMeasurements与 basic 模式的panelMeasurement相互替换从而在右侧面板呈现“跟踪测量”视图。四、Right PanelMeasurement Panel 与测量跟踪工作流右侧面板即 Measurement Panel可通过点击Measurements标题左侧的箭头展开或隐藏见 measurement-panel.md。其完整跟踪工作流如下发起跟踪选择一个测量工具并在图像上标注后会弹出询问框问是否跟踪该序列上的测量。选择 Yes该序列成为tracked series当前及后续标注会显示在右侧 Measurement Panel 中。选择 No该测量为临时temporary测量下一次标注会再次弹出询问。选择 “No, do not ask again”该研究中所有后续标注均为临时测量。后续管理操作包括重命名/打标悬停测量项点击编辑图标修改名称或在 viewport 中右键标注进行打标/改标删除将标注拖出图像外或右键选择 Delete跳转顶部 viewport 内的测量导航可前后切换测量点击 Measurement Panel 中的测量项可跳转到其所在序列对应 viewport 位置导出点击Export下载包含已绘制测量的 CSV 文件若 DICOM 服务端支持存储来自查看器的实例点击Create Report可将测量生成为 DICOM 结构化报告SR并推送至服务端例如推送到本地 DCM4CHEE。该面板的模块来源即第二节所列的tracked.measurementslongitudinal 模式或cornerstone.measurementsbasic 模式。五、Toolbar工具、预设与偏好设置工具栏包含四个主要部分返回研究列表的导航、Logo 与白标white labelling、工具Tools、偏好设置Preferences详见 toolbar.md。默认测量工具工具功能Length计算两点间的线性距离单位 mmBidirectional测量最长径LD与最长垂直径LPD单位 mmAnnotation创建带自由文本标签的定性标记Ellipse测量椭圆面积mm²及 CT 值HUCalibration校准或覆盖像素间距属性Pixel Spacing即相邻行/列像素中心间的物理距离mm从工具栏选择测量工具后它成为active工具点击工具旁的下拉箭头可展开并切换其他测量工具。其他工具组Window/Level启用后在 viewport 上自由拖拽调整窗宽窗位下拉菜单提供针对常见检查场景的预设 W/LPan / Zoom选中后分别以拖拽方式调整位置与缩放放大倍率显示在 viewport 上Image Capture相机图标下载高质量截图png/jpg弹窗中可配置文件名、宽、高与文件类型Layout Selector布局切换见上文 Viewport 小节More Tools 菜单Reset View重置位置/缩放/WL、Rotate Right顺时针旋转 90 度、Flip Horizontally水平翻转、Stack Scroll联动所有含图像 viewport 同步滚动、Magnify点击放大局部、Invert反色、Cine在选中 viewport 启停 Cine 播放器、Angle测量可调角度、Probe拖动探针查看像素值、Rectangle测量矩形面积 mm² 与 HU。工具被选中后即成为活动工具直到在 More Tools 菜单或主工具栏中选择其他工具替换。从源码看工具栏按钮与工具组同样是“模式组合”的一部分modes/basic/src/index.tsx 的modeInstance声明了toolbarSections: [{ $reference: cornerstone.toolbarSections }]与toolbarButtons: [{ $reference: cornerstone.toolbarButtons }]即 basic 家族的默认工具栏引用 cornerstone 扩展提供的工具分区onModeEnter生命周期中通过registerModeToolbar与applyToolGroupAdditions读取 customization 服务解析后的按钮列表并注册扩展模式如 segmentation、longitudinal则可在进入模式时替换或追加自己的工具组initToolGroups与工具toolGroupAdditions。六、相关文档与源码索引主题相对路径本文对应的 Overview 原文platform/docs/docs/user-guide/viewer/index.mdStudy Panel 详解platform/docs/docs/user-guide/viewer/study-panel.mdMeasurement Panel 详解platform/docs/docs/user-guide/viewer/measurement-panel.mdViewport 操作详解platform/docs/docs/user-guide/viewer/viewport.mdToolbar 工具详解platform/docs/docs/user-guide/viewer/toolbar.mdbasic 模式装配布局/面板/工具栏组合modes/basic/src/index.tsxlongitudinalBasic Viewer模式对 tracking 扩展的接入modes/longitudinal/src/index.ts测量跟踪扩展tracked 面板与 viewport 实现extension/measurement-tracking适用前提说明以上 UI 行为描述以本仓库platform/docs/docs/user-guide/viewer/下的用户指南为准源码佐证来自当前仓库modes/目录具体版本能力以 version.json 与 CHANGELOG.md 为准。若需定制面板顺序、viewport 命名空间或工具栏按钮应通过模式实例modeInstance、布局实例layout instance与 customization 机制进行组合替换而非直接修改扩展默认实现。【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考