基于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类中的函数

可参考前面章节

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军2 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy3 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL3 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~3 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng3 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript
路人与大师3 小时前
【Mermaid.js】从入门到精通:完美处理节点中的空格、括号和特殊字符
开发语言·javascript·信息可视化