cornerstoneTools 测量数据的提取与回显

众所周知，在 cornerstoneTools 中，所有的测量工具每次标注均会生成相应的 toolState 数据，toolState 数据由 cornerstoneTools 进行管理，那我们把全部的 toolState 保存下来，下次在预览影像时，在回填回去，就可以测量数据的永久性保存。

很幸运，cornerstoneTools 支持这样做，并且通过过滤数据与修改数据，还可实现一些其它的功能。

ToolState 相关 Api

cornerstoneTools 支持操作激活元素的 toolState：

// 添加 toolState
cornerstoneTools.addToolState(element, toolName, toolState);

// 获取 toolState
cornerstoneTools.getToolState(element, toolName);

// 移除 toolState
cornerstoneTools.removeToolState(element, toolName, toolState);

// 清空 toolState
cornerstoneTools.clearToolState(element, toolName);

ImageIdSpecificToolStateManager 状态管理器

cornerstoneTools 中所有的 toolState 存放于状态管理器 ImageIdSpecificToolStateManager 中。ImageIdSpecificToolStateManager 为一个函数，内部有处理 toolState 的方法，上述的 addToolState 等 Api 均是通过内部的方法实现的。

cornerstoneTools 支持获取和设置激活元素的状态管理器：

// 获取激活元素的状态管理器，如没有特殊设置，这里获取的是全局的状态管理器：globalImageIdSpecificToolStateManager
const toolStateManager = cornerstoneTools.getElementToolStateManager(element);

// 设置激活元素的状态管理器
const toolStateManager =
  new cornerstoneTools.newImageIdSpecificToolStateManager();

cornerstoneTools.setElementToolStateManager(element, toolStateManager);

ImageIdSpecificToolStateManager 状态管理器内部存在一个 toolState 对象，通过 imageId 为 key 存储数据。获取状态管理器后，就可以通过内部的方法进行相关的操作。

toolState 对象的数据结构如下：

{
  "imageId1": {
    "toolName1": {
      "data": [{ "dataKey": "每个标注的数据" }, { "dataKey": "每个标注的数据" }]
    },
    "toolName2": {
      "data": [{ "dataKey": "每个标注的数据" }]
    }
  },
  "imageId2": {
    "toolName1": {
      "data": [{ "dataKey": "每个标注的数据" }, { "dataKey": "每个标注的数据" }]
    },
    "toolName2": {
      "data": [{ "dataKey": "每个标注的数据" }]
    }
  }
}

在状态管理器中分为三个维度操作数据：激活元素、影像 id、全部的数据。

通过激活元素进行操作：

// 获取激活元素的状态管理器
const toolStateManager = cornerstoneTools.getElementToolStateManager(element);

// 获取激活元素某个工具的数据
const toolState = toolStateManager.get(element, toolName);

// 添加激活元素某个工具的数据
toolStateManager.add(element, toolName, toolState);

// 重新设置激活元素某个工具的数据
toolStateManager.set(element, toolName, toolState);

// 清空激活元素的数据
toolStateManager.clear(element);

通过影像 id 进行操作：

// 也可以直接拿到全局的状态管理器
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;

// 获取影像某个工具的数据
const toolState = toolStateManager.getImageIdToolState(imageId, toolName);

// 添加影像某个工具的数据
toolStateManager.addImageIdToolState(imageId, toolName, toolState);

// 重新设置影像某个工具的数据
toolStateManager.setImageIdToolState(imageId, toolName, toolState);

// 清空影像的全部数据
toolStateManager.clearImageIdToolState(imageId);

// 获取影像的全部数据
const toolState = toolStateManager.saveImageIdToolState(imageId);

// 重置影像的全部数据
toolStateManager.restoreImageIdToolState(imageId, imageIdToolState);

直接操作全部的数据：

const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;

// 获取管理器中的全部数据
const toolState = toolStateManager.saveToolState();

// 重置管理器的全部数据
toolStateManager.restoreToolState(savedToolState);

// 管理器中的全部数据集合
const toolState = toolStateManager.toolState;

提取与回填数据

提取与回填数据主要是通过 cornerstoneTools 中的状态管理器的数据操作来实现，基本会用到如下方法：

// 直接获取全部的数据
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
const toolState = toolStateManager.toolState;

// Do something...

// 数据回填
for (const imageId in toolState) {
  for (const toolName in toolState[imageId]) {
    const data = [...toolState[imageId][toolName].data];

    for (const dataIndex in data) {
      toolStateManager.addImageIdToolState(imageId, toolName, data[dataIndex]);
      cornerstoneTools.setToolPassive(toolName);
    }
  }
}

最简单的例子

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