cornerstoneTool.js使用记录三

小小白deny
2,373 阅读3分钟

Annotation

这是用来绘制一些辅助工具、测试、备注等。cornerstoneTools.addTool第二个参数是可有可无的，要配置初始化个性时可使用。

html

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

js

<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>

AngleTool

角度线

let AngleTool = cornerstoneTools.AngleTool;
cornerstoneTools.addTool(AngleTool, {
    configuration: {
        drawHandles: false, //是否开启圆点，以及圆点移动轨迹, 当为false时，drawHandlesOnHover和hideHandlesIfMoving无效
        drawHandlesOnHover: false, //是否隐藏圆点
        hideHandlesIfMoving: false, //是否隐藏圆点移动轨迹
        renderDashed: false //是否渲染实线或虚线
    }
});
cornerstoneTools.setToolActive("Angle", {
    mouseButtonMask: 1
});

ArrowAnnotateTool

箭头

let ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
cornerstoneTools.addTool(ArrowAnnotateTool, {
    configuration: {
        getTextCallback: function(cb, eventData) { // cb 回调函数     eventData   事件 e.detail数据
            cb(prompt("请输入值"));
        },
        changeTextCallback: function(data, eventData, cb) {
            /**
             * data   toolState.data
             * eventData  e.detail
             * cb  回调函数
             */
            cb(prompt("正在改变值"));
        },
        drawHandlesOnHover: false, //是否显示圆点
        hideHandlesIfMoving: false, //是否显示圆点轨迹
        arrowFirst: true, //箭头的方向显示
        renderDashed: false, //是否是虚线显示
        allowEmptyLabel: false, // 是否可以输入空值, 若为空则不渲染
        drawHandles: true, //不显示圆点也不显示圆点移动轨迹
    }
});
cornerstoneTools.setToolActive("ArrowAnnotate", {
    mouseButtonMask: 1
});

BidirectionalTool

双向测量工具

let BidirectionalTool = cornerstoneTools.BidirectionalTool;
cornerstoneTools.addTool(BidirectionalTool, {
    configuration: {
        getMeasurementLocationCallback: function(measurementData, eventData, doneCallback) { //获取测量位置回调
            return doneCallback();
        },
        changeMeasurementLocationCallback: function(measurementData, eventData, doneCallback) { //改变测量位置回调
            return doneCallback();
        },
        textBox: "123", //这里会挂载一个对象，具体用来干啥，暂时不了解
        shadow: "", //如果有值得话会有一个黑色的阴影，暂时改不了,
        drawHandles: true, //是否显示圆点和移动轨迹
        drawHandlesOnHover: false, //是否显示圆点
        hideHandlesIfMoving: false, //是否显示圆点移动轨迹
        renderDashed: false, //是否虚线渲染
        additionalData: [], //暂时没有使用
    }
});
cornerstoneTools.setToolActive("Bidirectional", {
    mouseButtonMask: 1
});

CobbAngleTool

圆角工具

let CobbAngleTool = cornerstoneTools.CobbAngleTool;
cornerstoneTools.addTool(CobbAngleTool, {
    configuration: {
        drawHandles: true, //是否显示圆点和轨迹
        drawHandlesOnHover: false, //是否显示圆点
        hideHandlesIfMoving: false, //是否显示圆点轨迹
        renderDashed: false, //实现虚线渲染
    }
});
cornerstoneTools.setToolActive("CobbAngle", {
    mouseButtonMask: 1
});

EllipticalRoiTool

椭圆图形

let EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;
cornerstoneTools.addTool(EllipticalRoiTool, {
    configuration: {
        drawHandlesOnHover: false, //是否显示圆点
        hideHandlesIfMoving: false, //是否显示圆点移动轨迹
        renderDashed: false, //是否虚线渲染
    }
});
cornerstoneTools.setToolActive("EllipticalRoi", {
    mouseButtonMask: 1
});

FreehandRoiTool

手绘图形

let FreehandRoiTool = cornerstoneTools.FreehandRoiTool;
cornerstoneTools.addTool(FreehandRoiTool, {
    configuration: {
        mouseLocation: {
            handles: {
                start: {
                    highlight: true,
                    active: true
                }
            }
        },
        spacing: 1,
        activeHandleRadius: 2, //圆的半径大小
        completeHandleRadius: 4, //重合时圆的大小
        completeHandleRadiusTouch: 2,
        alwaysShowHandles: true, //是否一直显示圆点
        invalidColor: '#38f', //无效的颜色
        currentHandle: 0,
        currentTool: -1,
        drawHandles: true, //不显示圆点，移动轨迹
        renderDashed: false, //是否虚线渲染
    }
});
cornerstoneTools.setToolActive("FreehandRoi", {
    mouseButtonMask: 1
});

LengthTool

直线图形

let LengthTool = cornerstoneTools.LengthTool;
cornerstoneTools.addTool(LengthTool, {
    configuration: {
        drawHandles: true, //是否显示圆点，移动轨迹
        drawHandlesOnHover: false, //是否显示圆点
        hideHandlesIfMoving: false, //是否显示圆点移动轨迹
        renderDashed: false, //是否虚线渲染
    }
});
cornerstoneTools.setToolActive("Length", {
    mouseButtonMask: 1
});

ProbeTool

探针(PS：会根据DICOM文件切换文字，第一种是RGB范围值，第二种 Hu值(MO就是Hu值)),这个API和DragProbeTool差不多

let ProbeTool = cornerstoneTools.ProbeTool;
cornerstoneTools.addTool(ProbeTool, {
    configuration: {
        drawHandles: true, //是否显示圆点
        renderDashed: false, //虚线渲染
    }
});
cornerstoneTools.setToolActive("Probe", {
    mouseButtonMask: 1,
});

RectangleRoiTool

矩形

let RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
cornerstoneTools.addTool(RectangleRoiTool, {
    configuration: {
        drawHandles: true, //是否显示圆点和移动轨迹
        drawHandlesOnHover: false, //是否显示圆点
        hideHandlesIfMoving: false, //是否显示圆点移动轨迹
        renderDashed: false, //是否虚线显示
    }
});
cornerstoneTools.setToolActive("RectangleRoi", {
    mouseButtonMask: 1
});

TextMarkerTool

标注,markers和current是必须，若没有是不起效果，current是标记markers里第几个开始

let TextMarkerTool = cornerstoneTools.TextMarkerTool;
cornerstoneTools.addTool(TextMarkerTool, {
    configuration: {
        markers: ["F5", "F4", "F3", "F2", "F1"], //标记数组
        current: 'F3', //要对应markers
        loop: true, //是否循环
        ascending: false, //true 降序 false 升序
        changeTextCallback: function(data, eventData, doneChangingTextCallback) {
            data.visible = true; //是否可见, 默认true
            data.color = "#38f"; //文字颜色
            data.text = "内容"; //修改内容  这里修改了也没有，因为默认使用第二个参数
            doneChangingTextCallback(data, prompt('改变标注:'));
        }
    }
});
cornerstoneTools.setToolActive("TextMarker", {
    mouseButtonMask: 1
});
基本也就这些了。
avatar
文章
阅读
粉丝