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

cornerstoneTools 作用，用法，api使用心得的更多相关文章

  1. c++用法的学习心得

    关于C++这门课,是我在大一的时候开始学习的,那时候接触的就是单纯的一些C++的基本语法规则,基本的编程规则.但是我们都有这样的困惑:课堂和教材的 内容基本上都能接受和理解,但真要实际动手编写程序又感 ...

  2. asp.net mvc短信接口调用——阿里大于API开发心得

    互联网上有许多公司提供短信接口服务,诸如网易云信.阿里大于等等.我在自己项目里需要使用到短信服务起到通知作用,实际开发周期三天,完成配置.开发和使用,总的说,阿里大于提供的接口易于开发,非常的方便,短 ...

  3. 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...

  4. 关于C++用法的学习心得

    通过大一一学期对C++语言的学习,我感觉c++是一门有一定难度并且很有挑战性的科目,在c++学习过程中,我们懂得了其有很多的用法. 引用是C++引入的新语言特性,是C++常用的一个重要内容之一,正确. ...

  5. Object,String,StringBuffer,StringBuilder,System,Runtime,Date,Math介绍及用法(API)

    1       Object对象 面向对象的核心思想:“找合适的对象,做适合的事情”. 合适的对象: 自己描述类,自己创建对象. sun已经描述了好多常用的类,可以使用这些类创建对象. API(App ...

  6. Android Camera Api的心得

    (一) 前言最近看Camera的api,觉得写的真的不错.现在翻译过来,给大家分享分享,译文可能不太好,大家将就着看哈. (二) 正文1. CameraCamera是Android framework ...

  7. 乐卡上海网点地图制作心得 | 百度地图API使用心得

    前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...

  8. odoo 装饰器用法@api

    摘自:blog.csdn.net/cmzhuang/article/details/52932883 @api.one one装饰符自动遍历记录集,把self重新定义成当前记录.注意,返回值是一个li ...

  9. 百度OCR文字识别API使用心得===com.baidu.ocr.sdk.exception.SDKError[283604]

    异常com.baidu.ocr.sdk.exception.SDKError[283604]App identifier unmatch.错误的packname或bundleId.logId::303 ...

随机推荐

  1. Intellij IDEA新导入项目运行出现Error:(60, 47) java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符)

    后台窗口报错如下: 问题原因 项目jdk版本配置不正确. 解决方案 ①File ->Project Structure ② ③之后还要检查一下这里 Settings-->Build,Exe ...

  2. Apriori 算法-如何进行关联规则挖掘

    公号:码农充电站pro 主页:https://codeshellme.github.io 在数据分析领域有一个经典的故事,叫做"尿布与啤酒". 据说,在美国西部的一家连锁超市发现, ...

  3. Springboot mini - Solon详解（一）- 快速入门

    一.Springboot min -Solon 最近号称 Springboot mini 的 Solon框架,得空搞了一把,发觉Solon确实好用,小巧而快速.那Solon到底是什么,又是怎么好用呢? ...

  4. 笔记-Cats Transport<已写题解>

    笔记-Cats Transport Cats Transport 令 \(D_i=\sum_{j=1}^id_i\),\(T_i=t_i-D_{h_i}\). 为 \(T_i\) 从小到大排序,令 \ ...

  5. Robot Framework+adb框架自动化测试Android设备案例⑸——L1层测试用例

    一.L1层测试用例 1.初始化.robot *** Settings *** Resource ../L2层关键字.robot *** Test Cases *** 切换EMMC模式 [Tags] A ...

  6. rocketMq指定broker ip地址，适合解决云主机部署问题

      在工作中遇到了一个这个问题,就是我们rocketmq是部署在云主机上的 但是我们的开发同事在自己的电脑连接rocketmq链接不上 报错显示Caused by: org.apache.rocket ...

  7. 使用Tomcat Native提升Tomcat IO效率

    目录 简介 Tomcat的连接方式 APR和Tomcat Native 在tomcat中使用APR 简介 IO有很多种,从最开始的Block IO,到nonblocking IO,再到IO多路复用和异 ...

  8. sqli-labs less1-4(union注入)

    less-1 考点:Single quotes 输入: 判断类型 ?id=1 返回loginname和password.输入的id就是与后台数据库连接的接口通过id=? 查询数据库信息 ?id=1' ...

  9. 前端使用canvas生成盲水印的加密解密

    为了保障信息安全,防止重大信息泄露,并且能够锁定泄露用户,需要对页面展示的图片加入当前用户信息的盲水印,即最终图片外观看起来和原图一样,但是经过解码以后可以识别出水印信息,并且在截图后仍能进行较好的识 ...

  10. [日常摸鱼]bzoj2875[NOI2012]随机数生成器-矩阵快速幂

    好裸的矩阵快速幂-然而我一开始居然构造不出矩阵- 平常两个的情况都是拿相邻两项放在矩阵里拿去递推的-然后我就一直构造不出来-其实把矩阵下面弄成1就好了啊orz #include<cstdio&g ...