教程

这一章是面向动手实践的。每篇教程都聚焦「怎么做」，而不是「是什么」—— 概念性的解释放在核心概念一章。

建议从介绍读起，它说明了所有教程共同依赖的那部分准备代码 （加载器、元数据提供者、库初始化），以及如何在本地把教程跑起来。 之后的教程都跳过了这些样板代码，让你专注在当篇要学的内容上。

推荐顺序：

1. 介绍 —— 教程的运行方式与共同前提
2. 渲染一组堆栈影像 —— 最小的可运行例子
3. 渲染体数据 —— 同一份数据在多个方位上显示
4. 操作工具 —— 缩放、平移、窗宽窗位
5. 标注工具 —— 在影像上做测量
6. 分割工具 —— 绘制和编辑分割
7. 渲染视频影像 —— 超声等动态影像
8. 示例 —— 在线示例与本地运行方式

📄️标注工具

Cornerstone3D 入门教程：在体数据视口上使用标注工具进行测量。讲解 addTool 注册 BidirectionalTool、创建工具组并关联多个视口、绑定鼠标按键，以及在 setVolumesForViewports 的回调中设置窗宽窗位。

📄️操作工具

Cornerstone3D 入门教程：为堆栈视口添加缩放与窗宽窗位操作工具。讲解 addTool 注册工具、用 ToolGroupManager 创建工具组、addViewport 关联视口，以及通过 setToolActive 绑定鼠标按键。

📄️分割工具

Cornerstone3D 入门教程：用笔刷工具绘制和编辑分割。讲解 createAndCacheDerivedLabelmapVolume 派生标签图体数据、addSegmentations 注册分割、addLabelmapRepresentationToViewportMap 在多个视口中渲染分割表示形式。

📄️渲染一组堆栈影像

Cornerstone3D 入门教程：用堆栈视口渲染一组医学影像。逐步讲解库初始化、创建视口容器元素、实例化渲染引擎、通过 enableElement 创建 Stack 视口并用 setStack 设置影像，附完整可运行代码。

📄️渲染视频影像

Cornerstone3D 入门教程：使用视频视口渲染 MP4 影像并支持标注。讲解 ViewportType.VIDEO 的创建方式、setVideoURL 与 play 的用法、对服务端字节范围请求与 fast start 编码的要求，以及视频标注的帧范围机制。

📄️渲染体数据

Cornerstone3D 入门教程：渲染体数据并在轴位、矢状位等多个方位同时显示。讲解 volumeLoader.createAndCacheVolume 定义体数据、setViewports 创建正交视口、volume.load() 加载，以及 setVolumesForViewports 的用法。

📄️示例

Cornerstone3D 在线示例的访问方式、通过 Chrome 开发者工具查看示例源码并断点调试的方法，以及在本地克隆仓库后用 yarn run example 运行任意示例的步骤。

📄️介绍

Cornerstone3D 教程的共同前提说明。介绍教程依赖的影像加载器、元数据提供者与库初始化步骤，以及如何用仓库内的 tutorial 示例在本地运行教程代码。