cornerstonejs源码学习笔记（一)

什么是cornerstonejs

Cornerstone是一个开源的致力于提供基于WEB的医学影像处理平台

https://cornerstonejs.org/

Cornerstonejs官网的文档写的很简洁易懂，建议在研究其源码前先把它的文档过一遍，了解基本的设计和概念。

然后按照官网链接 https://docs.cornerstonejs.org/developer-guide.html 开始跑起来

这里我先用它最简单的例子研究其源码的基本结构

启动后，在浏览器里输入 http://localhost:8080/example/index.html

选择最简单的示例

对应的链接为：http://localhost:8080/example/jsminimal/index.html

笔者通过在chrome浏览器的F12调试模式下跟踪跑了大半天，大致明白了其工作的流程，应该说总体的设计还是非常清晰易懂的，下面的流程图是我的整理，和大家分享一下

    步骤如下    

• 调用enable.js的入口函数，其本质是使用requestAnimationFrame机制注册浏览器刷新显示的回调函数
• 调用imageLoader.js的registerImageLoader函数注册某种sheme的image loader,这个实例用example://作为scheme, 具体实现在exampleImageLoader.js, 用本地base64字符串硬编码的图像加载，中间做字符串到灰度数组的转换，返回的是一个image object对象，其中获取图像的函数是一个promise,这样方便在真正要显示时才去调用
• 调用imageloader.js的loadImage()函数，它先从imageCache.js查找是否有缓存，有，则直接到displayImage.js的函数，没有则从已注册的image loaders里查找image loader, 然后调用到exampleImageLoader.js的getExampleImage()函数获取到image object
• 调用displayImage.js入口函数，再调用updateImage.js入口函数，最后调用drawImage.js入口函数，实际drawImage.js只是设置image ojbect和一些标志变量，真正去执行画图是在刚才所说的requestAnimationFrame里由浏览器去调用
• requestAnimationFrame调用注册的回调函数入口，即enable.js的drawImage函数，然后调用renderGrayscaleImage.js入口函数，再调用storedPixelDataToCanvasImageData.js，最终调用Html5 Canvas的API