一、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. 一种使用 Redis 深度驱动的，为构建轻量级分布式应用程序（Microservices）的工程方案

    Hydra 是一个轻量级的 NodeJS 库,用于构建分布式计算应用程序,比如微服务.我们对轻量级的定义是:轻处理外部复杂性和基础设施依赖 -- 而不是有限的轻处理. Hydra 声称对基础设施的依赖 ...

  2. 【APIO2020】交换城市（Kruskal重构树）

    Description 给定一个 \(n\) 个点,\(m\) 条边的无向连通图,边带权. \(q\) 次询问,每次询问两个点 \(x, y\),求两点间的次小瓶颈路.不存在输出 -1. Hint \ ...

  3. 题解-[HNOI2016]序列

    题解-[HNOI2016]序列 [HNOI2016]序列 给定 \(n\) 和 \(m\) 以及序列 \(a\{n\}\).有 \(m\) 次询问,每次给定区间 \([l,r]\in[1,n]\),求 ...

  4. 本文帮你在 Unix 下玩转 C 语言

    shell是一种特殊的应用程序(命令行解释器),他为运行其他应用程序提供了一个接口. posix规范了操作系统是什么样 每个进程都有一个工作目录(又叫当前目录),相对路径都是从工作目录开始解释. Ct ...

  5. nginx配置访问本地资源

    参考博客:https://www.cnblogs.com/xy51/p/9973326.html 需要访问路径:http://IP:10013/p1upgrade/picfiles/image73b4 ...

  6. Hive基础语法5分钟速览

    Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行. 其优点是学习成本低,可以通过 ...

  7. SSO的通用标准OpenID Connect

    目录 简介 OpenID Connect是什么 ID Token 请求ID Token ID Token可以做什么 Open Connect认证码授权的例子 User Info 简介 OpenID C ...

  8. 啊！Java虚方法

     什么是Java的虚方法呢,我们首先看看什么是虚函数 虚函数 百度百科的解释为: 在某基类中声明为 virtual 并在一个或多个派生类中被重新定义的[成员函数],用法格式为:virtual 函数返回 ...

  9. 5. 穿过拥挤的人潮，Spring已为你制作好高级赛道

    目录 ✍前言 版本约定 ✍正文 默认转换器注册情况 StreamConverter 代码示例 使用场景 兜底转换器 ObjectToObjectConverter part1:快速返回流程 part2 ...

  10. 卡尔曼滤波学习笔记1-Matlab模拟温度例子--代码比较乱，还需优化

    温度模拟参数选取 xk 系统状态 实际温度 A 系统矩阵 温度不变,为1 B.uk 状态的控制量 无控制量,为0 Zk 观测值 温度计读数 H 观测矩阵 直接读出,为1 wk 过程噪声 温度变化偏差, ...