Kitware/react-vtk-js 使用记录 01

Kitware/react-vtk-js 是vtk组织官方出的react vtk组件，运用于医学成像。
git地址: https://github.com/alexiusll/react-vtk-js

官方简介（机翻预警）：

基于React的声明式vtk.js可视化渲染管线。换句话说，这个项目允许你利用vtk.js使用React/XML语法来描述你的3D场景。有点像X3dom的X3D格式，除了这里我们利用了React组件，可以扩展到构建自己的工具。

该项目于2021年1月份创建，属于是很新的React组件，现在迭代的速度也很快。

相比OHIF出品的 react-vtkjs-viewport 的React组件，虽然两者都是封装vtkjs的组件，但是目前 react-vtkjs-viewport 使用的VTKJS的版本老旧，为 "vtk.js": "^11.14.0", ，最新的commit 是2020年，可能官方后续不会再更新这个库了。但是Kitware 写的React组件中，使用的vtkjs版本为 "@kitware/vtk.js": "18.2.0" ，版本很新。

但是目前 Kitware/react-vtk-js 可用的文档很少，所以现在记录它的使用方法。目前只能通过React props和官方的例子大致窥探一下这个组件的使用方法。

Kitware/react-vtk-js的效果：

1.首先把 Kitware/react-vtk-js 代码克隆到自己的仓库

注意！！！这个项目没有yarn.lock 文件，所以如果要安装依赖，只能使用npm install ，然后再使用yarn import 来生成相应的yarn.lock。

项目结构

Kitware/react-vtk-js 的项目结构包括自己封装的vtk组件，和使用例子，使用例里面依赖了自己封装的vtk组件。

使用例

使用 yarn dev 开启测试服务器，webpack执行打包操作，webpack打包的时间比较长，然后就可以看到官方的使用例。

一个医学影像体绘制的例子:

体绘制

2.体绘制实现分析

import React from 'react';
import ReactDOM from 'react-dom';

import {
  View,
  VolumeRepresentation,
  VolumeController,
  Reader,
} from 'react-vtk-js';

function Example(props) {
  const array = [];
  while (array.length < 1000) {
    array.push(Math.random());
  }
  return (
    
      
        
          
          
        
      
    
  );
}

// Render React object
ReactDOM.render(, document.querySelector('.root'));

源码结构非常简单，说明它封装的东西比较多。
对于医学影像系统而言，数据源十分重要，我们首先分析它的数据源的格式：
在Reader中有一个 url : https://data.kitware.com/api/v1/item/59e12e988d777f31ac6455c5/download
点开之后，发现它是一个 .vti格式的文件。

VTI文件大多属于Kitware公司的ParaView。ParaView是一种需要将大型数据集可视化的应用程序。ParaView是一个开源系统。ParaView是一个建立在VTK之上的交钥匙可视化系统，使VTK更容易使用一个点和点击界面。

前面写了一个生成数组的代码，似乎没有任何作用，把它直接注释掉，免得产生干扰。

先从 Reader 进行分析

它的 props

  // The ID used to identify this component.
  id: PropTypes.string,
  //  downstream  连接 端口
  port: PropTypes.number,
  // vtkClass name
  vtkClass: PropTypes.string,
  // 要从中获取数据的url集
  url: PropTypes.string,
  // 将文本数据 进行 处理
  parseAsText: PropTypes.string,
  // 设置二进制数据从base64字符串处理
  parseAsArrayBuffer: PropTypes.string,
  // 自动渲染 当 数据加载
  renderOnUpdate: PropTypes.bool,
  // 自动重置相机  当 数据加载
  resetCameraOnUpdate: PropTypes.bool,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),

它的默认参数:

  port: 0,
  vtkClass: '',
  renderOnUpdate: true,
  resetCameraOnUpdate: true,

体渲染的时候，vtkClass 被设置为 vtkXMLImageDataReader，看看它做了什么：

import vtk from '@kitware/vtk.js/vtk.js';

if (vtkClass && (!previous || vtkClass !== previous.vtkClass)) {
      this.reader = vtk({ vtkClass });
      this.downstream.setInputConnection(
        this.reader.getOutputPort(),
        this.props.port
      );
    }

它通过 vtkClass 从vtk中拿了一个 reader
这里需要参考一下 vtk 的源码:

var constructor = factoryMapping[obj.vtkClass];

发现它是一个工厂方法
而 vtkXMLImageDataReader 其实是一个vtk.js的 api
参考：
https://kitware.github.io/vtk-js/api/IO_XML_XMLImageDataReader.html

VolumeController

它的 props

VolumeController.defaultProps = {
  size: [400, 150],
  rescaleColorMap: true,
};

VolumeController.propTypes = {
  // The ID used to identify this component.
  id: PropTypes.string,
  // Controller size in pixels
  size: PropTypes.arrayOf(PropTypes.number),
  // Use opacity range to rescale color map
  rescaleColorMap: PropTypes.bool,
};

它提供了一个控制窗口

VolumeController

VolumeRepresentation

/**
 * VolumeRepresentation is responsible to convert a vtkPolyData into rendering
 * VolumeRepresentation负责将vtkPolyData转换为渲染
 * It takes the following set of properties:
 *   - colorBy: ['POINTS', ''],
 *   - pointSize: 1,
 *   - color: [1,1,1],
 */

它的props

VolumeRepresentation.defaultProps = {
  colorMapPreset: 'erdc_rainbow_bright',
  colorDataRange: 'auto',
};

VolumeRepresentation.propTypes = {
  // The ID used to identify this component.
  id: PropTypes.string,
  // Properties to set to the mapper
  mapper: PropTypes.object,
  // Properties to set to the volume
  volume: PropTypes.object,
  // Properties to set to the volume.property
  property: PropTypes.object,
  // Preset name for the lookup table color map
  colorMapPreset: PropTypes.string,
  // Data range use for the colorMap
  colorDataRange: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.number),
    PropTypes.string,
  ]),

  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
};

最重要的 view

很长的 props

View.defaultProps = {
  style: {
    width: '100%',
    height: '100%',
  },
  background: [0.2, 0.3, 0.4],
  cameraPosition: [0, 0, 1],
  cameraViewUp: [0, 1, 0],
  cameraParallelProjection: false,
  triggerRender: 0,
  triggerResetCamera: 0,
  interactorSettings: [
    {
      button: 1,
      action: 'Rotate',
    },
    {
      button: 2,
      action: 'Pan',
    },
    {
      button: 3,
      action: 'Zoom',
      scrollEnabled: true,
    },
    {
      button: 1,
      action: 'Pan',
      alt: true,
    },
    {
      button: 1,
      action: 'Zoom',
      control: true,
    },
    {
      button: 1,
      action: 'Select',
      shift: true,
    },
    {
      button: 1,
      action: 'Roll',
      alt: true,
      shift: true,
    },
  ],
  pickingModes: [],
  showCubeAxes: false,
};

View.propTypes = {
  // The ID used to identify this component.
  id: PropTypes.string,
  // Allow user to override the default View style { width: '100%', height: '100%' }
  style: PropTypes.object,
  // Allow user to provide custom className associated to root element
  className: PropTypes.string,
  /**
   * The color of the view background using 3 floating numbers
   * between 0-1 of Red, Green, Blue component.
   */
  background: PropTypes.array,
  // Configure the interactions
  interactorSettings: PropTypes.array,
  // Initial camera position from an object in [0,0,0]
  cameraPosition: PropTypes.array,
  // Initial camera position from an object in [0,0,0]
  cameraViewUp: PropTypes.array,
  // Use parallel projection (default: false)
  cameraParallelProjection: PropTypes.bool,
  // Property use to trigger a render when changing.
  triggerRender: PropTypes.number,
  // Property use to trigger a resetCamera when changing.
  triggerResetCamera: PropTypes.number,
  // List of representation to show
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  // List of picking listeners to bind. The supported values are `click`, `hover` and `select`. By default it is disabled (empty array).
  pickingModes: PropTypes.arrayOf(PropTypes.string),
  // User callback function for click
  onClick: PropTypes.func,
  /**
   * Read-only prop. To use this, make sure that `pickingModes` contains `click`.
   * This prop is updated when an element in the map is clicked. This contains
   * the picking info describing the object being clicked on.
   */
  clickInfo: PropTypes.object,
  // User callback function for hover
  onHover: PropTypes.func,
  /**
   * Read-only prop. To use this, make sure that `pickingModes` contains `hover`.
   * This prop is updated when an element in the map is hovered. This contains
   * the picking info describing the object being hovered.
   */
  hoverInfo: PropTypes.object,
  // User callback function for box select
  onSelect: PropTypes.func,
  /**
   * Read-only prop. To use this, make sure that `pickingModes` contains `select`.
   * This prop is updated when an element in the view is select. This contains
   * the picking info describing the object being select along with the frustrum.
   */
  selectInfo: PropTypes.object,
  /**
   * Show/Hide Cube Axes for the given representation
   */
  showCubeAxes: PropTypes.bool,
  /**
   * Configure cube Axes style by overriding the set of properties defined
   * https://github.com/Kitware/vtk-js/blob/HEAD/Sources/Rendering/Core/CubeAxesActor/index.js#L703-L719
   */
  cubeAxesStyle: PropTypes.object,
};

在示例项目中 view 只传入了 id，其他都为默认参数
基本来看，默认参数设置了一些view窗口的操作方式，和它的样式

Kitware/react-vtk-js 使用记录 01

官方简介（机翻预警）：

1.首先把 Kitware/react-vtk-js 代码克隆到自己的仓库

2.体绘制实现分析

先从 Reader 进行分析

VolumeController

VolumeRepresentation

最重要的 view

你可能感兴趣的:(Kitware/react-vtk-js 使用记录 01)