三、CornerstoneTools中的工具介绍使用

一、CornerstoneTools是什么？

Cornerstone Tools 所有的工具均为 class 类，都是通过继承 class 类的方式实现统一的集成。根据工具的使用方式主要分为三个父类：BaseTool、BaseAnnotationTool、BaseBrushTool。

如果要在我们的代码中使用一个工具，则必须实现以下两个步骤：

step 1、cornerstoneTools.init()方法 初始化cornerstoneTools
step 2、使用Cornerstone的顶层addTool函数添加未实例化的工具
step 3、使用cornerstoneTools.setToolActive()激活工具

查看当前的cornerstoneTools版本号

console.log(`当前 cornerstoneTools 的版本号为：${
     
     cornerestoneTools.version}`);

cornerstoneTools初始化:

// cornerstoneTools 指定内部库
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

cornerstoneTools.init({
   
   
  mouseEnabled: true,// 当元素被启用时，是否监听鼠标事件
  touchEnabled: true,// 当元素被启用时，是否监听触摸事件
  globalToolSyncEnabled: true, // 全局工具同步
  showSVGCursors: true,  // 显示svg光标
  autoResizeViewports: true,  // 自动调整视口大小
  lineDash: [4, 4]  // 虚线样式
});

二、工具的模式以及使用

注册的工具处于以下四种模式之一，每种模式都会影响工具对交互的响应方式。
📢 注意：在同一种绑定方式下有且仅有一种工具被激活，不会有两个工具被激活。
📢 工具添加后，默认为禁用模式，如果进行交互，则需要将工具模式调整为激活模式。

模式	对应的交互效果
Active（激活模式）	1. Active模式下的工具将响应交互 2. 如果该工具是注释工具，则单击未覆盖现有注释的事件将创建新注释，覆盖现在注释将选中注释
Passive (default)（消极模式）	1. 如果工具是注释工具，如果它可以被选中，它可以被移动和重新定位。2. 不响应交互
Enabled（可用模式）	1. 工具可以呈现，但不能进行交互响应
Disabled（禁用模式）	1. 工具既不渲染，也不会响应交互

1、激活模式

cornerstoneTools.setToolActiveForElement(element, toolName, {
   
   mouseButtonMask: 1});// 给指定启用元素激活指定工具
cornerstoneTools.setToolActive(toolName, options);// 或者，直接激活全部启用元素的指定工具

2、启用模式

cornerstoneTools.setToolEnabledForElement(element, toolName);// 给指定启用元素启用指定工具
cornerstoneTools.setToolEnabled(toolName, options);// 或者，直接启用全部启用元素的指定工具

3、禁用模式

cornerstoneTools.setToolDisabledForElement(element, toolName); // 给指定启用元素禁用指定工具
cornerstoneTools.setToolDisabled(toolName, options);// 或者，直接禁用全部启用元素的指定工具

4、被动模式

cornerstoneTools.setToolPassiveForElement(element, toolName); // 给指定启用元素被动指定工具
cornerstoneTools.setToolPassive(toolName, options); // 或者，直接被动全部启用元素的指定工具

三、基本API使用

1、校验指定启用元素指定工具是否为激活模式

const element = document.getElementById("enabledElement");
const toolName