cornerstoneTools.js General中API的使用

cornerstoneTools.addTool第二个参数是可有可无的，要配置初始化个性时可使用。

html

<div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>

<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
<script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-math@0.1.9/dist/cornerstoneMath.min.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script>
<script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
<script src="https://unpkg.com/cornerstone-tools@5.1.4/dist/cornerstoneTools.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>
<script>
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    
    cornerstoneTools.init([{
        moduleName: 'globalConfiguration',
        configuration: {
            showSVGCursors: true
        }
    }, {
        moduleName: 'segmentation',
        configuration: {
            outlineWidth: 2
        }
    }]);

    let el = document.querySelector("#dicomImage");
    let imageId = "wadouri:http://127.0.0.1/download/1.dcm";
    cornerstone.enable(el);
    cornerstone.loadAndCacheImage(imageId).then(function(image) {
        cornerstone.displayImage(el, image);
    });
</script>

DoubleTapFitToWindowTool

这个API是还原初始化状态的，但是只会改变 scale,translation这两个值（PS: 触摸事件才有效）

    let viewport = cornerstone.getViewport(el);
    viewport.scale += 0.3;
    viewport.translation.x += 10;
    viewport.translation.y += 100;
    viewport.rotation += 90;
    cornerstone.setViewport(el, viewport);
    
    let DoubleTapFitToWindowTool = cornerstoneTools.DoubleTapFitToWindowTool;
    cornerstoneTools.addTool(DoubleTapFitToWindowTool);
    cornerstoneTools.setToolActive("DoubleTapFitToWindow", {
        mouseButtonMask: 1
    });

DragProbeTool

移动探针，会根据DICOM文件来切换显示内容, 有RGB和Hu值, 还有两种模式 default ,minimal (PS : (DICOM文件大小范围内有效))

let DragProbeTool = cornerstoneTools.DragProbeTool;
cornerstoneTools.addTool(DragProbeTool);
cornerstoneTools.setToolActive("DragProbe", {
    mouseButtonMask: 1
});

//要改变模式的话
const ActiveScissorTool = cornerstoneTools.getToolForElement(element,"DragProbe"); //element元素  toolName 工具名(不带Tool)
ActiveScissorTool.setActiveStrategy("minimal"); //这个状态下不会显示移动坐标

EraserTool

橡皮擦(PS : 不能擦除Segmentation绘制的东西)

let EraserTool = cornerstoneTools.EraserTool;
cornerstoneTools.addTool(EraserTool);
cornerstoneTools.setToolActive("Eraser", {
    mouseButtonMask: 1
});

MagnifyTool

放大镜, 当鼠标抬起时会报 removeEventListener parameter 2 is not of type 'Object', 因为它把事件名和回调位置写反了

let MagnifyTool = cornerstoneTools.MagnifyTool;
cornerstoneTools.addTool(MagnifyTool, { //配置可有可无
    configuration: {
        magnifySize: 100, //放大镜大小, 默认是 300
        magnificationLevel: 2, //方法级别, 默认是2   调用的是 drawImage sx,sy 这两个参数的位置
    }
});
cornerstoneTools.setToolActive("Magnify", {
    mouseButtonMask: 1
});

OrientationMarkersTool

这个API暂时不清楚作用，官网也没啥效果

let OrientationMarkersTool = cornerstoneTools.OrientationMarkersTool;
cornerstoneTools.addTool(OrientationMarkersTool, {
    configuration: {
        drawAllMarkers: true
    }
});
cornerstoneTools.setToolActive("OrientationMarkers", {
    mouseButtonMask: 1
});

PanMultiTouchTool

移动端触摸移动事件

let PanMultiTouchTool = cornerstoneTools.PanMultiTouchTool;
cornerstoneTools.addTool(PanMultiTouchTool, {
    configuration: {
        touchPointers: 1, //触摸指针, 默认两个手指  设置无效
    }
});
cornerstoneTools.setToolActive("PanMultiTouch", {
    mouseButtonMask: 1
});

PanTool

移动canvas中的图像位置

let PanTool = cornerstoneTools.PanTool;
cornerstoneTools.addTool(PanTool);
cornerstoneTools.setToolActive("Pan", {
    mouseButtonMask: 1
});

RotateTouchTool

移动端旋转图像

let RotateTouchTool = cornerstoneTools.RotateTouchTool;
cornerstoneTools.addTool(RotateTouchTool);
cornerstoneTools.setToolActive("RotateTouch", {
    mouseButtonMask: 1
});

RotateTool

旋转图像，三种模式 default horizontal vertical

let RotateTool = cornerstoneTools.RotateTool;
//roundAngles 为true 并设置 horizontal或vertical 模式会变成反方向旋转
//并且对应的属性也要设置为true, 不然会有平分线区分方向
cornerstoneTools.addTool(RotateTool, {
    configuration: {
        roundAngles: true, //未true是会Math.ceil取整
        flipHorizontal: true, //水平反转
        flipVertical: true, //垂直反转
        rotateScale: 1, //控制旋转的快慢
    },
});
cornerstoneTools.setToolActive("Rotate", {
    mouseButtonMask: 1
});
//改变模式
const ActiveScissorTool = cornerstoneTools.getToolForElement(
    el,
    'Rotate'
);
ActiveScissorTool.setActiveStrategy("horizontal");

ScaleOverlayTool

刻度尺

let ScaleOverlayTool = cornerstoneTools.ScaleOverlayTool;
cornerstoneTools.addTool(ScaleOverlayTool, {
    configuration: {
        minorTickLength: 12.5, //小节拍长度
        majorTickLength: 25, //大节拍长度,并不是总长度,总长度会根据canvas大小调整
    },
});
cornerstoneTools.setToolActive("ScaleOverlay", {
    mouseButtonMask: 1
});

WwwcRegionTool

拉取框改变色差

let WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
cornerstoneTools.addTool(WwwcRegionTool, {
    configuration: {
        minWindowWidth: 10, //拉取窗口最小值
    }
});
cornerstoneTools.setToolActive("WwwcRegion", {
    mouseButtonMask: 1
});

WwwcTool

滑动改变色差 (windowWidth, windowCenter)

let WwwcTool = cornerstoneTools.WwwcTool;
cornerstoneTools.addTool(WwwcTool, {
    configuration: {
        orientation: 0, //不等于0是反方向
    }
});
cornerstoneTools.setToolActive("Wwwc", {
    mouseButtonMask: 1
});

ZoomMouseWheelTool

鼠标滚动放大缩小

let ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
cornerstoneTools.addTool(ZoomMouseWheelTool, {
    configuration: {
        minScale: 0, //最小缩放值  默认 0.25
        maxScale: 20.0, //最大缩放值  默认 20.0
        invert: true, //放大缩小方向相反  true 反方向   false正方向
    }
});
cornerstoneTools.setToolActive("ZoomMouseWheel", {
    mouseButtonMask: 1
});

ZoomTouchPinchTool

移动端触摸放大缩小

let ZoomTouchPinchTool = cornerstoneTools.ZoomTouchPinchTool;
cornerstoneTools.addTool(ZoomTouchPinchTool, {
    configuration: {
        minScale: 0, //最小缩放值  默认 0.25
        maxScale: 20.0, //最大缩放值 默认 20.0
    }
});
cornerstoneTools.setToolActive("ZoomTouchPinch", {
    mouseButtonMask: 1
});

ZoomTool

放大缩小, 有三种模式

/**
 * default 只缩放
 * translate 缩放并移动
 * zoomToCenter 只中心缩放
 */
let ZoomTool = cornerstoneTools.ZoomTool;
cornerstoneTools.addTool(ZoomTool, {
    configuration: {
        invert: false, //放大缩小方向相反  true 反方向   false正方向
        preventZoomOutsideImage: false, //暂时不知干啥用
        minScale: 0, //最小缩放值  默认 0.25
        maxScale: 20.0 //最大缩放值
    }
});
cornerstoneTools.setToolActive("Zoom", {
    mouseButtonMask: 1
});
//改变模式
nst ActiveScissorTool = cornerstoneTools.getToolForElement(
    el,
    'Zoom'
);
ActiveScissorTool.setActiveStrategy("zoomToCenter");

cornerstoneTools.js使用记录二