ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

OHIF Viewer 界面完全指南:Basic Viewer 模式的四大组件与测量追踪工作流

OHIF Viewer 界面完全指南:Basic Viewer 模式的四大组件与测量追踪工作流 OHIF Viewer 界面完全指南Basic Viewer 模式的四大组件与测量追踪工作流【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers本文基于 OHIF Viewer 3.11 用户文档系统拆解Basic Viewerlongitudinal模式的界面构成左侧研究面板Study Panel、视口Viewport、右侧测量面板Measurement Panel与工具栏Toolbar四大组件并结合本仓库的源码实现ViewerLayout、mode 定义、toolbarButtons、measurement-tracking 扩展与配套子文档说明每个组件的功能、交互方式与测量追踪Measurement Tracking的完整工作流。读完本文你将能够熟练操作 Basic Viewer 完成图像浏览、布局切换、标注测量、追踪管理、DICOM SR 导入导出与报告生成等日常阅片任务。一、模式驱动的界面什么是 Viewer在 OHIF v3 中当你打开一个mode模式时该模式所定义的视图结构就会被渲染出来包括视口viewport、工具栏toolbar以及左右面板panels。需要特别强调的是每个 mode 拥有不同的 UI服务于不同的用途。例如Basic Viewer、Segmentation、TMTV、Longitudinal等模式其布局、工具和面板各不相同。本文聚焦于带测量追踪功能的Basic Viewer模式即 longitudinal 变体其完整界面如下图所示从实现角度看Viewer 的整体布局由ohif/extension-default扩展提供的ViewerLayout组件负责渲染。该组件接收来自 mode 的leftPanels、rightPanels、viewports、leftPanelClosed、rightPanelClosed等配置将整个界面组织为一个可伸缩的三段式布局左侧面板视口网格右侧面板核心逻辑见 extensions/default/src/ViewerLayout/index.tsx。布局通过panelService.getPanels(side)动态判断左右两侧是否有面板需要渲染见 ViewerLayout/index.tsx并通过ResizablePanelGroup支持拖拽调整面板宽度。将 Viewer 拆解开来可以归纳为以下四大主组件左侧面板研究面板 Study Panel显示带系列详情series details的缩略图列表视口Viewport渲染图像并显示标注annotations右侧面板测量面板 Measurements显示标注详情工具栏Toolbar显示工具与 Logo下文将逐一详解每个组件及其子元素。二、左侧面板Study Panel研究面板在Basic Viewer模式下左侧面板展示当前患者相关的所有研究studies共分三类分类含义Primary从研究列表Study List中打开的研究默认始终展开Recent该患者所有研究日期与主研究相差在 1 年以内的研究All数据源source repository中该患者的全部研究Study Panel 还会展示每个系列series的测量追踪状态每个系列左侧的虚线圆圈表示该系列是否处于测量追踪状态tracked for measurement。详细说明见 user-guide/viewer/study-panel.md。交互要点点击 Study Panel 中的研究信息即可展开或折叠该研究如果某个研究内有系列处于追踪状态即使该研究处于折叠状态测量面板Measurement Panel仍会显示相关信息后续文档还规划了针对 SRStructured Report结构化报告功能的说明。在源码层面纵向longitudinal模式将左侧面板指定为测量追踪扩展提供的缩略图列表leftPanels: [tracked.thumbnailList], // ohif/extension-measurement-tracking.panelModule.seriesList见 modes/longitudinal/src/index.ts。而基础basic模式则使用默认扩展的seriesList面板ohif/extension-default.panelModule.seriesList见 modes/basic/src/index.tsx。两个模式均开启leftPanelResizable: true允许用户拖拽调整面板宽度。三、视口图像渲染与交互操作图像的渲染发生在Viewport视口中视口包含用于绘制序列的 canvas或一组 canvas。默认图像操作默认情况下你可以在视口中进行以下三类基本操作操作触发方式效果Zoom缩放按住鼠标右键上下拖拽放大 / 缩小图像Contrast / Brightness对比度 / 亮度按住鼠标左键上下拖拽调整对比度左右拖拽调整亮度调整窗宽窗位Pan平移按住鼠标中键拖拽移动图像位置这些交互由 Cornerstone 渲染引擎与工具cornerstoneTools提供相关视口注册见 modes/basic/src/index.tsx 中的cornerstone.viewport模块。更换显示的系列要更换视口中显示的系列可以从左侧面板拖拽目标系列的缩略图将其拖放到视口上即可完成替换。更换布局Layout点击工具栏上的布局图标会弹出布局选择器 UI。更改布局后可以为每个新建的视口分别选择要显示的系列同样通过拖拽缩略图到对应视口的方式。值得注意的是当布局从 1×1 切换为多视口后每个视口会被标记一个字母该字母与其在研究列表中的系列区域一一对应方便你快速识别各视口正在显示哪个系列布局切换通过setViewportGridLayout命令实现见 modes/basic-dev-mode/src/toolbarButtons.ts布局选择器最多支持 3 行 × 4 列。更详细的视口交互说明见 user-guide/viewer/viewport.md。四、右侧面板Measurement Panel测量面板在Basic Viewer模式下右侧面板即Measurement Panel测量面板。点击 Measurements 左侧的箭头可以展开或隐藏该面板。发起测量追踪选择任一测量工具并在图像上标记后会弹出对话框询问是否为该系列开启测量追踪三种选择对应的行为选项行为Yes该系列成为tracked series追踪系列当前测量与后续测量都会显示在右侧测量面板中No该测量变为临时temporary测量下一次标注时仍会再次弹出追踪提示No, do not ask again该研究上的所有标注都保持临时状态不再询问实现上右侧面板由ohif/extension-measurement-tracking.panelModule.trackedMeasurements追踪测量面板与ohif/extension-cornerstone.panelModule.panelSegmentation分割面板共同组成见 modes/longitudinal/src/index.ts 与 modes/longitudinal/src/index.ts。测量面板本身是PanelMeasurement的包装组件通过useMeasurements钩子获取经过筛选的测量数据后交由StudyMeasurements子组件渲染见 extensions/cornerstone/src/panels/PanelMeasurement.tsx。标注Labeling测量重命名将鼠标悬停在某条测量上点击编辑图标即可修改测量名称快捷标注 / 重新标注在视口中右键点击该测量同样可以进行标注操作。删除测量删除一条测量有两种方式在视口中将该测量拖拽到图像外部在视口中右键点击该测量并选择 Delete。跳转到某条测量视口顶部的测量导航按钮可以切换上一条 / 下一条测量如果包含某条测量的系列当前正显示在视口中直接在测量面板中点击该测量即可跳转并定位显示。导出测量与生成报告点击Export按钮会下载一份包含全部已绘制测量的CSV 文件到本地如果你的 DICOM 服务器已配置为允许 viewer 写入实例还可以点击Create Reportviewer 会基于测量生成一份DICOM Structured ReportSR并推送回服务器例如本地运行 DCM4CHEE 的场景。完整的测量绘制与导出流程说明见 user-guide/viewer/measurement-panel.md。五、工具栏工具、Logo 与偏好设置工具栏Toolbar的四个主要组成部分返回研究列表的导航按钮返回 Study ListLogo 与白标white labelling工具Tools偏好设置Preferences工具栏的 UI 骨架由ViewerHeader渲染其右侧项默认为撤销/重做、患者信息以及 About / Preferences 菜单入口可通过ohif.headerRightSide定制化项进行重排见 extensions/default/src/ViewerLayout/ViewerHeader.tsx。返回按钮会根据当前数据源名称构造查询参数并跳回/路由即 Study List见 ViewerHeader.tsx。测量工具Measurement ToolsBasic Viewer 默认提供以下测量工具工具功能说明Length长度计算两点间的线性距离单位mmBidirectional双向径创建最长径LD与最长垂直径LPD测量单位mmAnnotation标注创建带自由文本标签的定性标记Ellipse椭圆测量椭圆面积mm²与 Hounsfield 值HUCalibration校准校准覆盖Pixel Spacing 属性即患者体内相邻像素中心之间的物理距离以数值对表示相邻行间距分隔符相邻列间距单位 mm从工具栏选择某个测量工具后它会成为当前激活工具active tool点击测量工具组旁的下拉箭头caret可以展开并选择其他工具。这些按钮在源码中以数据驱动方式声明例如 Length、Bidirectional、Ellipse、Circle 等均通过setToolActiveToolbar执行setToolActive命令并指定 toolGroupIds来激活对应toolName完整定义见 modes/basic-dev-mode/src/toolbarButtons.ts。Window/Level窗宽窗位Window/Level工具用于调整渲染图像的窗宽window width与窗位window level点击该工具进入自由调整模式在视口上点击并拖拽即可自由调整窗宽窗位。点击工具旁的下拉箭头还可以从预定义 W/L 预设中选择常见影像场景的显示参数Pan 与 ZoomZoom选中后在图像上点击并拖拽即可调整缩放放大倍数会显示在视口中Pan选中后在图像上点击并拖拽即可调整图像位置。Image Capture图像捕获点击相机图标可以下载一张高质量图像截图支持常见图片格式png、jpg在弹出的模态框中可以配置文件名、图像宽高、文件类型后再下载到本地该功能由showDownloadViewportModal命令触发并会排除 video 与 wholeSlide 类型的视口见 modes/basic-dev-mode/src/toolbarButtons.ts。Layout Selector布局选择器详见上文更换布局一节。More Tools 菜单更多工具More Tools菜单中提供的工具如下工具功能Reset View重置所有图像操作位置、缩放、窗宽窗位Rotate Right图像顺时针旋转 90 度Flip Horizontally图像水平翻转 180 度Stack Scroll联动所有包含图像的视口同步滚动Magnify点击图像放大查看特定区域Invert反转颜色比例Cine在当前选中的视口切换 Cine 播放器点击 Cine 播放器上的x或再次点击该工具可关闭Angle在图像上测量可调角度Probe拖拽探针查看像素值Rectangle测量矩形区域面积mm²与 HU 值当从More Tools菜单中选择某个工具后它会成为激活工具直到被主工具栏或其他 More Tools 菜单项替换。上述 Reset、RotateRight、FlipHorizontal、Invert、StackScroll 等按钮的命令定义resetViewport、rotateViewportCW、flipViewportHorizontal、invertViewport、StackScroll工具激活均可在 modes/basic-dev-mode/src/toolbarButtons.ts 中查到。完整的工具说明见 user-guide/viewer/toolbar.md。六、测量追踪工作流从标注到 DICOM SROHIF v3 的Basic Viewer实现了完整的Measurement Tracking测量追踪工作流其能力包括绘制标注并显示在测量面板中基于追踪测量生成报告并导出为DICOM SR加载已导出的 DICOM SR将测量在 viewer 中重新水合re-hydrate。状态图标每个视口左侧的图标标识该系列当前包含的内容类型tracked measurement已追踪测量untracked measurement未追踪测量Structured Report结构化报告Locked不可编辑Structured Report锁定的结构化报告追踪与未追踪的测量整个追踪决策流程如下简单总结创建标注时会弹出是否开始追踪的提示——开始追踪标注样式变为实线标注详情显示在测量面板中拒绝追踪测量被视为临时状态标注保持虚线样式不显示在右侧面板中且无法导出。两种状态的系列图标对比如下这一实线 vs 虚线的样式差异在源码中有明确的对应实现TrackedCornerstoneViewport根据系列是否在trackedSeries中动态切换工具标注样式——被追踪时清除全局虚线并将 ReferenceLines 设为虚线未追踪时全局lineDash设为4,4虚线见 extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx。该组件同时监听cornerstoneViewportService的VIEWPORT_DATA_CHANGED事件与VOLUME_VIEWPORT_NEW_VOLUME事件来同步追踪状态见 TrackedCornerstoneViewport.tsx。读写 DICOM SROHIF v3 提供对DICOM Structured ReportSR的完整读写与映射支持可将 SR 映射为可交互的 Cornerstone 工具。当你将已导出的 DICOM SR 加载进 viewer 时会弹出是否追踪该系列测量的提示点击YesDICOM SR 中的测量被重新水合到 viewer 中该系列成为追踪系列点击No稍后若改变主意可以随时点击SR 按钮再次弹出相同提示选择开始追踪将测量保存为 SR 以及将 SR 加载回 viewer 的完整流程如下图所示SR 的读写能力由ohif/extension-cornerstone-dicom-sr扩展提供其 SOP 类处理器dicom-sr/dicom-sr-3d与专用视口dicom-sr在 basic 模式中被注册为dicomsr模块见 modes/basic/src/index.tsx。将 DICOM SR 加载到已追踪系列如果某个系列已经是追踪系列再尝试加载 DICOM SR 测量时会显示以下锁定图标其含义是你可以查看DICOM SR 中的测量、操作图像、绘制临时测量但无法编辑DICOM SR 中的测量本身。完整的追踪工作流说明见 user-guide/viewer/measurement-tracking.md。七、快捷键Hotkeys点击 viewer 右上角的Preferences偏好设置齿轮图标即可打开快捷键分配面板查看默认的按键绑定快捷键可以重新绑定为自定义按键组合该设置在浏览器会话期间持续生效。相关说明见 user-guide/viewer/hotkeys.md。八、MPR 与更多模式除 Basic Viewer 外Basic Viewer家族还支持Multiplanar ReconstructionMPR多平面重建功能包含 Crosshairs十字定位线与 MPR Slab Oblique 等交互相关说明见 user-guide/viewer/mpr.md。不同的 mode如 basic、longitudinal、segmentation、tmtv 等在 modes 目录下各自定义了自己的布局、工具组与面板组合其中 longitudinal 模式通过继承 basic 模式并替换为测量追踪专用面板/视口来获得完整追踪能力见 modes/longitudinal/src/index.ts。总结布局Basic Viewer 由左侧研究面板、中央视口网格、右侧测量面板与顶部工具栏四大组件构成整体由ViewerLayout数据驱动渲染左右面板可拖拽调整、可折叠浏览交互视口默认支持左键调窗、右键缩放、中键平移布局切换后各视口以字母与系列一一对应测量与追踪标注后可选择开启系列追踪追踪测量显示在右侧面板并可导出 CSV / 生成 DICOM SR未追踪的测量为临时状态呈虚线且不可导出SR 闭环已导出的 DICOM SR 可重新加载并水合为可交互测量加载到已追踪系列时进入锁定只读状态扩展性所有工具、面板、布局均以模块化配置声明可通过customizations机制替换为二次开发提供了清晰的切入点。【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表