OHIF记录（三）——从一个图标开始源码分析_ohif核心算法说明

OHIF记录（三）——从一个图标开始源码分析

OHIF的本质是一个B/S架构的应用程序，既然是基于浏览器的应用程序，那么必然有一个入口html以及对应的js文件。

入口html文件的路径：Viewers-master\platform\viewer\public\html-templates\index.html
入口js文件的路径：Viewers-master\platform\viewer\src\index.html

打开入口js文件，可以看到文件末尾部分有一行：

const app = React.createElement(App, appProps, null);
1

因此可知相同路径下的App.js是核心文件，打开App.js文件可以看到有非常多的代码，可以先忽略这些代码，现在只需要知道App.js文件是核心文件即可。

根据前几篇文档可知，在Viewers文件夹下运行yarn run dev命令后，可以使用浏览器导航到本地的3000端口查看OHIF对应的交互页面。页面如下：

可以清楚的看到左上角有一个图标：

点击这个图标可以进入OHIF官方网站：https://ohif.org/

打开文件：Viewers-master\platform\viewer\src\components\OHIFLogo\OHIFLogo.js，可以看到文件返回一个函数式react组件，组件代码如下：

<a
  target="_blank"
  rel="noopener noreferrer"
  className="header-brand"
  href="http://ohif.org"
>
  <Icon name="ohif-logo" className="header-logo-image" />
  <Icon name="ohif-text-logo" className="header-logo-text" />
</a>
1
2
3
4
5
6
7
8
9

可以看到组件包含一个a标签和两个Icon组件，a标签对应的连接为https://ohif.org/，即ohif的官网，修改href对应的连接就可以改变，点击图标后的网址导向。

父组件向下边两个Icon子组件传入两个参数：name和className，Icon组件的源码在Viewers-master\platform\ui\src\elements\Icon\Icon.js里边，源码如下：

const Icon = props => {
  return getIcon(props.name, props);
};
1
2
3

props的值是一个对象，对象的属性就是父组件传递的参数
Icon组件的返回值调用了getIcon函数，将父组件传入的name参数当做第一个参数传入getIcon函数，将props传入getIcon函数当做第二个参数。以第一个Icon组件的传入为例。代码等价于

return getIcon(‘ohif-logo’, {name:”ohif-logo”; className:”header-logo-image”})
1

getIcon函数的的源码在同一路径下的getIcon.js文件里，打开文件，在末尾部分有getIcon函数的源码：

export default function getIcon(key, props) {
  if (!key || !ICONS[key]) {
    return React.createElement('div', null, 'Missing Icon');
  }
    return React.createElement(ICONS[key], props);
}
1
2
3
4
5
6

由OHIFLogo.js文件可知，两个Icon组件调用了两次，也就是说，key的值有两个，一个是"ohif-logo" ，另一个是"ohif-text-logo" ，在getIcon.js文件里边的ICONS对象里边找到ICON[key]对应的值为ohifLogo和ohifTextLogo，在getIcon函数里key和ICONS[key]均存在，因此执行

return React.createElement(ICONS[key], props);
1

在getIcon.js文件首部import引用部分可知，ohifLogo和ohifTextLogo对应两个SVG文件，这两个SVG文件的图片如下：


刚好就是页面上对应的图样，createElement创建了一个SVG标签，标签传入的参数为props，保留了OHIFLogo.js文件里传入的所有参数。在浏览器打开对应图标的网页源码可以看到：

name和class的值与OHIFLogo.js文件里参数值完全一样。