Synchronization

同步器。cornerstoneTools.addTool第二个参数可有可无。

html

<div class="wrapper">
    <div class="elements"></div>
    <div class="elements"></div>
</div>

script

<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>
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    
    cornerstoneTools.init([{
        moduleName: 'globalConfiguration',
        configuration: {
            showSVGCursors: true
        }
    }, {
        moduleName: 'segmentation',
        configuration: {
            outlineWidth: 2
        }
    }]);
    
    const els = document.querySelectorAll(".elements");
    
    els.forEach(el => cornerstone.enable(el));
    const url = "http://127.0.0.1/download/dicom";
    let numImagesLoaded = 0;
    const imageIds = [`wadouri:${url}/IM-0001-0001.dcm`];
    const chestImageIds = new Array();
    for (let i = 1; i < 37; i++) {
        chestImageIds.push(
            `wadouri:${url}/${i}.dcm`
        );
    }

    const chestStack = {
        currentImageIdIndex: 0,
        imageIds: chestImageIds,
    };

    const topgramStack = {
        currentImageIdIndex: 0,
        imageIds: imageIds,
    };
    
    cornerstoneTools.addTool(cornerstoneTools.StackScrollTool);
    cornerstoneTools.addTool(cornerstoneTools.StackScrollMouseWheelTool);
    cornerstoneTools.setToolActive('StackScroll', {
        mouseButtonMask: 1
    });
    cornerstoneTools.setToolActive('StackScrollMouseWheel', {});
    
    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);
        });
    }
</script>

ReferenceLinesTool

引用线

    const toolName = "ReferenceLines";
    load();

    function load() {
        function addReferenceLinesTool() {
            const synchronizer = new cornerstoneTools.Synchronizer("cornerstonenewimage", cornerstoneTools
                .updateImageSynchronizer);
            synchronizer.add(els[0]);
            synchronizer.add(els[1]);

            cornerstoneTools.addTool(cornerstoneTools[toolName + "Tool"]);
            cornerstoneTools.setToolEnabled(toolName, {
                synchronizationContext: synchronizer
            });
        }

        function handleImageRendered(e) {
            e.detail.element.removeEventListener('cornerstoneimagerendered', handleImageRendered)

            numImagesLoaded++;
            if (numImagesLoaded === 2) {
                addReferenceLinesTool();
            }
        }
        els[0].addEventListener("cornerstoneimagerendered", handleImageRendered);
        els[1].addEventListener("cornerstoneimagerendered", handleImageRendered);
    }
    loadSeries(imageIds, els[0], topgramStack);
    loadSeries(chestImageIds, els[1], chestStack);

wwwcSynchronizer

色差同步器（改变窗位窗宽）

    const toolName = "Wwwc";
    const synchronizer = new cornerstoneTools.Synchronizer(
        'cornerstoneimagerendered',
        cornerstoneTools.wwwcSynchronizer
    );
    
    synchronizer.add(els[0]);
    synchronizer.add(els[1]);
    
    let first = loadSeries(imageIds, els[0], topgramStack);
    let second = loadSeries(chestImageIds, els[1], chestStack);
    
    Promise.all([first,second]).then(res=>{
        synchronizer.enable = true;
        const tool = cornerstoneTools[toolName + "Tool"];
        els.forEach(el => {
            cornerstoneTools.addTool(tool);
            cornerstoneTools.setToolActive(toolName, {
                mouseButtonMask: 1,
                synchronizationContext: synchronizer,
            });
        });
    });

stackImagePositionSynchronizer

图像位置同步器

    const toolName = "Crosshairs";
    topgramStack.imageIds = chestImageIds;
    load();
    function load() {
        function addTool() {
            const synchronizer = new cornerstoneTools.Synchronizer("cornerstonenewimage", cornerstoneTools
                .stackImagePositionSynchronizer);
            synchronizer.add(els[0]);
            synchronizer.add(els[1]);
        }

        function handleImageRendered(e) {
            e.detail.element.removeEventListener('cornerstoneimagerendered', handleImageRendered)

            numImagesLoaded++;
            if (numImagesLoaded === 2) {
                addTool();
            }
        }
        els[0].addEventListener("cornerstoneimagerendered", handleImageRendered);
        els[1].addEventListener("cornerstoneimagerendered", handleImageRendered);
    }
    
    loadSeries(chestImageIds, els[0], topgramStack);
    loadSeries(chestImageIds, els[1], chestStack);

基本也就这些了。