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

 

  

 

 

 

posted on 2020-05-24 11:08  omage  阅读(266)  评论(0编辑  收藏  举报