OHIF Viewer 基础查看器的相干

新版的ohif  封装的很好，跟3.8版本的  viewer 修改成app   ui组件进行了整改
3.9版本的更新

OHIF Viewer 3.9 相对于 3.8 版本进行了多项改进和更新。以下是一些主要的改进点：
1. 性能优化:

• 在 3.9 版本中，团队对性能进行了优化，特别是针对大型数据集的加载和渲染速度，减少了延迟，提升了用户体验。
  

2. 改进的用户界面（UI）:

• 3.9 版本对用户界面进行了细微调整，使界面更直观易用，尤其是在工具栏和面板的结构方面进行了优化。
  
• 工具栏的按钮和图标更清晰，用户可以更方便地找到所需功能。
  

3. 工具栏的灵活性:

• 在 3.9 版本中，工具栏的自定义功能得到了加强。开辟者可以更容易地添加或移除工具，以及调整工具栏的结构。
  
• 此外，还增长了对工具栏中工具的分列和显示方式的改进，比如可以大概更灵活地支持横向或纵向结构。
  

4. 改进的插件系统:

• 3.9 版本对插件系统进行了加强，开辟者可以更轻松地集成第三方插件或扩展功能。插件的加载和设置变得更加简便和直观。
  

5. Bug 修复:

• 修复了 3.8 版本中一些已知的题目和 Bug，特别是在图像渲染、工具交互和性能方面的 Bug。
  

6. 新功能引入:

• 在 3.9 版本中，可能引入了一些新功能或加强现有功能，例如改进的影像处置惩罚工具、更好的 DICOM 数据支持等（详细功能会随更新日志发布）。
  

7. 代码结构优化:

• 3.9 版本可能在代码层面进行了重构和优化，使项目的可维护性和可扩展性得到了提升。
  

要相识这些改进的详细细节，可以查看 3.9 版本的发布说明（Release Notes）或更新日志。假如你需要更详细的某个特定方面的改进信息，可以查看官方文档或更新记录。
自定义组件库

在@ohif/ui 加自定义的组件
第一步

1. 先在platform\ui\src\components  中新建一个文件夹 ，就是你组件的名字，里面一个js   一个tsx   

复制代码

第二步

1. tsx文件里面写好配置

复制代码

第三步

1. js文件里 导出去

复制代码

第四步

1. 在platform\ui\src\components\index.js  配好  自己新加的组件

复制代码

第五步

1. 在  platform\ui\src\index.js  导出你的UI组件

复制代码

页面结构

1. ViewerLayout组件用于构建一个布局，该布局包含了医学图像查看器的各种界面元素，
2. * 比如视口、侧边栏、工具栏等。它根据传入的参数动态渲染这些界面元素。

复制代码

1. extensions->default->src -> ViewerLayout

复制代码

标题栏

1. import ViewerHeader from './ViewerHeader';
2. //组件
3. extensions\default\src\ViewerLayout\ViewerHeader.tsx

复制代码

1. extensions\default\src\Toolbar\Toolbar.tsx
2. 控制中间工具
3. 工具类
6. @ohif/ui 组件库里的
7. platform\ui\src\components\Header\Header.tsx

复制代码

标题栏的构成

右侧面板 —— 左侧面板

1. SidePanelWithServices
3. import SidePanelWithServices from '../Components/SidePanelWithServices';   
4. //extensions  ->   default    ->    src   ->  components    - >  SidePanelWithServices
6. //定义带有服务集成的侧边面板组件的属性类型
7. Viewers-master\extensions\default\src\Components\SidePanelWithServices.tsx
8. import { SidePanel } from '@ohif/ui'; //组件库
10. @ohif/ui  组件库
11. Viewers-master\platform\ui\src\components
12. @ohif/core  业务逻辑核心
14. PanelService
15. platform\core\src\services\PanelService\PanelService.tsx

复制代码

折叠面板的按钮

1. platform\ui\src\components\SidePanel\SidePanel.tsx
3.   // 折叠面板的按钮
4.   const getOpenStateComponent = () => {
5.     return null;
6.     // (
7.     //   // <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
8.     //   //   {getCloseIcon()}
9.     //   //   {tabs.length === 1 ? getOneTabComponent() : getTabGridComponent()}
10.     //   // </div>
11.     // );
12.   };

复制代码

缩略图 组件

1. platform\ui\src\components\Thumbnail\Thumbnail.tsx

复制代码

左侧折叠面板的标签页按钮

1. platform\ui\src\components\StudyBrowser\StudyBrowser.tsx
5.       {/* 标签页按钮组 */}
6.       {/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/}
7.       {/* <div
8.         className="w-100 border-secondary-light bg-primary-dark flex h-20 flex-col items-center justify-center gap-2 border-b p-4"
9.         data-cy={'studyBrowser-panel'}
10.       >
12.         <LegacyButtonGroup
13.           variant="outlined"
14.           color="secondary"
15.           splitBorder={false}
16.         >
18.           {tabs.map(tab => {
19.             const { name, label, studies } = tab;
20.             const isActive = activeTabName === name;
21.             const isDisabled = !studies.length;
22.             // 从定制服务中获取按钮颜色配置
23.             const classStudyBrowser = customizationService?.getModeCustomization(
24.               'class:StudyBrowser'
25.             ) || {
26.               true: 'default',
27.               false: 'default',
28.             };
29.             const color = classStudyBrowser[`${isActive}`];
30.             return (
31.               <LegacyButton
32.                 key={name}
33.                 className={'min-w-18 p-2 text-base text-white'}
34.                 size="initial"
35.                 color={color}
36.                 bgColor={isActive ? 'bg-primary-main' : 'bg-black'}
37.                 onClick={() => {
38.                   onClickTab(name);
39.                 }}
40.                 disabled={isDisabled}
41.               >
42.                 {t(label)}
43.               </LegacyButton>
44.             );
45.           })}
46.         </LegacyButtonGroup>
47.         {experimentalStudyBrowserSort && <StudyBrowserSort servicesManager={servicesManager} />}
48.       </div> */}

复制代码

折叠面板的统计信息

1. platform\ui\src\components\StudyBrowser\StudyBrowser.tsx
3. <StudyItem
4.               date={date}
5.               description={description}
6.               numInstances={numInstances}
7.               modalities={modalities}
8.               trackedSeries={getTrackedSeries(displaySets)}
9.               isActive={isExpanded}
10.               onClick={() => {
11.                 onClickStudy(studyInstanceUid);
12.               }}
13.               data-cy="thumbnail-list"
14.             />

复制代码

中心的查看器

找这个组件 位置应该在

1.        '@components': path.resolve(__dirname, '../platform/app/src/components')
2. //名字是   ViewportGrid

复制代码

中心展示dicom 片子的 组件 应该是

1. platform\ui\src\components\ViewportGrid\ViewportGrid.tsx

复制代码

1. F12里面找中间影像的类名      ---------------viewport-wrapper
2. extensions\cornerstone\src\Viewport\OHIFCornerstoneViewport.tsx
3. {/* 中间影响的滚动条，和  上面的文字 */}
4.     CornerstoneOverlays  ----------  这个组件

复制代码

1.   {/* OHIFViewportActionCorners 在 DOM 中跟随视口，以便自然地处于更高的 z-index。 */}
2.      {/* 这个是右上角的那个小设置 */}
3.       <OHIFViewportActionCorners viewportId={viewportId} />

复制代码

展示的片子的时间等数据

1. extensions\cornerstone\src\Viewport\Overlays\CornerstoneOverlays.tsx

复制代码

有那边不对，记得告诉我一声

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。