CornerstoneTool.js 使用记录 (第三部分)

自定义 CornerstoneJS 工具指南：创建自己的 DICOM 图像处理工具

简介

CornerstoneTool.js 库是一个功能强大的 JavaScript 库，用于在 Web 浏览器中处理和可视化医学图像，特别是 DICOM 格式的图像。该库提供了一系列开箱即用的工具，用于测量、标注和调整窗宽窗位。但是，我们有时可能需要创建自定义工具来满足特定的需求。

初始化自定义工具

要添加自定义工具，我们可以使用 cornerstoneTools.addTool() 方法。该方法接受两个参数：

• 工具名称： 这是您自定义工具的唯一名称。
• 工具功能： 这是一个包含工具实现的函数。

工具功能约定

工具函数应该遵循以下约定：

function customTool(element, options) {
  // 工具逻辑
  // ...
}

其中：

• element 是包含 DICOM 图像的 DOM 元素。
• options 是可用于配置工具的对象。

添加自定义工具示例：绘制矩形

以下示例演示如何添加一个自定义工具来绘制矩形：

cornerstoneTools.addTool('customRectangleTool', function(element, options) {
  // 工具逻辑
  const startHandles = {
    end: {
      x: 0,
      y: 0,
      highlight: true,
      active: false,
    },
  };
  const endHandles = {
    start: {
      x: 0,
      y: 0,
      highlight: true,
      active: false,
    },
  };

  const drawHandles = function(context) {
    // 绘制句柄
    context.beginPath();
    context.strokeStyle = 'white';
    context.lineWidth = 2;
    context.fillStyle = 'white';

    // 绘制开始句柄
    context.fillRect(startHandles.end.x - 3, startHandles.end.y - 3, 6, 6);

    // 绘制结束句柄
    context.fillRect(endHandles.start.x - 3, endHandles.start.y - 3, 6, 6);
  };

  const mouseUpCallback = function(e) {
    // 鼠标松开事件处理程序
    endHandles.start.active = false;
  };

  const mouseDownCallback = function(e) {
    // 鼠标按下事件处理程序
    const rect = element.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    startHandles.end.x = mouseX;
    startHandles.end.y = mouseY;
    endHandles.start.x = mouseX;
    endHandles.start.y = mouseY;
    endHandles.start.active = true;
  };

  const mouseMoveCallback = function(e) {
    // 鼠标移动事件处理程序
    if (!endHandles.start.active) {
      return;
    }

    const rect = element.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    endHandles.start.x = mouseX;
    endHandles.start.y = mouseY;
  };

  element.addEventListener('mousedown', mouseDownCallback);
  element.addEventListener('mouseup', mouseUpCallback);
  element.addEventListener('mousemove', mouseMoveCallback);

  function onImageRendered(e) {
    const context = e.detail.canvasContext;
    drawHandles(context);
  }

  element.addEventListener('cornerstoneimagerendered', onImageRendered);

  // 返回工具 API
  return {
    enable: function() {
      element.addEventListener('cornerstoneimagerendered', onImageRendered);
    },
    disable: function() {
      element.removeEventListener('cornerstoneimagerendered', onImageRendered);
    },
  };
});

启用和禁用自定义工具

添加自定义工具后，我们可以通过调用 cornerstoneTools.enableTool() 方法启用它：

cornerstoneTools.enableTool(element, 'customRectangleTool');

我们还可以通过调用 cornerstoneTools.disableTool() 方法禁用工具：

cornerstoneTools.disableTool(element, 'customRectangleTool');

自定义工具用例

自定义工具可以用于各种用例，例如：

• 绘制形状（如矩形、圆形和多边形）
• 添加注释和标记
• 执行图像处理操作（如平滑和锐化）
• 开发复杂的图像分析算法

常见问题解答

• 如何检查我的自定义工具是否已正确添加？

  • 您可以使用 cornerstoneTools.getToolState() 方法来检查已添加到特定元素的工具的状态。

• 我可以修改现有的 CornerstoneJS 工具吗？

  • 是的，您可以使用 cornerstoneTools.modifyTool() 方法来修改现有的 CornerstoneJS 工具。

• 自定义工具可以使用哪些事件处理程序？

  • 自定义工具可以使用以下事件处理程序：
    • mousedown
    • mouseup
    • mousemove
    • cornerstoneimagerendered

• 如何处理自定义工具中的键盘事件？

  • 您可以使用 cornerstoneTools.addKeyboardHandler() 方法来处理自定义工具中的键盘事件。

• 我可以创建自己的工具栏吗？

  • 是的，您可以使用 cornerstoneTools.addToolbar() 方法创建自己的工具栏。

结论

通过使用 CornerstoneTool.js 库的 cornerstoneTools.addTool() 方法，我们可以轻松地创建自定义工具来扩展库的功能。这些工具可以用于广泛的用例，从简单的绘图到复杂的图像分析算法。通过利用自定义工具，我们可以为我们的医疗成像应用程序定制独特的体验和功能。