三、CornerstoneTools中的工具介绍使用

吃糖壮胆

于 2024-09-14 11:42:17 发布

阅读量1k

点赞数 10

分类专栏： cornerstoneJs 文章标签：前端

本文链接：https://blog.csdn.net/eamon36/article/details/142248096

版权

cornerstoneJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、CornerstoneTools是什么？
二、工具的模式以及使用
三、基本API使用
四、事件
五、工具种类列表
六、demo示例
七、实际效果

一、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 = "Wwwc";
const isActive = cornerstoneTools.isToolActiveForElement(element, toolName);
if (isActive) {
  console.log("工具已激活");
}

2、添加指定工具

// 获取指定启用元素
const element = document.getElementById("enabledElement");
// 获取需要添加的工具
const ApiTool = cornerstoneTools.WwwcTool;
// 配置props，具体配置项需参考具体工具
const props = {
  configuration: {
    orientation: 1
  }
};

// 给指定启用元素添加指定工具
cornerstoneTools.addToolForElement(element, ApiTool, props);
// 或者，直接给全部启用元素添加指定工具
cornerstoneTools.addTool(ApiTool, props);

3、清除指定工具

// 获取指定启用元素
const element = doucment.getElementById("enabledElement");
const toolName = "Wwwc";

// 给指定启用元素清除指定工具
cornerstoneTools.removeToolForElement(element, toolName);
// 或者，直接清除全部启用元素的指定工具
cornerstoneTools.removeTool(toolName);

4、获取已添加的指定工具

const element = document.getElementById("enabledElement");
const tools = cornerstoneTools.getToolForElement(element, "Wwwc");

5、当需要清除图像上显示的测量标注时，需要先清空工具的 state 记录

    /***
     * @description 清除某个工具的标注,清除后无法恢复，隐藏是还可以恢复的
     * @desc 特此说明,当需要重新隐藏标注时，直接将工具状态禁用即可
     * @param element 启用的元素
     * @param toolName 工具名
     */
    function clearToolState(element,toolName){
        cornerstoneTools.clearToolState(element,toolName);
        cornerstone.updateImage(element);// 刷新图像
    }

6、当需要切换图像上的测量标注进行隐藏或者显示

/***
 * @description 隐藏标注，隐藏不同于清除,隐藏后还可以恢复
 * @desc 特此说明,当需要重新隐藏标注时，直接将工具状态禁用即可
 * @param element 启用的元素
 * @param toolName 工具名
 */
function hideLabel(element,toolName){
     cornerstoneTools.setToolDisabledForElement(element,toolName);
    // cornerstoneTools.setToolDisabled(toolName);或者，直接将全部的启用元素隐藏标注
    cornerstone.updateImage(element);   // 刷新图像,注意：否则无效
}


/***
 * @description 显示标注
 * @desc 特此说明,当需要重新显示标注时，需要重新将所有工具激活即可
 * @param element 启用的元素
 * @param toolName 工具名
 * @param options 工具配置项
 */
function showLabel(element,toolName,options){
    cornerstoneTools.setToolActiveForElement(element, toolName, options);
   // cornerstoneTools.setToolActive(toolName, options); 或者，直接激活全部启用元素的指定工具
    cornerstone.updateImage(element);  // 刷新图像 , 需要重新刷新
}

四、事件

CornelstoneTools 事件将本地事件捕获，并进行规范化，并使用 cornerstonetools 前缀重新触发，这样在不同的浏览器中可以一致地处理事件。

            事件分类	                        事件名称	                             说明
            鼠标事件
	                                  cornerstonetoolsmousedown	             鼠标按下时触发
	                                  cornerstonetoolsmouseup	             鼠标抬起时触发
	                                  cornerstonetoolsmousedrag	             鼠标拖拽时触发
	                                  cornerstonetoolsmousemove		         鼠标移动时触发
	                                  cornerstonetoolsmouseclick		     鼠标点击时触发
	                                  cornerstonetoolsmousedoubleclick	     鼠标双击时触发
	                                  cornerstonetoolsmousewheel	         鼠标滚轮滚动时触发
 	
            键盘事件
	                                  cornerstonetoolskeydown	             键盘按下时触发
 	                                  cornerstonetoolskeyup	                 键盘抬起时触发
 	                                  cornerstonetoolskeypress	             键盘按下生字符值的键时触发
 	                                  cornerstonetoolsmeasurementadded	     增加测量数据时触发
 	                                  cornerstonetoolsmeasurementmodified	 修改测量数据时触发
 	                                  cornerstonetoolsmeasurementcompleted	 测量停止时触发
 	                                  cornerstonetoolsmeasurementremoved	 移除测量数据时触发
 	
            自定义事件	
                                      cornerstonetoolstooldeactivated	    工具停用时触发，工具模式被修改为 passive
                                      cornerstonetoolsclipstopped	               播放工具停止时触发
 	                                  cornerstonetoolsstackscroll	               scroll stack 图像时触发
 	                                  cornerstonetoolsstackprefetchimageloaded	   stack预加载图像完成时触发
 	                                  cornerstonetoolsstackprefetchdone	           全部完成 stack 预加载时触发
 	                                  cornersontetoolslabelmapmodified	           labelmap 修改时触发

事件使用的方法：

const element = document.getElementById("enabledElement");
element.addEventListener('cornerstonetoolsmousedoubleclick',(e)=>{})

五、工具种类列表

工具类名						工具名称										说明
CrosshairsTool				十字线				用于在与同步图像序列中的图像位置相对应的另一元素中查找切片的工具。
DragProbeTool				探针				拖动时在输入位置提供图像数据探测的工具，主要用于测量 CT 值。
MagnifyTool					放大镜				用于放大检查区域的工具。
OrientationMarkersTool		方向标记				用于在图像上显示方向标记的工具，激活后无需操作自动显示。
PanTool						平移				用于平移图像的工具。
RotateTool					旋转				用于旋转图像的工具。
ScaleOverlayTool			比例尺				用于在图像上显示比例覆盖的工具，激活后无需操作自动显示。
WWWCTool					调窗				通过拖动设置窗宽窗位的工具。
ZoomTool					缩放				用于调整缩放比例的工具。
StackScrollTool				浏览序列				用于滚动系列的工具。
StackScrollMouseWheelTool	鼠标滚轮浏览序列		使用鼠标滚轮滚动序列的工具。
OverlayTool					覆盖层				用于在图像上显示覆盖信息或图形的工具。
ReferenceLinesTool			参考线				用于显示其他已启用元素的参考线的工具。
EraserTool					橡皮擦				用于删除其他注释工具的数据的工具。

AngleTool					  角度			通过放置三个连续点创建和定位角度。
ArrowAnnotateTool			箭头标注			创建并定位箭头和标签。
BidirectionalTool			  双向			创建并定位测量区域长度和宽度的注释。
CircleRoiTool		 		  圆形	        用于绘制感兴趣的圆形区域并测量封闭像素的统计信息的工具。
CobbAngleTool				cobb 角			用于测量两条直线之间的角度的工具。
EllipticalRoiTool			 椭圆			用于绘制感兴趣的椭圆区域并测量封闭像素的统计信息的工具。
FreehandRoiTool				 多边形			用于绘制任意多边形感兴趣区域并测量封闭像素统计信息的工具。
LengthTool				  	 长度			测量距离的工具。
ProbeTool					 探针			在所需位置提供图像数据探测的工具
RectangleRoiTool			 矩形			用于绘制感兴趣的矩形区域并测量封闭像素的统计信息的工具。
TextMarkerTool			  文字标注	        用于使用文本标记注释图像的工具。

六、demo示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CornerstoneTools Demo</title>
    <script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
</head>
<body>
<div id="dicomImage" style="width: 512px;height: 512px;"></div>
<button onclick="EllipticalRoiToolFun()">椭圆测量</button>
<button onclick="removeTool()">清除工具</button>
<button onclick="hideLabel()">隐藏标注</button>
<button onclick="showLabel()">显示标注</button>
<button onclick="getToolInfo()">获取指定工具的信息</button>
<button onclick="clearMarker()">清除图像上的所有标注</button>
<script>

    let imageId = "wadouri:" + "http://47.107.255.46:1000/wado/SERVERAE?requestType=WADO&studyUID=1.2.392.200036.9116.2.5.1.3268.2047634718.1719992618.411948&seriesUid=840.113747.1719992443.59096.130764.1965210712314854.1337&objectUid=4.59096.130764.1965210712314854.1341&contentType=application%2Fdicom";
    let element = document.querySelector("#dicomImage");

    /***
     * @description cornerstone初始化
     * @param imageId
     */
    function cornerstoneInit(imageId) {
        cornerstoneTools.external.cornerstone = cornerstone;
        cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
        cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
        // 初始化cornerstoneTools
        cornerstoneTools.init({
            mouseEnabled: true,// 当元素被启用时，是否监听鼠标事件
            touchEnabled: false, // 当元素被启用时，是否监听触摸事件
            globalToolSyncEnabled: true,// 全局工具同步
            showSVGCursors: true, // 显示svg光标
            autoResizeViewports: true,// 自动调整视口大小
            lineDash: [4, 4] // 虚线样式
        });

        cornerstone.enable(element);  // 初始并启用绘制的元素
        const ApiTool = cornerstoneTools[`EllipticalRoiTool`];
        cornerstoneTools.addToolForElement(element, ApiTool);  // 给指定启用元素添加指定工具
        // cornerstoneTools.addTool(ApiTool);或者，直接给全部启用元素添加指定工具
        loadImage(element, imageId); // 加载并且绘制影像到指定元素上
    }

    /***
     * @description 加载并图像
     * @param element 承载影像的容器div元素
     * @param imageId 影像Id
     */
    function loadImage(element, imageId) {
        cornerstone.loadAndCacheImage(imageId).then(image => {
            cornerstone.displayImage(element, image); // 渲染影像到指定元素
        })
    }


    /***
     * @description 椭圆测量
     * @constructor
     */
    function EllipticalRoiToolFun(){
        const options = {mouseButtonMask: 1};
        setToolActive('EllipticalRoi',options);
    }

    /***
     *@description 获取已添加的指定工具 , 可以查看工具当前的mode状态
     * mode: "disabled" , "active"
     */
    function getTool(toolName){
        const tools = cornerstoneTools.getToolForElement(element, toolName);
        console.log("已添加的工具 " + toolName +" 信息")
        return tools
    }

    /***
     * @description 给指定启用元素激活指定工具
     * @param toolName 工具名
     * @param element 影像渲染元素
     * @param options 公户配置项
     */
    function setToolActive(toolName,options){
        cornerstoneTools.setToolActiveForElement(element, toolName, options);
        // cornerstoneTools.setToolActive(toolName, options); 或者，直接激活全部启用元素的指定工具
    }

    /***
     *@description 清除工具
     */
    function removeTool() {
        cornerstoneTools.removeToolForElement(element,'EllipticalRoi'); // 给指定启用元素清除指定工具
        // cornerstoneTools.removeTool(toolName); 或者，直接清除全部启用元素的指定工具
    }

    /***
     * @description 隐藏标注
     * @desc 特此说明,当需要重新隐藏标注时，直接将工具状态禁用即可
     * @param toolName 工具名
     */
    function hideLabel(){
        cornerstoneTools.setToolDisabledForElement(element,'EllipticalRoi');
        // cornerstoneTools.setToolDisabled(toolItem.toolName); 或者，直接将全部的启用元素隐藏标注
        cornerstone.updateImage(element);   // 刷新图像,
    }

    /***
     * @description 显示标注
     * @desc 特此说明,当需要重新显示标注时，需要重新将所有工具激活即可
     * @param toolName 工具集
     */
    function showLabel(toolName){
        EllipticalRoiToolFun();
        cornerstone.updateImage(element);  // 刷新图像 , 需要重新刷新
    }

    /***
     * @description 获取指定工具的信息
     * @constructor
     */
    function getToolInfo() {
        console.log(getTool('EllipticalRoi'));
    }

    /***
     * @description 清除图像上的所有标注,永久清除
     * @desc 当需要清除图像上显示的测量标注时，需要先清空工具的 state 记录
     */
    function clearMarker(){
        cornerstoneTools.clearToolState(element, 'EllipticalRoi');
        cornerstone.updateImage(element); // 刷新图像
    }
    cornerstoneInit(imageId);
</script>
</body>
</html>