typescript 如何在react应用中集成cornerstone3d示例

mzsu5hc0  于 2023-04-13  发布在  TypeScript
关注(0)|答案(1)|浏览(527)

我试图https://www.cornerstonejs.org/docs/examples#run-examples-locally在react应用程序中实现www.example.com中的示例,但我不确定该怎么做。
我做了什么:

  • npx create-react-app my-app --template typescript
  • npm install
  • npm install @cornerstonejs/core @cornerstonejs/tools @cornerstonejs/streaming-image-volume-loader
  • 将util和包从corerstone3d.beta文件夹移动到项目src文件夹
  • 通过本页底部的代码导入库
  • 将部分html复制到App(){ return(.......);}
  • 从这里复制了一些代码:“https://www.cornerstonejs.org/live-examples/stackbasic“(查看控制台的源代码)到App.tsx
  • 通过导入缺少的库修复了一些错误

然而,我从cornerstone 3d中获取的util和packages文件夹中的函数中得到了数千个错误,如下图所示:

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;

(the代码丢失了一些部分,因为我试图首先修复导入)
如果其他框架上存在任何解决方案,我也想看看它们

efzxgjgh

efzxgjgh1#

你需要在cornerstone3d再次下载cornerstone3d,然后使用npm install安装所有节点包

相关问题