OHIF 工具栏实战从第一笔测量到源码级定制的完整操作路径【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/ViewersOHIF Viewer 顶部工具栏把测量、窗宽窗位、截图导出与布局切换收进了一条数据驱动的横栏。本篇用 4 个真实场景串起操作流程并拆出命令与 evaluate 背后的机制。 场景一打开检查后做第一笔测量激活 Length 工具在图像上点两点线性距离立刻以 mm 显示。工具栏左侧的 Length 按钮是测量组入口点击激活后在断层图像上点取两个端点数值以黄色标尺形式呈现单位为 mm。用工具旁的下拉箭头切换其他测量工具。列表默认顺序为Length、Bidirectional、ArrowAnnotate注释、EllipticalROI、RectangleROI、CircleROI、PlanarFreehandROI、SplineROI、LivewireContour。常用几项速查工具用途结果单位Length两点直线距离mmBidirectional最长径与最长垂直径mm双值EllipticalROI椭圆 ROI 面积与平均 CT 值mm² HURectangleROI / CircleROI区域面积测量mm² HUCalibrationLine校正 Pixel Spacingmm/pixel测量值对不上标尺怎么办多半是 DICOM 的 Pixel Spacing 元数据缺失或错误——通过下拉菜单切换到 Calibration 工具沿已知长度的结构画一条线并填入真实尺寸即可完成校准上面所有长度类工具此后都会按校准后的像素间距计算。源码层面这些测量按钮的commands都指向 setToolActiveToolbar这一条命令把激活事件同时广播给default、mpr、SRToolGroup、volume3d四个工具组无论当前聚焦哪个视口工具都能生效。下拉列表的排布则由toolbarSections中的MeasurementTools分区决定toolbarButtonsCustomization.ts。️ 场景二图像对比度不对窗宽窗位怎么调手动微调直接在图像上点击并拖拽。激活 Window/Level 工具后在图像上水平拖拽调整窗位window level垂直拖拽调整窗宽window width对比度随拖拽实时变化拖到感兴趣结构清晰后松手即可。一键预设用下拉箭头展开预设菜单。默认预设分 CT 与 PT 两组CT 提供 Soft tissue400/40、Lung1500/-600、Liver150/90、Bone2500/480、Brain80/40PT 提供 SUV 3 到 SUV 15 的一列档位数值即窗宽/窗位点击即生效。预设数据定义在 defaultWindowLevelPresets.ts并且可以通过 customization service 覆盖或追加——给本院加一个自定义骨窗只是改一份数据的事。Window/Level 家族其实由多个按钮组成工具栏主按钮WindowLevel、视口左下角的windowLevelMenu、视口底部中间内嵌的windowLevelMenuEmbedded以及高级手动菜单voiManualControlMenu都挂在AdvancedRenderingControls分组下见 toolbarButtonsCustomization.ts。注意WindowLevel按钮通过evaluate.viewport.supported排除了wholeSlide与 ECG 类视口这些视口上会自动禁用。 场景三导出截图与切换多视口布局截图导出点相机图标弹出配置弹窗。Capture 按钮位于工具栏中部就是相机造型的那个图标。点击后由showDownloadViewportModal命令弹出下载弹窗见 commandsModule.ts弹窗中可配置文件名默认image文件格式JPG / PNG 等图像宽高单位 px上限 10000受MAX_TEXTURE_SIZE限制Include annotations是否把已有测量标注画进图里Include warning message是否附带 Not For Diagnostic Use 水印最后点击Save Image下载到本地或点击Copy to Clipboard直接复制进剪贴板。弹窗组件见 captureViewportModalCustomization.tsx。再看按钮定义toolbarButtonsCustomization.tsevaluate.viewport.supported排除了video与wholeSlide视频视口和 WSI 全切片视口因此拿不到这个导出能力。布局切换工具栏上的 Layout Selector。点击网格图标打开布局菜单common 区提供 1×1、1×2、2×2、2×3 四种常用格定义在 layoutSelectorCustomization.tsadvanced 区则根据当前检查的悬挂协议与 display set 动态生成可选组合。网格上限由按钮上的rows: 3, columns: 4参数控制toolbarButtonsCustomization.ts也就是最多可自由切出 3 行 × 4 列的视口网格。 场景四用更多工具菜单做视图微调工具栏最右侧的 More Tools 菜单聚合了一批视图操作工具选中某项后它会保持激活直到你点选其他工具替换工具绑定命令作用Reset ViewresetViewport位置、缩放、窗宽窗位一次还原Rotate RightrotateViewportCW图像顺时针转 90°Flip HorizontalflipViewportHorizontal水平镜像翻转Image Slice SynctoggleSynchronizertype:imageSlice多视口位置联动Stack ScrollsetToolActiveToolbar序列滚动工具InvertinvertViewport灰度反色CinetoggleCine逐帧播放再点一次关闭Probe / Angle / MagnifysetToolActiveToolbar探针取像素值 / 角度 / 放大镜几个使用细节Magnify激活后点击图像某区域打开放大镜窗口放大区域细节实时显示Cine播放开始后点击播放器上的x或再次点击工具按钮即可退出Flip Horizontal同时挂了evaluate.viewportProperties.toggle与evaluate.viewport.supported排除video、volume3d在 3D 视口上自动置灰Rotate Right只排除video2D 堆栈与 MPR 都能用。这份菜单的完整排布见MoreTools分区toolbarButtonsCustomization.ts。给开发者按钮即数据整条工具栏没有写死任何一个按钮机制分三层。数据层按钮定义cornerstone 扩展注册了两个能力包——cornerstone.toolbarButtons全部按钮定义与cornerstone.toolbarSections分区到按钮 ID 的映射见 toolbarButtonsCustomization.ts。以flipHorizontal为例核心只有两个字段props: { commands: flipViewportHorizontal, evaluate: [evaluate.viewportProperties.toggle, { name: evaluate.viewport.supported, unsupportedViewportTypes: [video, volume3d] }], }commands声明点击时执行什么命令evaluate声明按钮该不该用、该不该显示。数组形式表示多个求值器并联任一判 disabled 则按钮整体禁用合并逻辑在 ToolbarService.ts 的handleEvaluate里。对比Capture按钮toolbarButtonsCustomization.tscommands换成showDownloadViewportModalevaluate.viewport.supported排除video/wholeSlide——同一套按钮结构因此可以无差别地投放在 2D 堆栈、MPR、3D 容积、视频、WSI 各类视口上不需要为每种视口单独写分支。组合层模式装配Basic 模式在 index.tsx 里没有写任何按钮实体只有toolbarSections: [{ $reference: cornerstone.toolbarSections }]与toolbarButtons: [{ $reference: cornerstone.toolbarButtons }]两条引用。进入模式时modeCustomization.ts 的registerModeToolbar负责调toolbarService.register()注册按钮、逐个updateSection()装配分区。这也解释了为什么?customization模块能仅靠$push追加按钮而不必重建整个模式。渲染层UI 组件Toolbar.tsx 通过useToolbarhook 拿到指定分区默认primary的按钮列表为每个按钮注入isOpen、isLocked、onOpen、onToggleLock等交互状态再按uiTypeohif.toolButton、ohif.layoutSelector、ohif.toolButtonList等渲染成组件。ToolbarService的refreshToolbarStateToolbarService.ts会在视口切换、状态变化时重算所有 evaluate——modalityLoadBadge、trackingStatus这类按钮随数据出现或消失靠的就是这条刷新链路。收尾一个设计思想贯穿整条工具栏OHIF 的工具栏本质是按钮即数据 注册进服务的两段式设计命令绑定在数据上可用状态交给 evaluate 计算。你要为特定临床工作流做定制查看器时改一份toolbarSections、用$reference/$push追加按钮即可渲染组件一行不用碰。【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/19 1:37:02 · 阅读 1.2k OHIF 工具栏实战：从第一笔测量到源码级定制的完整操作路径
OHIF 工具栏实战从第一笔测量到源码级定制的完整操作路径【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/ViewersOHIF Viewer 顶部工具栏把测量、窗宽窗位、截图导出与布局切换收进了一条数据驱动的横栏。本篇用 4 个真实场景串起操作流程并拆出命令与 evaluate 背后的机制。 场景一打开检查后做第一笔测量激活 Length 工具在图像上点两点线性距离立刻以 mm 显示。工具栏左侧的 Length 按钮是测量组入口点击激活后在断层图像上点取两个端点数值以黄色标尺形式呈现单位为 mm。用工具旁的下拉箭头切换其他测量工具。列表默认顺序为Length、Bidirectional、ArrowAnnotate注释、EllipticalROI、RectangleROI、CircleROI、PlanarFreehandROI、SplineROI、LivewireContour。常用几项速查工具用途结果单位Length两点直线距离mmBidirectional最长径与最长垂直径mm双值EllipticalROI椭圆 ROI 面积与平均 CT 值mm² HURectangleROI / CircleROI区域面积测量mm² HUCalibrationLine校正 Pixel Spacingmm/pixel测量值对不上标尺怎么办多半是 DICOM 的 Pixel Spacing 元数据缺失或错误——通过下拉菜单切换到 Calibration 工具沿已知长度的结构画一条线并填入真实尺寸即可完成校准上面所有长度类工具此后都会按校准后的像素间距计算。源码层面这些测量按钮的commands都指向 setToolActiveToolbar这一条命令把激活事件同时广播给default、mpr、SRToolGroup、volume3d四个工具组无论当前聚焦哪个视口工具都能生效。下拉列表的排布则由toolbarSections中的MeasurementTools分区决定toolbarButtonsCustomization.ts。️ 场景二图像对比度不对窗宽窗位怎么调手动微调直接在图像上点击并拖拽。激活 Window/Level 工具后在图像上水平拖拽调整窗位window level垂直拖拽调整窗宽window width对比度随拖拽实时变化拖到感兴趣结构清晰后松手即可。一键预设用下拉箭头展开预设菜单。默认预设分 CT 与 PT 两组CT 提供 Soft tissue400/40、Lung1500/-600、Liver150/90、Bone2500/480、Brain80/40PT 提供 SUV 3 到 SUV 15 的一列档位数值即窗宽/窗位点击即生效。预设数据定义在 defaultWindowLevelPresets.ts并且可以通过 customization service 覆盖或追加——给本院加一个自定义骨窗只是改一份数据的事。Window/Level 家族其实由多个按钮组成工具栏主按钮WindowLevel、视口左下角的windowLevelMenu、视口底部中间内嵌的windowLevelMenuEmbedded以及高级手动菜单voiManualControlMenu都挂在AdvancedRenderingControls分组下见 toolbarButtonsCustomization.ts。注意WindowLevel按钮通过evaluate.viewport.supported排除了wholeSlide与 ECG 类视口这些视口上会自动禁用。 场景三导出截图与切换多视口布局截图导出点相机图标弹出配置弹窗。Capture 按钮位于工具栏中部就是相机造型的那个图标。点击后由showDownloadViewportModal命令弹出下载弹窗见 commandsModule.ts弹窗中可配置文件名默认image文件格式JPG / PNG 等图像宽高单位 px上限 10000受MAX_TEXTURE_SIZE限制Include annotations是否把已有测量标注画进图里Include warning message是否附带 Not For Diagnostic Use 水印最后点击Save Image下载到本地或点击Copy to Clipboard直接复制进剪贴板。弹窗组件见 captureViewportModalCustomization.tsx。再看按钮定义toolbarButtonsCustomization.tsevaluate.viewport.supported排除了video与wholeSlide视频视口和 WSI 全切片视口因此拿不到这个导出能力。布局切换工具栏上的 Layout Selector。点击网格图标打开布局菜单common 区提供 1×1、1×2、2×2、2×3 四种常用格定义在 layoutSelectorCustomization.tsadvanced 区则根据当前检查的悬挂协议与 display set 动态生成可选组合。网格上限由按钮上的rows: 3, columns: 4参数控制toolbarButtonsCustomization.ts也就是最多可自由切出 3 行 × 4 列的视口网格。 场景四用更多工具菜单做视图微调工具栏最右侧的 More Tools 菜单聚合了一批视图操作工具选中某项后它会保持激活直到你点选其他工具替换工具绑定命令作用Reset ViewresetViewport位置、缩放、窗宽窗位一次还原Rotate RightrotateViewportCW图像顺时针转 90°Flip HorizontalflipViewportHorizontal水平镜像翻转Image Slice SynctoggleSynchronizertype:imageSlice多视口位置联动Stack ScrollsetToolActiveToolbar序列滚动工具InvertinvertViewport灰度反色CinetoggleCine逐帧播放再点一次关闭Probe / Angle / MagnifysetToolActiveToolbar探针取像素值 / 角度 / 放大镜几个使用细节Magnify激活后点击图像某区域打开放大镜窗口放大区域细节实时显示Cine播放开始后点击播放器上的x或再次点击工具按钮即可退出Flip Horizontal同时挂了evaluate.viewportProperties.toggle与evaluate.viewport.supported排除video、volume3d在 3D 视口上自动置灰Rotate Right只排除video2D 堆栈与 MPR 都能用。这份菜单的完整排布见MoreTools分区toolbarButtonsCustomization.ts。给开发者按钮即数据整条工具栏没有写死任何一个按钮机制分三层。数据层按钮定义cornerstone 扩展注册了两个能力包——cornerstone.toolbarButtons全部按钮定义与cornerstone.toolbarSections分区到按钮 ID 的映射见 toolbarButtonsCustomization.ts。以flipHorizontal为例核心只有两个字段props: { commands: flipViewportHorizontal, evaluate: [evaluate.viewportProperties.toggle, { name: evaluate.viewport.supported, unsupportedViewportTypes: [video, volume3d] }], }commands声明点击时执行什么命令evaluate声明按钮该不该用、该不该显示。数组形式表示多个求值器并联任一判 disabled 则按钮整体禁用合并逻辑在 ToolbarService.ts 的handleEvaluate里。对比Capture按钮toolbarButtonsCustomization.tscommands换成showDownloadViewportModalevaluate.viewport.supported排除video/wholeSlide——同一套按钮结构因此可以无差别地投放在 2D 堆栈、MPR、3D 容积、视频、WSI 各类视口上不需要为每种视口单独写分支。组合层模式装配Basic 模式在 index.tsx 里没有写任何按钮实体只有toolbarSections: [{ $reference: cornerstone.toolbarSections }]与toolbarButtons: [{ $reference: cornerstone.toolbarButtons }]两条引用。进入模式时modeCustomization.ts 的registerModeToolbar负责调toolbarService.register()注册按钮、逐个updateSection()装配分区。这也解释了为什么?customization模块能仅靠$push追加按钮而不必重建整个模式。渲染层UI 组件Toolbar.tsx 通过useToolbarhook 拿到指定分区默认primary的按钮列表为每个按钮注入isOpen、isLocked、onOpen、onToggleLock等交互状态再按uiTypeohif.toolButton、ohif.layoutSelector、ohif.toolButtonList等渲染成组件。ToolbarService的refreshToolbarStateToolbarService.ts会在视口切换、状态变化时重算所有 evaluate——modalityLoadBadge、trackingStatus这类按钮随数据出现或消失靠的就是这条刷新链路。收尾一个设计思想贯穿整条工具栏OHIF 的工具栏本质是按钮即数据 注册进服务的两段式设计命令绑定在数据上可用状态交给 evaluate 计算。你要为特定临床工作流做定制查看器时改一份toolbarSections、用$reference/$push追加按钮即可渲染组件一行不用碰。【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考