首页 > 其他分享 >OHIF Viewer 基础查看器的相关

OHIF Viewer 基础查看器的相关

时间:2024-09-02 09:54:23浏览次数:14  
标签:src components 查看器 Viewer OHIF platform ui tsx 组件

新版的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 加自定义的组件

第一步

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

第二步

tsx文件里面写好配置

第三步

js文件里 导出去

第四步

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

第五步

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

页面布局

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

标题栏

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

extensions\default\src\Toolbar\Toolbar.tsx
控制中间工具
工具类


@ohif/ui 组件库里的
platform\ui\src\components\Header\Header.tsx

标题栏的组成

右侧面板 —— 左侧面板

SidePanelWithServices

import SidePanelWithServices from '../Components/SidePanelWithServices';    
//extensions  ->   default    ->    src   ->  components    - >  SidePanelWithServices

//定义带有服务集成的侧边面板组件的属性类型
Viewers-master\extensions\default\src\Components\SidePanelWithServices.tsx
import { SidePanel } from '@ohif/ui'; //组件库

@ohif/ui  组件库
Viewers-master\platform\ui\src\components
@ohif/core  业务逻辑核心

PanelService
platform\core\src\services\PanelService\PanelService.tsx

折叠面板的按钮

platform\ui\src\components\SidePanel\SidePanel.tsx

  // 折叠面板的按钮
  const getOpenStateComponent = () => {
    return null;
    // (
    //   // <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
    //   //   {getCloseIcon()}
    //   //   {tabs.length === 1 ? getOneTabComponent() : getTabGridComponent()}
    //   // </div>
    // );
  };

缩略图 组件

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

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

platform\ui\src\components\StudyBrowser\StudyBrowser.tsx



      {/* 标签页按钮组 */}
      {/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/}
      {/* <div
        className="w-100 border-secondary-light bg-primary-dark flex h-20 flex-col items-center justify-center gap-2 border-b p-4"
        data-cy={'studyBrowser-panel'}
      >

        <LegacyButtonGroup
          variant="outlined"
          color="secondary"
          splitBorder={false}
        >

          {tabs.map(tab => {
            const { name, label, studies } = tab;
            const isActive = activeTabName === name;
            const isDisabled = !studies.length;
            // 从定制服务中获取按钮颜色配置
            const classStudyBrowser = customizationService?.getModeCustomization(
              'class:StudyBrowser'
            ) || {
              true: 'default',
              false: 'default',
            };
            const color = classStudyBrowser[`${isActive}`];
            return (
              <LegacyButton
                key={name}
                className={'min-w-18 p-2 text-base text-white'}
                size="initial"
                color={color}
                bgColor={isActive ? 'bg-primary-main' : 'bg-black'}
                onClick={() => {
                  onClickTab(name);
                }}
                disabled={isDisabled}
              >
                {t(label)}
              </LegacyButton>
            );
          })}
        </LegacyButtonGroup>
        {experimentalStudyBrowserSort && <StudyBrowserSort servicesManager={servicesManager} />}
      </div> */}

折叠面板的统计信息

platform\ui\src\components\StudyBrowser\StudyBrowser.tsx

<StudyItem
              date={date}
              description={description}
              numInstances={numInstances}
              modalities={modalities}
              trackedSeries={getTrackedSeries(displaySets)}
              isActive={isExpanded}
              onClick={() => {
                onClickStudy(studyInstanceUid);
              }}
              data-cy="thumbnail-list"
            />

中间的查看器

找这个组件 位置应该在

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

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

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

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

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

展示的片子的时间等数据

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

有哪里不对,记得告诉我一声

标签:src,components,查看器,Viewer,OHIF,platform,ui,tsx,组件
From: https://blog.csdn.net/qq_45947672/article/details/141809045

相关文章

  • GEE APP:利用夜间灯光数据建立一个简易的逐年影像查看器
    简介很多时候我们可以通过简单的滑块进行逐年影像的查看,slider这个工具可以进行每一年的夜间灯光数据的查看,这里主需要设定其实和后续的年份,另外,并给每一年进行属性设定对应的影像即可。这里最关键的就是一个返回值函数的设定,也就是滑块中的onchange函数的设定,这里我们首先要......
  • [Meachines] [Easy] Remote NFS备份文件泄露+Umbraco-RCE+TeamViewer权限提升
    信息收集IPAddressOpeningPorts10.10.10.180TCP:21,80,111,135,139,445,2049,5985,47001,49664,49665,49666,49667,49678,49679,49680nmap-p-10.10.10.180--min-rate1000-sC-sVPORTSTATESERVICEVERSION21/tcpopenftp......
  • win10系统图片打开方式为照片查看器的方法
    众多win10用户都知道,当查看图片文件的时候,系统便会默认运行Metro风格的照片运用来打开图片。但是有许多用户更喜欢传统照片查看器来看图片,但是却不知道该怎么设置。小编今天这里就来为大家分享下设置win10系统图片打开方式为照片查看器的方法。工具/原料联想小......
  • Teamviewer内网怎么用
    在企业内网环境中,安全性、稳定性和性能是企业用户关注的重点。然而,许多远程控制软件在内网应用中存在限制,无法满足企业的特殊需求。比如知名的远程控制软件TeamViewer,其功能强大,但并未提供适合企业内网环境的解决方案。针对企业内网环境,目前公认好用的是SplashtopOn-Prem解决......
  • photo-sphere-viewer全景图使用案例
    1.安装photo-sphere-viewer,两种方式都可以npminstall@photo-sphere-viewer/coreyarnadd@photo-sphere-viewer/core2.项目中去引入 import{Viewer}from'photo-sphere-viewer'import*asPhotoSphereViewerfrom"photo-sphere-viewer/dist/adapters/cubema......
  • 如何在DasViewer中把不同季节的模型调成一样的颜色?
    答:三维模型出现各种色差主要是因为原始照片色差造成的。比如外业航飞时的时间、季节、天气条件不一,相机的色调、清晰度、曝光等参数设置不同等,原始照片的色差会直接影响到后续三维模型的色彩表现,造成颜色不统一。为消除模型色差,需要对原始照片或者模型进行调色处理。针对图中......
  • 前端实现文档预览(支持word、ppt、pdf)-【@zuiyouliao/vue-file-viewer】
    背景有的时候我们需要在前端页面上预览某些文档,文档的格式比如:word、ppt、pdf、图片等等实现方案可以使用@zuiyouliao/vue-file-viewer第三方库,官方地址方式1:通过组件方式引入优点:word/图片可以识别,方便快捷。缺点:pdf/pptx文件无法识别。安装依赖npminstall--save@zui......
  • Reviewer Instructions
    ReviewerInstructionsAsanIP&Mreviewer,yourobjectiveistoevaluatethemeritsandpresentationoftheresearchpresentedinthissubmission.Submissionsshouldemployappropriatemethodsanddatathatsubstantiatestheconclusionsandinterpreta......
  • WPF ScrollViewer控件 触屏滑动
    备份下  原文 https://www.cnblogs.com/webenh/p/18207292<ScrollViewerx:Name="scroll"TouchDown="mScrollViewer_TouchDown"TouchMove="mScrollViewer_TouchMove"TouchUp="mScrollViewer_TouchUp"></ScrollViewer>......
  • U盘版:RadiAnt DICOM 查看器 CD/DVD 2023.1 Crack
    RadiAntDICOM查看器CD/DVD2023.1建于2023年3月29日CD/DVD自动运行包新功能:长度比计算。椭圆体/子弹体积计算。改进和错误修复:增加了对某些不完全符合标准的DICOM文件的支持。增加了对一些不常见的JPEG2000编码DICOM图像的支持。RadiAntDICOMView......