一、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="width: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>