关于xtk.js的使用(医疗影像处理插件)
来源:互联网 发布:编程入门教学视频 编辑:程序博客网 时间:2024/05/20 16:35
由于公司项目需要,我学习了xtk.js,用于显示obj、vtk、mtl等文件中的内容。效果如图:
xtk.js能够实现obj文件的显示、3D影像的视口改变、影像移动、放大缩小,并能够适配平板端。
我主要是使用插件中的接口。
xtk.js是读取直接读取文件的,因此不能读取文件内容,需要封装一个FIle对象或者Blob对象来使用。
以上是我在项目中需要用到的插件。
minicolor.js是一个很好用的颜色选择器插件,会用到jquery.ui中的东西。
使用如下:用于改变mesh的颜色。
sidebar是可以自己写的一个样式文件(不重要),会用到jquery.ui中的东西。
下面着重说一下xtk.js的使用过程。
这次项目中我主要用到了mesh(网格)对象->这个对象需要自定义,是xtk中很小的一部分。
这是我需要用到的,而xtk中提供的如下:
而这些数据是用于一个叫X的对象的;
这就是X对象中的mesh需要用到我们刚才创建的data。
实际上有:
volume = new X.volume();
mesh = new X.mesh();
fibers = new X.fibers();等X对象的属性。
结束了上面的一些准备工作,以及DOM操作后进行文件读取:
下面这个函数是读取文件的入口
//解析文件内容并创建3d对象(Parse file data and setup X.objects)function parse(data) { var fname = data['mesh']['file'][0].name.split(".")[0].toString().replace(" ", ''); // 初始化文件读取 initializeRenderers(); //设置影像的mesh(图像颜色和透明度) if (data['mesh']['file'].length > 0) { mesh[fname] = new X.mesh();// we have a mesh mesh[fname].file = data['mesh']['file'].map(function (v) { return v.name; }); mesh[fname].filedata = data['mesh']['filedata']; ren3d.add(mesh[fname]);// add the mesh } ren3d.camera.position = [0, 500, 0]; ren3d.render();}
//创建3d影像的对象function initializeRenderers() { if (ren3d) { return; } _webgl_supported = true; try { ren3d = new X.renderer3D();// 创建 XTK renderers ren3d.container = 'imageBox'; ren3d.init(); ren3d.interactor.onMouseWheel = function (e) {}; } catch (Error) { window.console.log('WebGL *not* supported.'); _webgl_supported = false; $('#imageBox').empty();// 出现异常或浏览器不支持则删除3d对象 } ren3d.onShowtime = function () { for (var i = 0; i < files.length; i++) { var curfname = files[i].name.split(".")[0].toString().replace(" ", '') mesh[curfname].opacity = meshObj[curfname].opacity; //---------------------------初始化影像透明度--------------------------- mesh[curfname].color = meshObj[curfname].color;//---------------------------初始化设置影像颜色--------------------------- } };}
通过以上操作,就可以实现我的项目功能了。
然而,在远程文件读取的过程中会遇到很多问题:
1、大型文件的异步请求问题:用到了闭包来保证文件顺序即使用立即执行函数(function(){}());
2、大型文件传输速度慢:压缩后再传输进行解压缩(zip.js);
3、xtk.js工作时遇到很多的大型文件同时加载会出现问题:缓冲区分配失败——需要对影像进行降维处理,问题还在解决中,或许还可以从three.js的学习中找到解决方案。
0 0
- 关于xtk.js的使用(医疗影像处理插件)
- 医疗影像处理系统的基本分类
- 关于knob.js进度插件的使用
- JS调用Envi Services Engine发布的影像处理服务
- 医疗影像系统规划
- 智能医疗影像诊断系统遭遇的骨感现实
- 体素科技丁晓伟:医疗影像的哲学三问
- 【回顾】视见医疗陈浩:从MICCAI2017一窥医疗影像的最近进展
- 医疗影像数据预处理-nrrd
- 关于ajaxfileupload.js插件及其多上传的使用
- 关于bootstrap fileupload.js上传插件的使用之一
- 关于使用js插件ckeditor报错的解决办法
- 关于js表格datatable插件的使用心得
- 关于loading加载效果的插件spin.js使用
- 关于如何使用js 插件实现打印的功能
- 图像处理--医疗图片的处理
- 基于dicom 影像浏览处理的动态库(VC)
- 关于我的JS插件
- shimmer让你的view闪烁起来
- 安卓自定义theme以及attrs,styles资源文件详解(一)
- Bind event to element using pure Javascript
- iOS 常用宏
- 外观模式
- 关于xtk.js的使用(医疗影像处理插件)
- 【设计模式】单例模式
- android 版本更新
- linux平台下防火墙iptables原理
- 下载Apache
- 牛刀与小试-dubbo+spring-boot
- 未来值得关注的十大 APP、Web 界面设计趋势
- 用DDK开发的9054驱动
- 广宇修炼困难重重 沃美毫不气馁