如何使用 OHIF Viewer 工具栏测量、窗宽窗位与一键导出完整指南【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers拿到一叠 CT 切片想做的第一件事往往不是放大而是量个尺寸——病灶到底是 2 厘米还是 5 厘米。OHIF Viewer 的工具栏toolbar就是为这类高频小动作准备的量尺寸、调窗宽窗位、换视口布局、截图留档全都摆在屏幕顶部一步可达。下面先带你把每个动作走一遍最短路径再拆开代码看看每个按钮究竟是怎么被定义、又何时才会点亮的。先跑通3 分钟装好并打开 OHIF仓库 clone 下来执行几条命令即可要求 Node 18git clone https://gitcode.com/GitHub_Trending/vi/Viewers cd Viewers pnpm install pnpm start服务起来后打开浏览器连上一个 DICOMweb 影像源进入 Basic 模式。顶栏即工具栏左侧是测量工具组中间依次是缩放、平移、窗宽窗位、截图、布局按钮右侧是 More Tools 菜单入口。 三步量出病灶大小操作本身非常直接点击工具栏里的Length图标默认激活的测量工具在图像上点下两个端点两点间的 mm 数值立刻标出想换量具点工具旁的小箭头caret展开下拉列表在默认排布的九件测量工具中任选一件工具干什么用结果单位Length两点线性距离mmBidirectional最长径 LD × 最长垂直径 LPDmmAnnotation带自由文本的定性标记—Ellipse椭圆面积 平均 CT 值mm² / HURectangle矩形面积 平均 CT 值mm² / HUCircle圆形面积mm²Freehand ROI自由手绘轮廓取面积mm²Spline ROI样条绘制轮廓取面积mm²Livewire沿组织边缘吸附勾画mm²另有Calibration按钮专门修正 DICOM 的 Pixel Spacing相邻像素间的物理距离。元数据里这个值缺失或错了所有长度类测量都会跟着偏——在已知尺寸的参照物上画一条线、输入真实长度后续测量就都以它为基准了。往实现里看一层这九件量具点击时走的都是同一个setToolActiveToolbar命令它会把激活该工具的事件同时广播给default、mpr、SRToolGroup、volume3d四个工具组定义见 toolbarButtonsCustomization.ts。所以无论当前是 2D 堆栈、MPR 重建还是 SR 报告视口选完工具立刻生效无需逐类视口配置。拖一拖窗宽窗位或直接用预设对齐图像偏暗、发白、层次糊成一团时用 Window/Level 工具点Window/Level按钮进入自由调整模式在视口上按住拖拽——横向拖动改窗宽、纵向改窗位对比度实时变化不想手调的话点 caret 展开预设列表肺窗、纵隔窗这类常见成像场景的标准化 W/L 设置点一下即套。代码里这条线其实不止一条主栏的WindowLevel是按钮形态视口左下角挂着windowLevelMenu底部中间的 AdvancedRenderingControls 区里还有内嵌式windowLevelMenuEmbedded和带手动滑杆的voiManualControlMenu。位置与形态不同改的都是同一组渲染参数。平移、缩放、3D 旋转图像导航三件套Zoom选中后在图上按住拖拽即缩放当前放大倍数实时显示在视口角上Pan拖拽平移图像位置看偏了的病灶不用翻片3D Rotate在容积视口上把三维重建体随手旋转到位。三者与测量工具走的是同一条命令通道setToolActiveToolbar只是激活的工具名不同——这也是 OHIF 工具栏按钮皆数据的直观体现。一键换布局1x1 到 3x4 网格任选点Layout按钮画面切换为网格选择器点选想要的行数列数即可1x1、2x2、3x3 都能覆盖。定义端只有两行参数Layout按钮声明为ohif.layoutSelector类型rows: 3, columns: 4划定了可选网格的上限。 一键导出当前视口文件名、尺寸、格式可配留档时点工具栏右侧的相机图标弹出下载配置弹窗三个参数都能定参数说明filename下载后的文件名width / height输出图像的尺寸filetypepng、jpg 等常用格式确认后当前视口就以高清图片落到本地。按钮背后绑的是showDownloadViewportModal命令职责只是打开弹窗它的可用状态求值同时排除了video与wholeSlide两类视口——视频帧和全切片 WSI 不做静态截图所以这两种视图下按钮保持置灰。进阶More Tools 里藏着的工具箱主栏那几个按钮不够用时More Tools 就是备料区。从菜单里选中的工具会成为当前激活工具直到被其他选择替换工具效果绑定命令自动置灰的视口Reset View位置、缩放、窗宽窗位一键还原resetViewport—Rotate Right顺时针旋转 90°rotateViewportCWvideoFlip Horizontal水平翻转flipViewportHorizontalvideo、volume3dImage Slice Sync多视口切片位置联动toggleSynchronizerimageSlicevideo、volume3dStack Scroll所有图像视口同步翻页setToolActiveToolbar—Invert灰度反转invertViewportvideoCine逐帧电影式播放toggleCinevolume3dMagnify点击放大局部细节setToolActiveToolbarvideoAngle测量可调节角度setToolActiveToolbar—Cobb Angle测量 Cobb 角setToolActiveToolbar—Probe拖拽读取像素值setToolActiveToolbar—Calibration覆盖像素间距setToolActiveToolbarvideo注意自动置灰那一列置灰不是坏了而是代码在替你把关。这套机制的核心在 ToolbarService——每个按钮的evaluate字段存的是求值器名字服务从注册表里按名取出检查函数执行evaluate写成数组时则串联全部检查任一报 disabled 即整体禁用。正因如此同一个按钮定义才能安全地活在 2D 堆栈、MPR、3D 容积、视频、WSI 五种视口之上而不必为每种视图各写一套逻辑。换个角度看代码按钮是数据对象工具栏是分区清单读到这儿可以把工具栏翻个面看——界面上其实没有写死任何一个按钮。按钮即数据对象。在 toolbarButtonsCustomization.ts 中每个按钮就是一个条目id是它的住址uiType决定长什么样渲染哪个组件props.commands决定点击后做什么props.evaluate决定何时点亮。点击发生时ToolbarService 的recordInteraction把命令扔进命令总线执行随后refreshToolbarState对所有按钮重跑一遍可用状态求值——你在屏幕上看到的自动置灰就是这一步的产物。能力包即插槽。该文件最终只对外给出两个能力包capability packcornerstone.toolbarButtons全部按钮定义和cornerstone.toolbarSections分区到按钮 ID 清单的映射见 L719-L785。Basic 模式不复制这两份清单只在 index.tsx 里用{ $reference: cornerstone.toolbarButtons }引用进入模式时registerModeToolbar 依次调用toolbarService.register()与updateSection()完成注册和落位。渲染端更轻Toolbar.tsx 用useToolbarhook 拉取当前分区默认primary的数据给每个按钮注入展开、锁定、点击等交互状态后直接映射成组件。插槽设计的红利是想给某个模式加一个按钮不用动任何界面组件——写一个定制模块用?customization加载$push一个新按钮进列表那个模式的工具栏立刻变了。收尾一句口诀 三个定制入口记法如下量尺寸点选即激活、拖拽即标值 窗宽窗位按钮进、拖拽调、预设齐 留档导出一个弹窗定文件名、尺寸、格式 定制扩展按钮是数据工具栏是清单。三个定制入口调按钮排布改 toolbarSections改某按钮的命令或可用条件改同文件toolbarButtons列表里对应条目的props不想动代码则用?customizationURL 参数动态追加。更多背景可对照 官方 toolbar 文档 与 ToolbarService 源码。【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考