一、cornerstoneTools的用途
1、作用可以响应一些事件，例如鼠标按下的事件，鼠标滚轮的事件或按键或触摸事件
2、可以对视口进行缩放平移
3、可以在图像上绘制图形
4、可以在图像上绘制文本
二、外部依赖库
1、jquery
2、cornerstone
3、hammer
三、api
1、addToolState(element, toolType, data) element当前元素，toolType唯一标识，data元素总集，把所有元素绑定到tools工具中，element为当前挂载元素，主要功能影响切换下一张，不能切换下一张，下一张图片tools工具自然就不能对他操作，我的理解是这个api的意思是把所有元素都挂载tools工具。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link href="./css/bootstrap.min.css" rel="stylesheet"> <link href="./css/cornerstone.min.css" rel="stylesheet"> <style> body{width: 100%;height: 100%;margin: 0;padding: 0;max-width: 750px;} .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;} </style> </head> <body> <div class="container"> <div id="dicomImagebox"> <div class="dicomImage" id="dicomImage0" style="100%;height:100%;top:0px;left:0px; position:absolute"> </div> </div> </div> </body> <script src="./js/jquery.min.js"></script> <!-- 引入 cornerstone 库 --> <script src="./js/cornerstone.min.js"></script> <script src="./js/dicomParser.min.js"></script> <script src="../ImageLoader/cornerstoneWADOImageLoader.js"></script> <script src="js/cornerstoneMath.min.js"></script> <script src="js/hammer.js"></script> <script src="js/cornerstoneTools.min.js"></script> <script> cornerstoneTools.external.Hammer = Hammer; cornerstoneTools.external.cornerstone = cornerstone; cornerstoneTools.external.cornerstoneMath = cornerstoneMath; cornerstoneWADOImageLoader.external.cornerstoneMath = cornerstoneMath; //指定要注册加载程序的基石实例 cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstone.registerImageLoader("http", cornerstoneWADOImageLoader.loadImage); cornerstone.registerImageLoader("https", cornerstoneWADOImageLoader.loadImage); var config = { webWorkerPath: "../ImageLoader/cornerstoneWADOImageLoaderWebWorker.js", taskConfiguration: { decodeTask: { codecsPath: "../ImageLoader/cornerstoneWADOImageLoaderCodecs.js" } } }; cornerstoneWADOImageLoader.webWorkerManager.initialize(config); var baseUrl=""; var exampleStudyImageIds=""; var isInitLoad=true; var isShow=true; window.onload=function show(){ if (isShow === true) { isShow = false; var arr=["MR000000.dcm","MR000001.dcm"]; baseUrl = "http://localhost/testDICOM/CTStudy/"; exampleStudyImageIds = arr; // 找到要渲染的元素 var canvas = document.getElementById("dicomImage0"); canvas.width=document.documentElement.clientWidth; canvas.height=document.documentElement.clientHeight; // 在 DOM 中将 canvas 元素注册到 cornerstone cornerstone.enable(canvas); // 拼接 url : cornerstoneWADOImageLoader 需要 wadouri 路径头 var imageUrl = baseUrl + exampleStudyImageIds[0]; var imageId = "wadouri:" + imageUrl; // Load & Display cornerstone.loadAndCacheImage(imageId).then( function(image) { // 设置元素视口 var viewport = cornerstone.getDefaultViewportForImage(canvas, image); // 显示图像 var datacorne=cornerstone.displayImage(canvas, image, viewport); // 激活工具 initCanvasTools(); } ); }else{ isShow = true; } } function initCanvasTools(){ var canvas = document.getElementById("dicomImage0"); console.log(canvas) isInitLoad = false; // 为 canvasStack 找到 imageIds var allImageIds = []; console.log(allImageIds) $.each(exampleStudyImageIds,function(k,v) { let imageUrl = "wadouri:" + baseUrl + v; allImageIds.push(imageUrl); }); console.log(allImageIds) // Create canvasStack var canvasStack = { currentImageIdIndex: 0, imageIds: allImageIds }; // Enable Inputs cornerstoneTools.mouseInput.enable(canvas);//鼠标按下事件 cornerstoneTools.mouseWheelInput.enable(canvas);//鼠标滚轮事件 cornerstoneTools.touchInput.enable(canvas);//手势事件 // Set the stack as tool state cornerstoneTools.addStackStateManager(canvas, ["stack"]); cornerstoneTools.addToolState(canvas, "stack", canvasStack);//将工具状态添加到toolStateManager，这由工具以及恢复已保存状态的模块完成。addToolState(element, toolType, measurementData) cornerstoneTools.stackScrollWheel.activate(canvas); // Mouse wheel // cornerstoneTools.scrollIndicator.enable(canvas); // Position indicator // Mouse cornerstoneTools.wwwc.activate(canvas, 1); // left click cornerstoneTools.pan.activate(canvas, 2); // middle click cornerstoneTools.zoom.activate(canvas, 4); // right click // Touch / Gesture cornerstoneTools.wwwcTouchDrag.activate(canvas); // - Drag cornerstoneTools.zoomTouchPinch.activate(canvas); // - Pinch cornerstoneTools.panMultiTouch.activate(canvas); // - Multi (x2) // cornerstoneTools.zoomWheel.activate(canvas); } </script> </html>