cornerstone3D基本使用

实现步骤

1.初始化 Cornerstone3D 核心库

设置 WebGL 上下文、注册内部组件，并确保渲染引擎、加载器、元数据系统等基础设施就绪。必须在调用任何其他 Cornerstone API 之前执行

js 复制代码

  await initCornerstone()

2.获取DICOM 实例的元数据

根据提供的 StudyInstanceUID、SeriesInstanceUID 和 DICOMweb 服务器地址（wadoRsRoot），向服务器发起查询返回一个包含所有 imageId 的数组

js 复制代码

const imageIds = await createImageIdsAndCacheMetaData({
    StudyInstanceUID:'',
    SeriesInstanceUID: '',
    wadoRsRoot: '',
  });

3.创建渲染引擎

实例化一个渲染引擎，它负责管理所有视口（Viewport）并协调 WebGL 渲染

js 复制代码

 const renderingEngineId = 'myRenderingEngine';
  const renderingEngine = new RenderingEngine(renderingEngineId);

4.定义视口输入

js 复制代码

const viewportId = 'CT_STACK';
  const viewportInput = {
    viewportId,
    type: ViewportType.STACK,
    element: containerRef.value,
    defaultOptions: {
      background: [0.2, 0, 0.2] as Types.Point3,
    },
  };

参数	类型	是否必需	描述
viewportId	string	是	视口的唯一标识符
type	ViewportType	是	视口的类型
element	HTMLDivElement	是	容器
defaultOptions	PublicViewportInput	否	视口的默认配置项
defaultOptions.background	RGB	否	视口背景色
defaultOptions.orientation	OrientationAxis\|OrientationVectors	否	设置视口的初始观察方向。可传入`AXIAL`、`SAGITTAL`、`CORONAL`等轴向枚举值，或自定义`viewPlaneNormal`和`viewUp`向量
defaultOptions.displayArea	DisplayArea	否	设置图像的初始缩放和位置（如平移），控制图像在视口中的可见区域
defaultOptions.suppressEvents	boolean	否	是否使用平行投影。仅对`VOLUME_3D`视口有效，平行投影无透视效果，常用于精确测量
defaultOptions.parallelProjection	boolean	否	设为`true`可禁止视口创建和配置过程中触发相关事件，用于在批量操作或初始化阶段避免不必要的监听器响应

5.启用视口

将视口绑定到渲染引擎，并创建对应的 WebGL 画布和交互层

js 复制代码

  renderingEngine.enableElement(viewportInput);

6.获取视口实例

创建的堆栈视口对象，后续通过它操作图像堆栈和渲染

js 复制代码

const viewport = renderingEngine.getViewport(
    viewportId
  ) as Types.IStackViewport;

7.设置图像堆栈

堆栈设置为仅包含序列中的第一张图像(此函数也会触发render)

js 复制代码

  await viewport.setStack(imageIds,current = 0);

8.渲染

视口立即重绘

js 复制代码

viewport.render();