# cornerstone3d

**Repository Path**: MarkJoenes/cornerstone3d

## Basic Information

- **Project Name**: cornerstone3d
- **Description**: Vue-Cornerstone3D 是一个基于 Vue 3 和 Cornerstone3D 库构建的医学影像查看器，提供了三维 DICOM 图像的交互式查看功能。该项目特别适合需要在 Web 应用中展示和操作医学影像的场景，如 CT、MRI 等三维数据集。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2025-09-15
- **Last Updated**: 2025-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-Cornerstone3D 医学影像查看器

![Vue-Cornerstone3D](https://img.shields.io/badge/Vue-Cornerstone3D-41b883)

## 项目介绍

Vue-Cornerstone3D 是一个基于 Vue 3 和 Cornerstone3D 库构建的医学影像查看器，提供了三维 DICOM 图像的交互式查看功能。该项目特别适合需要在 Web 应用中展示和操作医学影像的场景，如 CT、MRI 等三维数据集。

本项目使用 Windows 95 风格的复古界面，提供了轴向、矢状和冠状三个视图，支持十字线同步、窗宽窗位调整、缩放平移等常用功能。

## 技术栈

- **Vue 3**: 前端框架
- **TypeScript**: 类型安全的 JavaScript 超集
- **Cornerstone3D**: 医学影像渲染库
- **Bun**: JavaScript 运行时和包管理器

## 项目运行指南

### 环境准备

1. **安装 Node.js**

   如果您尚未安装 Node.js，请从 [Node.js 官网](https://nodejs.org/) 下载并安装最新的 LTS 版本。

2. **安装 Bun**

   本项目使用 Bun 作为包管理器和运行时。请按照以下命令安装 Bun：

   ```bash
   # Windows (通过 PowerShell)
   powershell -c "irm https://bun.sh/install.ps1 | iex"
   
   # macOS / Linux
   curl -fsSL https://bun.sh/install | bash
   ```

3. **克隆项目**

   ```bash
   git clone https://github.com/your-username/vue-cornerstone3d.git
   cd vue-cornerstone3d
   ```

### 安装依赖

在项目根目录下运行：

```bash
bun install
```

### 准备 DICOM 数据

1. 在项目根目录下创建 `public/buyaodicom` 文件夹
2. 将您的 DICOM 文件放入该文件夹
3. 确保文件命名符合以下格式：`1.2.156.112605.66988329176330.240112035017.3.8924.51332_0.dcm`, `1.2.156.112605.66988329176330.240112035017.3.8924.51332_1.dcm` 等

> 注意：如需使用其他命名格式，请修改 `src/components/Viewport.vue` 文件中的 `createImageIds` 函数。

### 运行项目

在项目根目录下运行：

```bash
bun run dev
```

然后在浏览器中访问 `http://localhost:5173` 即可看到应用界面。

## 使用指南

### 基本操作

- **移动十字线**: 点击并拖动任意位置
- **缩放**: 右键点击并拖动
- **调整窗宽窗位**: 中键点击并拖动（或 Shift + 左键拖动）
- **重置视角**: 点击界面上的"重置视角"按钮

### 高级操作

- **调整切片厚度**: 将鼠标悬停在参考线上，找到方形手柄（靠近中心点），然后拖动
- **旋转轴线**: 将鼠标悬停在参考线上，找到圆形手柄（远离中心点），然后拖动
- **同步切片厚度**: 勾选界面上的"同步切片厚度"复选框
- **更改混合模式**: 从下拉菜单中选择所需的混合模式（最大强度投影、最小强度投影或平均强度投影）

## 开发指南

### 项目结构

```
vue-cornerstone3d/
├── public/             # 静态资源
│   └── buyaodicom/     # DICOM 文件存放位置
├── src/
│   ├── components/     # Vue 组件
│   │   └── Viewport.vue # 主要的视口组件
│   ├── App.vue         # 应用入口组件
│   └── main.ts         # 应用入口文件
├── package.json        # 项目依赖配置
└── README.md           # 项目说明文档
```

### Cornerstone3D API 调用指南

如果您不熟悉 Cornerstone3D 但需要修改或扩展功能，以下是一些常见 API 的使用方法：

#### 1. 初始化 Cornerstone3D

```javascript
// 初始化渲染引擎
await csRenderInit();
// 初始化工具
await csToolsInit();
// 初始化 DICOM 加载器
dicomImageLoaderInit({
  maxWebWorkers: 1,
  strict: false
});
```

#### 2. 创建渲染引擎

```javascript
const renderingEngine = new RenderingEngine(renderingEngineId);
```

#### 3. 定义视口

```javascript
const viewportInputArray = [
  {
    viewportId: 'axial',
    type: csEnums.ViewportType.ORTHOGRAPHIC,
    element: axialElement,
    defaultOptions: {
      orientation: csEnums.OrientationAxis.AXIAL,
      background: [0, 0, 0]
    },
  },
  // 添加更多视口...
];

renderingEngine.setViewports(viewportInputArray);
```

#### 4. 加载体积数据

```javascript
// 创建图像ID列表
const imageIds = createImageIds();

// 创建并缓存体积
const volume = await volumeLoader.createAndCacheVolume(volumeId, {
  imageIds,
});

// 加载体积
await volume.load();

// 为视口设置体积
await setVolumesForViewports(
  renderingEngine,
  [{ volumeId }],
  viewportIds
);
```

#### 5. 添加工具

```javascript
// 创建工具组
const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);

// 将视口添加到工具组
toolGroup.addViewport(viewportId, renderingEngineId);

// 添加工具
toolGroup.addTool(CrosshairsTool.toolName, {
  // 工具配置...
});

// 激活工具
toolGroup.setToolActive(CrosshairsTool.toolName, {
  bindings: [{ mouseButton: ToolEnums.MouseBindings.Primary }],
});
```

#### 6. 渲染视口

```javascript
renderingEngine.renderViewports(viewportIds);
```

### 修改常见场景

#### 更改 DICOM 文件路径

修改 `src/components/Viewport.vue` 中的 `createImageIds` 函数：

```javascript
function createImageIds(): string[] {
  const imageIds: string[] = [];
  
  // 修改此处的路径和文件名模式
  for (let i = 0; i <= 55; i++) {
    const imageId = `wadouri:./your-folder/your-file-pattern-${i}.dcm`;
    imageIds.push(imageId);
  }
  
  return imageIds;
}
```

#### 调整视口布局

修改 `src/components/Viewport.vue` 中的 CSS：

```css
.viewport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 修改列数 */
  gap: 4px;
}

.viewport {
  height: 280px; /* 修改高度 */
}
```

#### 添加新工具

```javascript
// 1. 导入工具
import { NewTool } from '@cornerstonejs/tools';

// 2. 注册工具
addTool(NewTool);

// 3. 添加到工具组
toolGroup.addTool(NewTool.toolName);

// 4. 激活工具
toolGroup.setToolActive(NewTool.toolName, {
  bindings: [{ mouseButton: ToolEnums.MouseBindings.Primary }],
});
```

## 常见问题

### 视口显示为空白

- 确认 DICOM 文件已正确放置在 `public/buyaodicom` 文件夹中
- 检查浏览器控制台是否有错误信息
- 确保文件命名格式与代码中的模式匹配

### 性能问题

- 减少同时加载的 DICOM 文件数量
- 降低视口分辨率
- 使用更强大的硬件，特别是具有良好 WebGL 支持的显卡

### 浏览器兼容性

- 推荐使用最新版本的 Chrome 或 Firefox
- 确保浏览器支持 WebGL 2.0

## 参考资源

- [Cornerstone3D 文档](https://www.cornerstonejs.org/)
- [Vue 3 文档](https://v3.vuejs.org/)
- [DICOM 标准](https://www.dicomstandard.org/)

## 许可证

[MIT](LICENSE)