一、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. 第12.5节 Python time模块导览

    一.时间相关的概念 time模块模块提供了各种时间相关的函数,在介绍时间相关功能前,先介绍一些术语和惯例: epoch 是时间开始的点,并且取决于平台.对于Unix, epoch 是1970年1月1日 ...

  2. PyQt(Python+Qt)学习随笔：Qt Designer中部件与国际化有关的设置translatable、 disambiguation和comment含义

    在Qt Designer的部件的多个属性中,如toolTip.whatsThis.accessibleName.accessibleDescription.text等都有国际化属性设置,国际化属性有三 ...

  3. PyQt(Python+Qt)学习随笔：desktop的宽带、高度widthMM、heightMM

    通过desktop获取桌面的高度和宽度,代码如下: desktop = app.desktop() srceenSize = desktop.width(),desktop.height() srce ...

  4. centos7最小安装后——网络配置、常见命令安装，远程连接、yum源安装软件包

    安装环境 #软件:vmware 14 #centos版本:CentOS-7-x86_64-DVD-1810 下载地址: #网络配置:NAT模式 配置 网络配置 #动态获取ip: centos7最小安装 ...

  5. 转：minhash

    Minhash算法及其应用 一.引言 MinHash算法属于Locality Sensitive Hashing,用于快速估计两个集合的相似度.最早由Broder Andrei Z. 在1997年提出 ...

  6. 三、java多线程核心技术（笔记）——线程的优先级

    概论: 在操作系统中,线程可以划分优先级,优先级高的获得的CPU资源较多,也就是CPU优先执行优先级较高的线程.在JAVA中线程的优先级 分1~~10个10个等级.大于或者小于会报异常. 一.线程优先 ...

  7. mysql 8.0 改变数据目录和日志目录（二）

    一.背景 原数据库数据目录:/data/mysql3306/data,日志文件目录:/data/mysql3306/binlog 变更后数据库目录:/mysqldata/3306/data,日志文件目 ...

  8. Windows 必备——cmder 一款比cmd牛逼的Win软件

    Windows 必备--cmder 一款比cmd牛逼的Win软件一款Windows环境下的命令行替换工具:cmder这款工具简洁美观易用,支持大部分的linux命令,支持ssh连接Linux,比起自带 ...

  9. 【Electron Playground 系列】文件下载篇

    作者:long.woo 文件下载是我们开发中比较常见的业务需求,比如:导出 excel. web 应用文件下载存在一些局限性,通常是让后端将响应的头信息改成 Content-Disposition: ...

  10. springmvc表单标签库的使用

    springmvc中可以使用表单标签库,支持数据绑定,用来将用户输入绑定到领域模型. 例子来源<Servlet.JSP和SpringMVC学习指南> 项目代码 关键代码及说明 bean对象 ...