OHIF Viewer 基础查看器的相关

2024-09-02 11:44

本文主要是介绍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 加自定义的组件

第一步

先在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

标题栏的组成

右侧面板 —— 左侧面板

SidePanelWithServicesimport 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.*/}{/* <divclassName="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'}><LegacyButtonGroupvariant="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 (<LegacyButtonkey={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<StudyItemdate={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

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

这篇关于OHIF Viewer 基础查看器的相关的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129863

相关文章

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》:本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas

Linux基础命令@grep、wc、管道符的使用详解

《Linux基础命令@grep、wc、管道符的使用详解》:本文主要介绍Linux基础命令@grep、wc、管道符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录grep概念语法作用演示一演示二演示三,带选项 -nwc概念语法作用wc,不带选项-c,统计字节数-

python操作redis基础

《python操作redis基础》Redis(RemoteDictionaryServer)是一个开源的、基于内存的键值对(Key-Value)存储系统,它通常用作数据库、缓存和消息代理,这篇文章... 目录1. Redis 简介2. 前提条件3. 安装 python Redis 客户端库4. 连接到 Re

SpringBoot基础框架详解

《SpringBoot基础框架详解》SpringBoot开发目的是为了简化Spring应用的创建、运行、调试和部署等,使用SpringBoot可以不用或者只需要很少的Spring配置就可以让企业项目快... 目录SpringBoot基础 – 框架介绍1.SpringBoot介绍1.1 概述1.2 核心功能2

Spring Boot集成SLF4j从基础到高级实践(最新推荐)

《SpringBoot集成SLF4j从基础到高级实践(最新推荐)》SLF4j(SimpleLoggingFacadeforJava)是一个日志门面(Facade),不是具体的日志实现,这篇文章主要介... 目录一、日志框架概述与SLF4j简介1.1 为什么需要日志框架1.2 主流日志框架对比1.3 SLF4

Spring Boot集成Logback终极指南之从基础到高级配置实战指南

《SpringBoot集成Logback终极指南之从基础到高级配置实战指南》Logback是一个可靠、通用且快速的Java日志框架,作为Log4j的继承者,由Log4j创始人设计,:本文主要介绍... 目录一、Logback简介与Spring Boot集成基础1.1 Logback是什么?1.2 Sprin

MySQL复合查询从基础到多表关联与高级技巧全解析

《MySQL复合查询从基础到多表关联与高级技巧全解析》本文主要讲解了在MySQL中的复合查询,下面是关于本文章所需要数据的建表语句,感兴趣的朋友跟随小编一起看看吧... 目录前言:1.基本查询回顾:1.1.查询工资高于500或岗位为MANAGER的雇员,同时还要满足他们的姓名首字母为大写的J1.2.按照部门

解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException: org.junit.Test问题

《解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException:org.junit.Test问题》:本文主要介绍解决tomcat启动时报Junit相... 目录tomcat启动时报Junit相关错误Java.lang.ClassNotFoundException