一、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. ❤空植发队 影评网站FilmReviewWeb-团队介绍

    空植发队 团队展示&选题 团队展示 团队信息 ​ 队名: 空植发队 ​ 队员: 罗泉水(队长)3118005101 麦狄龙 3118005103 马志鹏 3118005102 陈鸿畅 3118 ...

  2. jxl导出excel小demo

    1.首先在pom文件加入jar包 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <art ...

  3. AtCoder Regular Contest 109

    Contest Link 为什么还没有 Official Editorial 啊--哦,原来是日文题解,那没事了. A - Hands 有两幢 100 层的楼房 \(A,B\) ,将地面所在的楼层称为 ...

  4. GYM100526I Interesting Integers

    题目大意 定义一种 \(Gabonacci\) 数列: \[\begin{array}{c} G_1=a\\ G_2=b\\ G_i=G_{i-1}+G_{i-2} \end{array} \] 给定 ...

  5. 深入理解Java虚拟机(三)——垃圾回收策略

    所谓垃圾收集器的作用就是回收内存空间中不需要了的内容,需要解决的问题是回收哪些数据,什么时候回收,怎么回收. Java虚拟机的内存分为五个部分:程序计数器.虚拟机栈.本地方法栈.堆和方法区. 其中程序 ...

  6. Java为什么称为动态编译？

    Java在程序运行时产生Java类并编译成.class文件.

  7. 五、Zookeeper基于API操作Node节点

    安装zookeeper :linux下安装Zookeeper 3.4.14 zookeeper 分为5个包: org.apache.zookeeper //客户端主要类文件 org.apache.zo ...

  8. STL——容器（List）List 的概念

    1. List 容器的基本概念 1. list 是一个双向链表容器,可高效的进行插入删除元素,他的原理在于每个元素都有两个指针来记录前后两个元素的地址,像火车车厢一样,list 中各个元素在物理存储单 ...

  9. 06 python开发之函数

    06 python开发之函数 目录 06 python开发之函数 6 函数 6.1 基本使用 6.1.1 基本概念 6.1.2 定义函数 6.2 调用函数与函数返回值 6.2.1 调用函数三种形式 6 ...

  10. 容器编排系统之Kubernetes基础入门

    一.kubernetes简介 1.什么是kubernetes?它是干什么用的? kubernetes是google公司用go语言开发的一套容器编排系统,简称k8s:它主要用于容器编排:所谓容器编排简单 ...