cornerstonejs源码学习笔记(一)
什么是cornerstonejs
Cornerstone是一个开源的致力于提供基于WEB的医学影像处理平台
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