Stack / Series

这个系列用来做一些DICOM帧动画。cornerstoneTools.addTool的第二个参数可有可无。

script src

<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 
            } 
        }
   ]);
</script>

Crosshairs

十字准线（不会有十字线图形，直接在第一个DICOM图形拉动即可）

//html
<div class="wrapper">
    <div class="cornerstone-element" oncontextmenu="return false" onmousedown="return false"></div>
    <div class="cornerstone-element" oncontextmenu="return false" onmousedown="return false"></div>
</div>

//script
<script>
    let els = document.querySelectorAll(".cornerstone-element");
    const toolName = "Crosshairs";
    let numImagesLoaded = 0;
    
    els.forEach(el => {
        cornerstone.enable(el);
    });
    
    function addCrosshairsTool() {
        //同步器
        const synchronizer = new cornerstoneTools.Synchronizer("cornerstonenewimage", cornerstoneTools.updateImageSynchronizer); //图像更新同步
        synchronizer.add(els[0]);
        synchronizer.add(els[1]);

        const tool = cornerstoneTools[toolName + "Tool"];
        cornerstoneTools.addTool(tool);
        cornerstoneTools.setToolActive(toolName, {
            mouseButtonMask: 1,
            synchronizationContext: synchronizer //同步上下文
        });
    }
    function handleImageRendered(e) {
        e.detail.element.removeEventListener("cornerstoneimagerendered", handleImageRendered); //移除监听事件
        numImagesLoaded++;
        if (numImagesLoaded == 2) {
            addCrosshairsTool();
        }
    }
    els[0].addEventListener("cornerstoneimagerendered", handleImageRendered);//监听图像渲染完成
    els[1].addEventListener("cornerstoneimagerendered", handleImageRendered);
    
    const imageIds = [`wadouri:http://127.0.0.1/download/dicom/IM-0001-0001.dcm`];
    const chestImageIds = new Array();
    for (let i = 1; i < 37; i++) { // 多个DICOM文件
        chestImageIds.push(
            `wadouri:http://127.0.0.1/download/dicom/${i}.dcm`
        );
    }

    const topgramStack = { //主栈
        currentImageIdIndex: 0,
        imageIds: imageIds
    };
    const chestStack = { //动画栈
        currentImageIdIndex: 0,
        imageIds: chestImageIds
    };
    
    cornerstoneTools.addTool(cornerstoneTools.StackScrollTool); //鼠标点击主容器滑动
    cornerstoneTools.addTool(cornerstoneTools.StackScrollMouseWheelTool); //滚轮滚动
    cornerstoneTools.setToolActive('StackScroll', {
        mouseButtonMask: 1
    });
    cornerstoneTools.setToolActive('StackScrollMouseWheel', {});
    
    loadSeries(imageIds, els[0], topgramStack);
    loadSeries(chestImageIds, els[1], chestStack);

    function loadSeries(imgs, element, stack) {
        imgs.forEach(id => {
            cornerstone.loadAndCacheImage(id);
        });
        return cornerstone.loadImage(imgs[0]).then(res => {
            cornerstone.displayImage(element, res);
            cornerstoneTools.addStackStateManager(element, ["stack", toolName]); //添加栈状态管理
            cornerstoneTools.addToolState(element, "stack", stack); //添加工具状态
        });
    }
</script>

StackScrollMouseWheelTool

滚轮切换DICOM图形

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

//script
<script>
    let el = document.querySelector("#dicomImage");
    
    const chestImageIds = new Array();
    for (let i = 1; i < 37; i++) {
        chestImageIds.push(
            `wadouri:http://127.0.0.1/download/dicom/${i}.dcm`
        );
    }

    const chestStack = {
        currentImageIdIndex: 0,
        imageIds: chestImageIds,
    };
    
    loadSeries(chestImageIds, el, chestStack);

    function loadSeries(images, element, stack) {
        images.forEach(item => cornerstone.loadAndCacheImage(item));

        return cornerstone.loadImage(images[0]).then(img => {
            cornerstone.displayImage(element, img);

            cornerstoneTools.addStackStateManager(element, ["stack", toolName]);
            cornerstoneTools.addToolState(element, "stack", stack);
        });
    }
    
    let StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;
    cornerstoneTools.addTool(StackScrollMouseWheelTool, {
        configuration: {
            loop: true, //是否循环
            allowSkipping: false, //允许跳过， false 向上后就不能在滚动
            invert: false, //颠倒
        }
    });
    cornerstoneTools.setToolActive("StackScrollMouseWheel", {
        mouseButtonMask: 1
    });
</script>

StackScrollMultiTouchTool

这个和 StackScrollMouseWheelTool差不多，只是这个用于移动端。

let StackScrollMultiTouchTool = cornerstoneTools.StackScrollMultiTouchTool;
cornerstoneTools.addTool(StackScrollMultiTouchTool, {
    configuration: {
        loop: true, //是否循环
        allowSkipping: true, //允许跳过， false 向上后就不能在滚动
        touchPointers: 3, //3个手指触摸
    }
});
cornerstoneTools.setToolActive("StackScrollMultiTouch", {
    mouseButtonMask: 1
});

StackScrollTool

除了第一个外，剩下的三个写法基本一样，只是调用的API和操作事件不一样。这个是点击canvas图形，向上或向下滑动即可。

let StackScrollTool = cornerstoneTools.StackScrollTool;
cornerstoneTools.addTool(StackScrollTool, {
    configuration: {
        loop: true, //是否循环
        allowSkipping: true, //允许跳过， false 向上后就不能在滚动
    }
});
cornerstoneTools.setToolActive("StackScroll", {
    mouseButtonMask: 1
});

基本也就这些了。