基于cornerstone.js的cornerstoneWADOImageLoader

上一篇简单介绍了cornerstone.js的相关使用介绍和基于cornerstone的web库cornerstoneWADOImageLoader，在实际开发中遇到了相关的一些问题，在这里说明一下，也是防止以后再次遇到相似的问题，以便查看。

对于一些外部库，我们不了解实现的每一个细节，所以说就有可能遇到各种各样的坑，通过使用cornerstoneWADOImageLoader库文件，我从中通过爬"坑"体会到了一个道理：尽量不要依赖库自带变量。见代码：

  /*
 假设需要获取cornerstoneWADOImageLoader中imagepath的值
 在自己的程序中可能多次需要调用这个path值
 */

/*第一种可能bug的写法*/

var path1=cornerstoneWADOImageLoader.imagepath;
...
var path2=cornerstoneWADOImageLoader.imagepath;
...

这种写法出现bug的次数比较多，不一定每次都有bug，因为可能跟调用的变量上下文环境有关，a变量调用没有什么限制条件，b变量也许会有一些上下文限制条件(当然这种情况很少，
但是遇到过bug),或一些其他的限制条件。

/*避免bug的写法很简单*/
var path=cornerstoneWADOImageLoader.imagepath;//定义全局
..
var path1=path;
..
var path2=path;
..
自定义变量接收cornerstoneWADOImageLoader的变量，这样不仅可以避免bug，也可以优化一些性能。我在项目中多次遇到这个bug，第一种写法的时候，明明上边某一行代码调用变量成功了，在下文
在使用这个变量的时候偶尔就会出现无法获取变量的提示。

• 坐标转换

实际需求，不仅仅是显示Dicom图像，还需要在画布上做一些操作

缩放平移选取：

上图左边是原始图片，中间是缩放平以后的图片，右是缩放平移后选取的图片(这是一张肺部ct图，图中红色的圈是对结节的手动标注)

坐标转换的问题来了：第三张图中，红色圆圈的实现方式很简单，就是在canvas上绘制红色的点，然后连起来，简单的一个画笔功能。那么问题是，当图像缩放平移后，如何得知画笔相对于图像的坐标？

设么意思呢？:请理解第三张图,假设图中红色的点坐标是(160,320),---图中红圈是由n个点组成的，我们假设他一个点的坐标，只要求出一个点的坐标转换方法，其他的也一样。那么无论图片怎么动，这个点的坐标都是(160,320),他是相当Canvas的坐标，(点是绘制在canvas上，图片也是绘制在canvas上，无论图片怎么移动，点是不会动的。)那么当用户在放大平移这张图片以后，找到了一个病变的地方，圈出来，那么现在想要获取这个红圈在原图上的位置，就要进行坐标转换。如果不理解换一种思路，在你的电脑上查看一张图片或者照片，现在拖动照片窗口的位置，然后放大照片或缩小照片，现在拿左手手指点住显示屏，点中你要关注的点，不要拿开，右手使用鼠标把敞口和图片还原到原来的位置大小，那么你现在的手指还在你点中的位置上么？这就是坐标转换，我们的需求是医生在查看Dicom图像，手动标注图像的可疑位置，然后我们还原红圈通过算法检测医生标注的是否正确，这就是坐标转换的初衷

直接给出公式：(pos.x-(imgX+(cv1.width/2-img.width*scale/2)))/scale；

@2017.12.21备注

当初写这章博客的时候，画布的尺寸设计了原始尺寸512*512,所以在坐标转换的问题上没有那么多可能出现的问题，新版本改进后，画布的尺寸是自适应屏幕的，然后今天在写的过程中直接套用了公式，把img.width也设置了画布的尺寸，最后有进行了一个（scale_n=512/cv.width）的缩放调整，结果各种bug。写在这里强调一下，也是为了以后看的时候长有个参考：cv1.width不用说就是当前画布的尺寸，img.width是原始图片的宽度。按照公式套不用再做任何转换直接是正确结果。

pos.x是点的x坐标，imgX是鼠标x方向移动量，cv1是画布，img是图片，scale缩放比例，公式给出了x的转换，对于y的转换直接改成对应y值即可，然后width要改成height，这样就可以通过鼠标点击的点，转换到原图上对应的点，说了这么多，不是主题。。。。。只是正好介绍一下坐标转换，公式可以用于其他任何相关操作的开发项目。

要说的主题是：cornerstone的viewpoint的viewport.translation属性，我们在自定义画布上，可以获取到鼠标移动量，在使用cornerstoneWADOImageLoader这个库，它只需要你提供一个div，它自动会在这个div上创建canvas(目前都是512的)然后绘制，所以说你根本无法获取到canvas的属性,但是他提供了api，可以直接使用，但是有坑。

看代码：

  else   if(3 == e.which)
            {    //判断是否为右键
               console.log(3);
               lastX = e.clientX;
               lastY = e.clientY;
            $(document).mousemove(function (e) {
                deltaX = e.clientX - lastX,
                deltaY = e.clientY - lastY;
                lastX = e.clientX;
                lastY = e.clientY;

                viewport = cornerstone.getViewport(element);
                viewport.translation.x += (deltaX / viewport.scale);
                viewport.translation.y += (deltaY / viewport.scale);
                // viewport.translation.x += deltaX ;
                viewportX=viewport.translation.x;

                // viewport.translation.y += deltaY ;
                viewportY=viewport.translation.y;
                console.log(viewportX);
                console.log(viewportY);
                cornerstone.setViewport(element, viewport);
            });

　　当鼠标右键点击时，默认对图片操作平移功能。

注意这个变量 viewport.translation.x,这就是他提供的默认的图像移动属性，通过+=鼠标移动量，从而对让图像平移，注意代码注释的部分，最开始我的实现方式是:

// viewport.translation.x += deltaX,这才是真正正确的操作方法

平时在canvas移动图像的步骤是:1.获取鼠标移动量  2.计算图片的起始位置+鼠标移动 3.清空画布，然后根据2算出的位置重新绘制drawimage(),现在这个库给出了translation的属性，无需上述复杂操作(也操作不了，无法获取画布)，直接赋值。但是按照常规的算法// viewport.translation.x += deltaX，图片完全可以移动，没有问题，鼠标和图片的相对位置可就不一样了：

截图的时候截不到鼠标图标，我就根据位置自己画了一个，红色的箭头(两次我都是点在图片上，然后进行平移)

左图是使用viewport.translation.x += (deltaX / viewport.scale)，可以看到鼠标的位置还是在图片上，相对位置并没有改变。

右图是使用viewport.translation.x += deltaX，鼠标我开始也是点在图片上向右拖动的，但是图片向右移动量大于鼠标移动量，造成了图中的现象，图片走的多了。此时，图片的移动量，根本就不是鼠标的移动量，坐标转换种的imgX鼠标移动量对应的不是图片移动的距离，先跨一步，然后回来说这个移动量的问题--@1。

通过使用 viewport.translation.x += (deltaX / viewport.scale)，那么对应的坐标转换公式：

(pos.x-(viewportX*viewport_Scale+(cv1.width/2-img.width*viewport_Scale/2)))/viewport_Scale

公式中viewportX=viewport.translation.x，我自定义了变量赋值，就是上文提到的，我在这里直接使用viewport.translation.x，就报错了，无法获取，然后我用其他变量接受了一下。这不是重点

viewportX*viewport_Scale这个才是重点

上文中，/scale,下面公式又*scale，不是没有改变吗？

因为，原公式是没有*scale的 ，转换公式这里只是imgX

解释：公式的大体思路是：鼠标拖动图片向右移动了50px，那么我在此时标注红圈，那么如果要获取红圈相对于原图的位置，我的红圈要向左-50px，才对，对的就是这个思路，但是，这里鼠标的移动量等于图片的移动量，这也就是@1的问题所在，对于它的api，没有/scale的话，鼠标移动的距离根本不是图片移动的距离，小于图片移动的距离(多少取决于scale)，也就是鼠标向右移动了50px，实际图片移动了60px，那么你在用红圈的点-50px，得到的并不是实际相对于图片的位置

以上种种也就是/scale的原因，至于为什么/scale，而不是/scale*2,而不是/scale*3？这要看它的translation的api是怎么定义的，我是在他官方的例子中找到的答案，所以在这里/scale,在下文在乘以scale,确保公式的定义的鼠标移动量。

先保证图片和鼠标同步移动，然后再使用公式。

说了好多，写的1个多小时，我发现写随笔，可以一边写一边梳理当时的思路。

还有一点：使用时需要配置这两个脚本路径，如下。谷歌翻译，大概懂意思就行

---

Web工作者框架需要一些配置，因为Web工作者需要源文件的路径。由于基石并不执行源文件位置的约定，您必须告诉基础Web工作者框架，其中web worker文件是可以正确加载的。这是通过cornerstoneWADOImageLoader.webWorkerManager.initialize（）函数完成的。您必须先调用此函数，然后才能启动Web工作任务（或使用基石加载映像），以使Web工作者代码正确加载。

最小配置

以下是最小配置对象的示例。

   var config = {
        webWorkerPath ： ' ../../ dist / cornerstoneWADOImageLoaderWebWorker.js '，
        taskConfiguration ： {
             ' decodeTask ' ： {
                codecsPath ： ' ../ dist / cornerstoneWADOImageLoaderCodecs.js '
            }
        }
    };
    cornerstoneWADOImageLoader。webWorkerManager。initialize（config）;

在上面的示例中，您将看到两个路径，一个到cornerstoneWADOImageLoaderWebWorker.js，一个到cornerstoneWADOImageLoaderCodecs.js文件。这两个文件都可以在该存储库的dist文件夹中找到。您必须在您的Web服务器上托管这两个文件，并提供一个路径。