一、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工具。

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <link href="./css/bootstrap.min.css" rel="stylesheet">
  6.         <link href="./css/cornerstone.min.css" rel="stylesheet">
  7.         <style>
  8.             body{width: 100%;height: 100%;margin: 0;padding: 0;max-width: 750px;}
  9.             .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <div class="container">
  14.             <div id="dicomImagebox">
  15.                 <div class="dicomImage" id="dicomImage0" style="width:100%;height:100%;top:0px;left:0px; position:absolute">
  16.                 </div>
  17.             </div>
  18.         </div>
  19.     </body>
  20.     <script src="./js/jquery.min.js"></script>
  21.     <!-- 引入 cornerstone 库 -->
  22.     <script src="./js/cornerstone.min.js"></script>
  23.     <script src="./js/dicomParser.min.js"></script>
  24.     <script src="../ImageLoader/cornerstoneWADOImageLoader.js"></script>
  25.     <script src="js/cornerstoneMath.min.js"></script>
  26.     <script src="js/hammer.js"></script>
  27.     <script src="js/cornerstoneTools.min.js"></script>
  28.     <script>
  29.         cornerstoneTools.external.Hammer = Hammer;
  30.         cornerstoneTools.external.cornerstone = cornerstone;
  31.         cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
  32.         cornerstoneWADOImageLoader.external.cornerstoneMath = cornerstoneMath;
  33.         //指定要注册加载程序的基石实例
  34.         cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  35.         cornerstone.registerImageLoader("http", cornerstoneWADOImageLoader.loadImage);
  36.         cornerstone.registerImageLoader("https", cornerstoneWADOImageLoader.loadImage);
  37.         var config = {
  38.           webWorkerPath: "../ImageLoader/cornerstoneWADOImageLoaderWebWorker.js",
  39.           taskConfiguration: {
  40.             decodeTask: {
  41.               codecsPath: "../ImageLoader/cornerstoneWADOImageLoaderCodecs.js"
  42.             }
  43.           }
  44.         };
  45.         cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
  46.       var baseUrl="";
  47.       var exampleStudyImageIds="";
  48.       var isInitLoad=true;
  49.       var isShow=true;
  50.       window.onload=function show(){
  51.       if (isShow === true) {
  52.             isShow = false;
  53.                var arr=["MR000000.dcm","MR000001.dcm"];
  54.             baseUrl = "http://localhost/testDICOM/CTStudy/";
  55.             exampleStudyImageIds = arr;
  56.             // 找到要渲染的元素
  57.             var canvas = document.getElementById("dicomImage0");
  58.             canvas.width=document.documentElement.clientWidth;
  59.             canvas.height=document.documentElement.clientHeight;
  60.             // 在 DOM 中将 canvas 元素注册到 cornerstone
  61.             cornerstone.enable(canvas);
  62.             // 拼接 url : cornerstoneWADOImageLoader 需要 wadouri 路径头
  63.             var imageUrl = baseUrl + exampleStudyImageIds[0];
  64.             var imageId = "wadouri:" + imageUrl;
  65.  
  66.             //  Load & Display
  67.             cornerstone.loadAndCacheImage(imageId).then(
  68.  
  69.               function(image) {
  70.  
  71.                 // 设置元素视口
  72.                 var viewport = cornerstone.getDefaultViewportForImage(canvas, image);
  73.                 // 显示图像
  74.                 var datacorne=cornerstone.displayImage(canvas, image, viewport);
  75.                 // 激活工具
  76.                 initCanvasTools();
  77.               }
  78.             );
  79.  
  80.       }else{
  81.           isShow = true;
  82.       }
  83.       }
  84.      function initCanvasTools(){
  85.       var canvas = document.getElementById("dicomImage0");
  86.       console.log(canvas)
  87.       isInitLoad = false;
  88.       // 为 canvasStack 找到 imageIds
  89.       var allImageIds = [];
  90.       console.log(allImageIds)
  91.       $.each(exampleStudyImageIds,function(k,v) {
  92.         let imageUrl = "wadouri:" + baseUrl + v;
  93.         allImageIds.push(imageUrl);
  94.       });
  95.     console.log(allImageIds)
  96.       // Create canvasStack
  97.       var canvasStack = {
  98.         currentImageIdIndex: 0,
  99.         imageIds: allImageIds
  100.       };
  101.       // Enable Inputs
  102.       cornerstoneTools.mouseInput.enable(canvas);//鼠标按下事件
  103.       cornerstoneTools.mouseWheelInput.enable(canvas);//鼠标滚轮事件
  104.       cornerstoneTools.touchInput.enable(canvas);//手势事件
  105.       // Set the stack as tool state
  106.       cornerstoneTools.addStackStateManager(canvas, ["stack"]);
  107.       cornerstoneTools.addToolState(canvas, "stack", canvasStack);//将工具状态添加到toolStateManager，这由工具以及恢复已保存状态的模块完成。addToolState(element, toolType, measurementData)
  108.       cornerstoneTools.stackScrollWheel.activate(canvas); // Mouse wheel
  109. //    cornerstoneTools.scrollIndicator.enable(canvas); // Position indicator
  110.       // Mouse
  111.       cornerstoneTools.wwwc.activate(canvas, 1); // left click
  112.       cornerstoneTools.pan.activate(canvas, 2); // middle click
  113.       cornerstoneTools.zoom.activate(canvas, 4); // right click
  114.       // Touch / Gesture
  115.          cornerstoneTools.wwwcTouchDrag.activate(canvas); // - Drag
  116.       cornerstoneTools.zoomTouchPinch.activate(canvas); // - Pinch
  117.       cornerstoneTools.panMultiTouch.activate(canvas); // - Multi (x2)
  118. //    cornerstoneTools.zoomWheel.activate(canvas);
  119.     }
  120.     </script>
  121. </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. Flask+MySQL+Redis的Docker配置

    Docker配置了好多天,昨天晚上终于把碎遮项目的Docker打包完成了,后面会继续完善项目代码,把稳定版本打包后推送到DockerHub上. 网上关于Docker配置的文章很多,但大部分都是复制粘贴 ...

  2. 1、pytorch写的第一个Linear模型（原始版，不调用nn.Modules模块）

    参考: https://github.com/Iallen520/lhy_DL_Hw/blob/master/PyTorch_Introduction.ipynb 模拟一个回归模型,y = X * w ...

  3. 百度网盘下载器：SpeedPan2.3.8

    SpeedPan是款百度网盘资源下载工具,下载速度还行(至少比百度网盘快太多了),支持登录百度账号,也支持免登录下载.官网免费版的取消分享了,我从油管上看到了这个软件,分享给大家. 天翼云:https ...

  4. Scrum 冲刺第六天

    一.每日站立式会议 1.会议内容 1)进行每日工作汇报 张博愉: 昨天已完成的工作:学习如何编写用户手册 今日工作计划:编写测试计划 工作中遇到的困难:文档不知如何动手 张润柏: 昨天已完成的工作:完 ...

  5. 剑指offer二刷——数组专题——构建乘积数组

    构建乘积数组 题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A ...

  6. 如何实现OSM地图本地发布并自定义配图

    目录 1.缘起 2.准备环境 2.1.安装linux系统 2.2.安装docker 2.3.安装Docker Compose 2.4.安装git 3.发布地图 3.1.拉取代码 3.2.测试网络 3. ...

  7. NOI2020网上同步赛 游记

    Day1 预计得分:\(32pts\)(我裂开了--) T1 美食家 表示考试的时候想到了关于矩阵快速幂的想法,甚至连分段后怎么处理都想好了,但是没有想到拆点,还有不知道怎么处理重边(这个考虑是多余的 ...

  8. 你必须要知道的HTTP协议原理

    1 基本概念 HTTP协议:基于TCP协议之上实现的无状态.全文本的标准通信协议. 客户端:例如pc浏览器,移动应用端,第三方服务器等能发起http访问的设备. 服务器:能够接受HTTP协议请求,并且 ...

  9. FreeSql.Repository （一）什么是仓储

    欢迎来到<FreeSql.Repository 仓储模式>系列文档,完整文档请前往 wiki 中心:https://github.com/dotnetcore/FreeSql/wiki F ...

  10. php curl的使用心得

    php的curl有很多参数,整理一下其中的常用参数的作用 1.CURLOPT_SSL_VERIFYHOST 设置为 1 是检查服务器SSL证书中是否存在一个公用名(common name).译者注:公 ...