cornerstoneTools 作用，用法，api使用心得

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