如何在React项目中集成Cornerstone3D示例？

已执行操作 #

• 使用npx create-react-app my-app --template typescript创建TypeScript项目
• 执行npm install安装基础依赖
• 安装Cornerstone3D核心依赖：@cornerstonejs/core、@cornerstonejs/tools、@cornerstonejs/streaming-image-volume-loader
• 将cornerstone3d.beta文件夹中的util和packages目录移入项目src文件夹
• 导入相关库文件
• 将示例的部分HTML代码复制到App组件的return语句中
• 复制官网Stack Basic示例的部分代码到App.tsx
• 导入缺失库修复部分报错

当前问题 #

复制的util和packages文件夹中的函数出现数千个错误（截图：），同时希望了解其他框架下的集成方案。

当前App.tsx代码 #

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { RenderingEngine, Types, Enums } from '@cornerstonejs/core';
import {
  initDemo,
  createImageIdsAndCacheMetaData,
  setTitleAndDescription,
  ctVoiRange,
} from './utils/demo/helpers';


function App() {
  
const { ViewportType } = Enums;
// ======== Set up page ======== //
setTitleAndDescription(
  'Basic Stack',
  'Displays a single DICOM image in a Stack viewport.'
);

const content = document.getElementById('content');
const element = document.createElement('div');
element.id = 'cornerstone-element';
element.style.width = '500px';
element.style.height = '500px';

// ============================= //
  return (
    <html>
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta
          name="viewport"
          content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
        />
        <script defer src="stackBasic.js"></script>
      </head>
      <body>
        Style the title and description components so they are the same in every demo
        <div id="demo-title-container">
          <h1 id="demo-title">
            Insert demo title here during demo 
          </h1>
        </div>
        <div id="demo-description-container">
          <p id="demo-description">
            Insert demo title here during demo
          </p>
        </div>
        <div id="demo-toolbar">
          Insert buttons/dropdowns/etc here during demo
        </div>
        <div id="content"></div>
      </body>
    </html>
  );
}

export default App;

（注：代码存在内容缺失，当前优先修复导入相关问题）

解决方案建议 #

React项目修复步骤 #

1. 移除手动复制的util和packages目录
   官网示例中的util是为自身demo环境编写的，与React项目结构不兼容，直接复制会引发依赖缺失、类型不匹配等问题。无需手动复制这些目录，改用官方提供的依赖包或自行实现所需功能。

2. 调整React组件写法

• 不要在return中直接返回完整的html/head/body标签，React组件的return应仅包含页面局部内容，全局meta等标签需在public/index.html中配置。
• 使用React的useEffect钩子执行DOM操作和Cornerstone初始化逻辑，避免在组件函数体直接执行DOM查询（此时DOM尚未渲染）。
• 参考调整后的代码框架：

import React, { useEffect, useRef } from 'react';
import './App.css';
import { RenderingEngine, Types, Enums } from '@cornerstonejs/core';

// 若官方包未提供demo helpers，需自行实现对应逻辑
async function createImageIdsAndCacheMetaData(studyId: string, count: number) {
  // 实现图像ID生成和元数据缓存逻辑
}

const ctVoiRange = { lower: -200, upper: 200 };

function App() {
  const contentRef = useRef<HTMLDivElement>(null);
  const { ViewportType } = Enums;

  useEffect(() => {
    if (!contentRef.current) return;

    // 创建容器元素
    const element = document.createElement('div');
    element.id = 'cornerstone-element';
    element.style.width = '500px';
    element.style.height = '500px';
    contentRef.current.appendChild(element);

    // 加载图像并渲染
    async function setupViewport() {
      const imageIds = await createImageIdsAndCacheMetaData('CTChest', 10);
      const renderingEngine = new RenderingEngine('myRenderingEngine');
      
      const viewportInput = {
        viewportId: 'CT_AXIAL_STACK',
        element,
        type: ViewportType.STACK,
      };
      
      renderingEngine.enableElement(viewportInput);
      const viewport = renderingEngine.getViewport('CT_AXIAL_STACK');
      
      viewport.setStack(imageIds);
      viewport.setProperties({ voiRange: ctVoiRange });
      viewport.render();

      // 清理函数
      return () => {
        renderingEngine.destroy();
        element.remove();
      };
    }

    const cleanup = setupViewport();

    return () => {
      cleanup.then(fn => fn());
    };
  }, []);

  return (
    <div className="App">
      <div id="demo-title-container">
        <h1 id="demo-title">Basic Stack</h1>
      </div>
      <div id="demo-description-container">
        <p id="demo-description">Displays a single DICOM image in a Stack viewport.</p>
      </div>
      <div id="demo-toolbar"></div>
      <div id="content" ref={contentRef}></div>
    </div>
  );
}

export default App;

3. 安装必要的类型依赖
   若遇到类型错误，可尝试安装@types/cornerstonejs-core（若存在），或在项目的types目录中添加自定义类型声明文件。

4. 检查版本兼容性
   确保安装的Cornerstone3D各包版本一致，避免版本不匹配导致的错误。

其他框架下的集成方案 #

• Vue：

  1. 创建Vue项目后，安装Cornerstone3D依赖。
  2. 在组件的mounted钩子中初始化Cornerstone，使用ref获取DOM元素，执行图像加载和渲染逻辑。
  3. 在beforeUnmount钩子中销毁渲染引擎实例，清理资源。

• Angular：

  1. 安装依赖后，在组件的ngAfterViewInit生命周期钩子中初始化。
  2. 使用@ViewChild获取容器元素，实现图像加载和渲染流程。
  3. 在ngOnDestroy中销毁渲染引擎，释放资源。

• 纯JS/HTML：
  直接按照官网示例，在HTML中引入Cornerstone的CDN脚本，编写初始化逻辑即可，无需额外框架适配。

内容的提问来源于stack exchange，提问作者EvocativeAxis