OHIF记录（二）——Viewers和React-vtk工具包互联

OHIF记录（二）——Viewers和React-vtk工具包互联

OHIF是一款用于处理医疗图像的浏览器前端框架，那就避免不了涉及到对医疗图像，医学影像的各种操作和计算，就需要与vtk工具包进行互联，OHIF提供了接口可以将现成的功能集成进框架里。

首先在OHIF的github里下载React-vtk-viewport源码：
https://github.com/OHIF/react-vtkjs-viewport

与之前下载的Viewers源码放在同一个文件夹里。目录结构可以是在一个空的工程文件夹下，将下载好的这两个源码进行解压。

在终端命令行打开react-vtkjs-viewport-master，通过yarn install命令安装所需要的依赖包。然后输入yarn link命令创建项目链接，最后执行yarn run start，通过package.json文件可以知道，yarn run start等价于yarn run dev，因此也可以输入yarn run dev。执行完之后不要关闭命令行终端。
打开另一个终端，进入Viewers-master，还是通过yarn install安装所需要的依赖包，并且通过yarn link react-vtkjs-viewport命令连接到React-vtk工具包对应的依赖文件。最后再执行yarn run dev命令。

注意：大部分情况下，这里如果不进行处理的话，会报错，错误提示3000端口已经被占用，这是因为react-vtk工具包和ohif的viewers默认都是使用3000端口。因此我们可以改一下react-vtk的默认端口号，打开路径react-vtkjs-viewport-master -> .webpack打开webpack.dev.js文件，看到模块输出是一个对象（module.exports={...}这部分内容为模块的输出），在底部找到名为devServer的属性，这是一个对象属性，在devServer对象里找到port属性，修改port的属性值即可改变默认端口号。

完成这些工作后，无论是修改Viewers还是react-vtk里边的源码，保存后，通过刷新就可以更改OHIF框架对应的页面内容，或者交互逻辑。