一、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. 第14.8节 Python中使用BeautifulSoup加载HTML报文

    一. 引言 BeautifulSoup是一个三方模块bs4中提供的进行HTML解析的类,可以认为是一个HTML解析工具箱,对HTML报文中的标签具有比较好的容错识别功能.阅读本节需要了解html相关的 ...

  2. PyQt学习随笔：Qt事件QEvent.type类型常量及其含义资料汇总详细内容速查

    下表是Qt5.11提供的所有已经定义的事件类型常量及其含义说明(其中标蓝色的是老猿认为价值比较大的事件),事件的事件类型通过QEvent.type()来获取.由于老猿没有找到直接粘贴Excel表格的方 ...

  3. .net core 注入的几种方式

    一.注册的几种类型: services.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();//单利模式,整个应用程序 ...

  4. Docker安装rocketmq踩坑指南

    Docker 网络 Docker容器运行的时候有host.bridge.none三种网络可供配置. 默认是bridge,即桥接网络,以桥接模式连接到宿主机:host是宿主网络,即与宿主机共用网络:no ...

  5. window+nginx+php

    今天在Windows上配置了下nginx,看了不少其他大牛们记录的博客,自己也操作了一番,记录一下备忘. nginx download: http://nginx.org/en/download.ht ...

  6. 服务启动Apache服务，错误Parent: child process exited with status 3 -- Aborting.解决

    不能启动apache,或者使用wamp等集成包后,唯独apache服务启动后有停止,但是把东西搬到其他机器上却没事问题可能和网络有关,我查了很多资料首先找打apache的错误报告日志,发现现实诸多的调 ...

  7. sql注入之双查询注入

    双查询注入前需要了解什么是子查询 子查询可以理解在一个select语句中再插入一个select 里面的select语句就是子查询 例子:select concat((select database() ...

  8. Qingcloud_MySQL Plus(Xenon) 高可用搭建实验

    实验:Xenon on 5.7.30 Xenon (MySQL Plus) 是青云Qingcloud的一个开源项目,号称金融级别强一致性的高可用解决方案,项目地址为 https://github.co ...

  9. md5 的基本使用

    import hashlib def make_password(password): md5=hashlib.md5() # 实例化 md5.update(password.encode(encod ...

  10. 简洁404页面源码 | 自适应404页面HTML好看的404源码下载

    description:源码 源码下载 源码网 源码自适应 源码图片 页面源码 页面源码下载 错误页源码 php源码 html源码 动漫 源码 演示图如下: HTML代码片段: 1 <!DOCT ...