CrosshairsTool 十字线工具使用篇

CornerstoneTools 中的 CrosshairsTool 十字线工具是通过冠状面图像的坐标，寻找相对应的横断面切片位置图像的工具。Pacs 系统中相当于定位的功能，由冠状面（冠状位）的图像，定位显示相应的横断面（轴状位）图像。

工具使用过程

一般在用户使用的场景为：设置一行两列的序列布局，左侧显示冠状面图像，右侧显示横断面图像，通过鼠标选取左侧冠状面图像的坐标，右侧自动显示横断面图像。

我们在使用十字线工具前，需要注意的是，需要将整个横断面序列的图像全部 load 完成，因为十字线工具在确定切片时，会查询所有图像的元数据，如果这时对应横断面的图像并未 load 完成，则未生成元数据，将无法定位到最准确的图像。

定义图像同步器

// 新建图像更新同步器
const synchronizer = new cornerstoneTools.Synchronizer(
  "cornerstonenewimage",
  cornerstoneTools.updateImageSynchronizer
);
// 获取已绑定的元素
const coronalElement = document.querySelector(".canvasCoronal");
const axialElement = document.querySelector(".canvasAxial");

// 同步器添加需要同步的元素
synchronizer.add(coronalElement);
synchronizer.add(axialElement);

添加十字线工具与堆栈的状态

// 添加状态管理器
cornerstoneTools.addStackStateManager(axialElement, ["stack", "crosshairs"]);

// 堆栈的状态
const axialStack = {
  // 当前横断面图像序列的索引
  currentImageIdIndex: 0,
  // 横断面图像序列的全部图像id集合
  imageIds: [
    "wadouri:https://example.com/1.dcm",
    "wadouri:https://example.com/2.dcm"
  ]
};

// 此为关键：一定要在使用十字线工具前将全部横断面序列的图像加载完成
axialImageIds.forEach((imageId) => cornerstone.loadAndCacheImage(imageId));

// 添加堆栈状态
cornerstoneTools.addToolState(axialElement, "stack", axialStack);

添加和激活十字线工具

// 添加十字线工具，无 props 配置项
cornerstoneTools.addToolForElement(coronalElement, CrosshairsTool);
// 激活十字线工具
cornerstoneTools.setToolActiveForElement(coronalElement, "Crosshairs", {
  mouseButtonMask: 1,
  synchronizationContext: synchronizer
});

最简单的例子

老规矩，最后放上案例，更直观的看到效果。