基于cornerstone3D的dicom影像浏览器 第二十三章 mpr预设窗值与vr preset

文章目录


前言

实现mpr窗口预设窗值,vr窗口预设配色

效果如下:


一、mpr窗口预设窗值

可参考 第十五章 预设窗值

逻辑一样的,把windowWidth, windowCenter值转换为voiRange值,再调用viewport.setProperties设置。

在MPR类中增加函数setWindow

javascript 复制代码
const presetWindow = [
	{
		id: "wwwl-default",
		text: "默认",
		tooltip: "默认窗宽窗位",
		icon: "icon-tiaochuang",
		wwwl: {
			wl: 0,
			ww: 0,
		}
	},
	{
		id: "wwwl-ct-bone",
		text: "骨窗",
		tooltip: "CT骨窗 [300/1500]",
		icon: "icon-jawbone",
		wwwl: {
			wl: 300,
			ww: 1500,
		}
	},
	{
		id: "wwwl-ct-lung",
		text: "肺窗",
		tooltip: "CT肺窗 [-600/1500]",
		icon: "icon-lungs-line",
		wwwl: {
			wl: -600,
			ww: 1500,
		}
	},
	{
		id: "wwwl-ct-abdomen",
		text: "腹部",
		tooltip: "CT腹部 [60/400]",
		icon: "icon-fubu",
		wwwl: {
			wl: 60,
			ww: 400,
		}
	},
	{
		id: "wwwl-ct-angio",
		text: "血管",
		tooltip: "CT血管 [300/600]",
		icon: "icon-xinxieguan1",
		wwwl: {
			wl: 300,
			ww: 600,
		}
	},
	{
		id: "wwwl-ct-brain",
		text: "颅脑",
		tooltip: "CT颅脑 [40/80]",
		icon: "icon-xinxieguan",
		wwwl: {
			wl: 40,
			ww: 80,
		}
	},
	{
		id: "wwwl-ct-chest",
		text: "胸腔",
		tooltip: "CT胸腔 [40/400]",
		icon: "icon-Frightn",
		wwwl: {
			wl: 40,
			ww: 400,
		}
	},
];

setWindow(ww, wl) {
		if (!this.loaded) {
			return;
		}

		const viewports = this.renderingEngine.getViewports();
		for (let i = 0; i < viewports.length; i++) {
			const viewport = viewports[i];
			if (viewport.id !== idVolume) {
				const voiLutFunction = viewport.getProperties().VOILUTFunction;
				const newRange = csUtils.windowLevel.toLowHighRange(ww, wl, voiLutFunction);

				viewport.setProperties({
					voiRange: newRange
				});
				viewport.render();
			}
		}
	}

二、vr preset

cornerstone3D中预设22种viewport preset。保存在CONSTANTS.VIEWPORT_PRESETS中。

在MPR类中添加setVRColor函数,同时把CONSTANTS.VIEWPORT_PRESETS.name导出,以便Toolbar3d.vue中使用

javascript 复制代码
import {
	RenderingEngine,
	Enums,
	...
	CONSTANTS
} from "@cornerstonejs/core";

const presetColors = CONSTANTS.VIEWPORT_PRESETS.map(preset => preset.name);

setVRColor(presetName) {
	if (!this.loaded) {
		return;
	}

	const viewport = this.renderingEngine.getViewport(idVolume);

	const volumeActor = viewport.getDefaultActor().actor;
	csUtils.applyPreset(
		volumeActor,
		CONSTANTS.VIEWPORT_PRESETS.find(preset => preset.name === presetName)
	);
	viewport.render();
}

三、调用流程

基本流程:

    1. Toolbar3d.vue中添加操作按钮或其他元素
    1. View3d.vue中响应操作
    1. DisplayerArea3d.vue调用MPR类中的函数

可参考前面章节

相关推荐
互联网搬砖老肖2 小时前
React的单向数据绑定
前端·javascript·react.js
日晞5 小时前
深浅拷贝?
开发语言·前端·javascript
沐土Arvin6 小时前
性能优化关键:link、script和meta的正确打开方式
开发语言·前端·javascript·设计模式·性能优化·html
じ☆ve 清风°7 小时前
JavaScript计时器详解:setTimeout与setInterval的使用与注意事项
开发语言·javascript·ecmascript
BillKu7 小时前
Vue3监听对象数组属性变化方法
javascript·vue.js·ecmascript
Z_ One Dream7 小时前
本地依赖库的版本和库依赖的版本不一致如何解决?
开发语言·前端·javascript
Thomas_YXQ8 小时前
Unity 3D AssetBundle加密解密教程
开发语言·前端·3d·unity·游戏引擎·全文检索
渊鱼L8 小时前
CAD球体功能梯度材料3D插件
3d
万米商云8 小时前
商城图片性能优化实战:懒加载与下一代格式的化学反应
开发语言·前端·javascript
AgilityBaby8 小时前
UE 5 C++设置物体位置和旋转,初始化虚幻引擎样条线、加载引用虚幻编辑器中的蓝图、设置虚幻编辑器中Actor大小
c++·3d·ue5·游戏引擎