cornerstoneTools简介

星沉轻舟
171 阅读5分钟

cornerstoneTools简介

1. 简介

Cornerstone Tools 是一个 JavaScript 库，它建立在 Cornerstone 的基础之上，可帮助注释、分割和测量医学图像。该库还提供了一个框架，用于创建新工具，以一致、连贯的方式管理所有工具，以及导入/导出工具测量数据。文档地址

2. 工具模式

Cornerstone Tools定义了四种工具状态，如下

状态描述
active工具已经激活的状态，可以使用工具进行测量，标注。主要是测量工具，标注工具
passive被动状态，可以在画面上呈现表述的数据，可以在页面上重新操作已经标记的数据，但是不能创建新的标记
enabled启用状态，不会对输入做出响应，相当于只读
disabled禁用状态（默认状态），无法交互，无法在页面上出现

更改工具状态的

3.工具介绍

为了让工具更好的扩展，cornerstoneTools给不同类型的工具都扩展了一个基类，不同类型的工具可以选择继承对应的基类。这些基类提供了不同的方法，在工具扩展和自定义工具的时候可以参考这些基类的实现

基类描述
Base Tool所有工具的最顶级父级类，负责初始化工具配置，混合函数，以及为活动状态的工具提供鼠标交互回调函数
Base Annotation ToolBase Tool的扩展类，主要用于标注数据工具的初始化，提供标注数据时鼠标相关操作的回调函数
Base Brush ToolBase Tool的扩展类，用于在canvas编辑分割模块的 Labelmap3D 数据。用于创建和编辑分段
Segmentation ToolsBase Tool的扩展类，创建以标签图层进行交互，而不是手动绘制的工具

  • 基础工具

    工具描述
    Double Tap Fit To Window Tool双击改变图像的窗口（只在触摸设备上使用）
    Drag Probe Tool拖动探针工具
    Eraser Tool橡皮擦工具
    Magnify Tool放大镜工具
    Orientation Markers Tool定位标记工具（图像四个方向的位置）
    Pan MultiTouch Tool触控平移工具（只在触摸设备上使用）
    Pan Tool平移工具
    Rotate MultiTouch Tool触控旋转工具（只在触摸设备上使用）
    Rotate Tool旋转工具
    Scale Overlay Tool比例尺工具
    WWWC Region Tool框选调整窗宽窗位工具
    WWWC Tool调整窗宽窗位工具
    Zoom MouseWheel Tool鼠标滚轮缩放工具
    Zoom TouchPinch Tool触摸缩放工具
    Zoom Tool缩放工具

    这些工具的使用方法基本如下

    cornerstoneTools.init();
​
const yourTool = cornerstoneTools.yourTool;
​
// mouseButtonMask绑定鼠标的键位，1左键，0滚轮，2右键
cornerstoneTools.addTool(yourTool)
cornerstoneTools.setToolActive('toolName', { mouseButtonMask: 1 })

  • 测量注释工具

    工具描述
    Angle Tool角度工具
    Arrow Annotate Tool箭头注释工具
    Bidirectional Tool双向测量工具
    Cobb Angle Toolcobb角测量工具
    EllipticalRoi Tool椭圆测量工具
    FreehandRoi Tool多边形测量工具
    Length Tool长度测量工具
    Probe Tool单点测量工具
    RectangleRoi Tool矩形工具
    Text Marker Tool文本标记数据

    这些工具的使用方法基本如下

    cornerstoneTools.init();
​
const yourTool = cornerstoneTools.yourTool;
​
// mouseButtonMask绑定鼠标的键位，1左键，0滚轮，2右键
cornerstoneTools.addTool(yourTool)
cornerstoneTools.setToolActive('toolName', { mouseButtonMask: 1 })

    特别的，如文字标注，箭头标注需要自定义输入框输入文字，以element输入框为例

    const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
    const props = {
        configuration: {
            arrowFirst: false,
            allowEmptyLabel: true,
            getTextCallback: function (doneChangingTextCallback) {
                ElMessageBox.prompt('请输入标注内容：', '标注文字', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    appendTo: 'body',
                })
                    .then(({ value }) => {
                        doneChangingTextCallback(value);
                    })
                    .catch(() => {});
            },
            changeTextCallback: function (data, eventData, doneChangingTextCallback) {
                ElMessageBox.prompt('请输入标注内容：', '标注文字', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    inputValue: data.text,
                })
                    .then(({ value }) => {
                        doneChangingTextCallback(value);
                    })
                    .catch(() => {});
            },
        },
    };
    cornerstoneTools.addTool(ArrowAnnotateTool, props);
    cornerstoneTools.setToolActive('ArrowAnnotate', { mouseButtonMask: 1 });

  • 堆栈/序列工具

    工具描述
    Crosshairs Tool十字线工具
    Stack Scroll MouseWheel Tool堆栈滚动鼠标滚轮工具(鼠标滚动切换图像)
    Stack Scroll MultiTouch Tool堆栈滚动多点触控工具（触摸滑动）
    Stack Scroll Tool堆栈滚动工具(左键滑动切图像)

    在使用这些工具的时候需要先初始化状态管理器

    // imageIds
const imageIds = ['wadouri:https://image1','wadouri:https://image2','wadouri:https://image3']
// 初始化栈，当前下标从0开始
const stack = {
  currentImageIdIndex: 0,
  imageIds
}
// 添加状态管理器
cornerstoneTools.addStackStateManager(element, ['stack'])
// 添加栈
cornerstoneTools.addToolState(element, 'stack', stack)

    初始化工具

    const yourTool = cornerstoneTools.yourTool;
​
cornerstoneTools.addTool(yourTool)
cornerstoneTools.setToolActive('toolName', { mouseButtonMask: 1 })

    特殊：十字线工具需要初始化同步器

    // 创建同步器
const synchronizer = new cornerstoneTools.Synchronizer(
  // 触发同步器的事件
  'cornerstonenewimage',
  // 触发事件时运行的方法
  cornerstoneTools.updateImageSynchronizer
)
​
// 需要在所有图像都加载完成之后才能初始化十字线工具
const tool = cornerstoneTools.CrosshairsTool;
cornerstoneTools.addTool(tool);
cornerstoneTools.setToolActive('Crosshairs', {
   mouseButtonMask: 1,
   synchronizationContext: synchronizer,
});
​

  • 分割工具

    工具描述
    Brush Tool画笔工具
    Circle Scissors Tool圆形剪切工具
    Freehand Scissors Tool自由剪切工具
    Rectangle Scissors Tool矩形剪切工具

    使用方法

    const yourTool = cornerstoneTools.yourTool;
cornerstoneTools.addTool(yourTool)
cornerstoneTools.setToolActive('toolName', { mouseButtonMask: 1 })

  • 同步器

    主要为参考线工具，十字线工具使用，为了使不同序列的关联影像可以同步数据，在图像都加载完成之后使用

    const firstStack = {
  currentImageIdIndex: 0,
  imageIds: ['wadouri:https://image1','wadouri:https://image2','wadouri:https://image3'],
};
​
const secondStack = {
  currentImageIdIndex: 0,
  imageIds: ['wadouri:https://image1','wadouri:https://image2','wadouri:https://image3'],
};
​
​
// 创建同步器
const synchronizer = new cornerstoneTools.Synchronizer(
  // 触发同步器的事件
  'cornerstonenewimage',
  // 触发事件时运行的方法
  cornerstoneTools.updateImageSynchronizer
)
​
// 加载第一个序列
const firstLoadImagePromise = cornerstone.loadImage(firstStack.imageIds[0])
  .then((image) => {
    cornerstone.displayImage(firstElement, image)
    // 同步器关联dom
    synchronizer.add(firstElement)
    // 初始化状态管理器
    cornerstoneTools.addStackStateManager(firstStack, ['stack', 'Crosshairs'])
    cornerstoneTools.addToolState(firstElement, 'stack', firstStack)
  })
// 加载第二个序列
const secondLoadImagePromise = cornerstone.loadImage(secondStack.imageIds[0])
  .then((image) => {
    cornerstone.displayImage(secondElement, image)
    synchronizer.add(secondElement);
    cornerstoneTools.addStackStateManager(secondElement, ['stack', 'Crosshairs']);
    cornerstoneTools.addToolState(secondElement, 'stack', secondStack);
  })
​
// 在所有图像都加载完成之后
Promise.all([firstLoadImagePromise, secondLoadImagePromise])
  .then(() => {
    // 添加参考线工具
    cornerstoneTools.addTool(cornerstoneTools.ReferenceLinesTool);
    // 为工具关联同步器
    cornerstoneTools.setToolEnabled('ReferenceLines', {
      synchronizationContext: synchronizer,
    });
  });
avatar
文章
阅读
粉丝