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

可参考前面章节

相关推荐
一个游离的指针3 小时前
函数管道:消除深度嵌套调用
前端·javascript
柚yuzumi3 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙3 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
用户938515635074 小时前
大模型记忆指南:从短时缓存到永久记忆,手把手带你吃透 LangChain Memory 管理
javascript·人工智能
xqchen4 小时前
Web Components 普及困境深度解析:技术标准与工程实践的落差
javascript
爱丶不疚4 小时前
写给前端工程师的现代 Python 工程化最佳实践:从 pnpm 到 uv,从 CommonJS 到 src-layout
javascript·python·typescript
2601_962097486 小时前
JavaScript 异步编程
javascript·ajax·回调函数·异步编程·子线程
全栈项目管理程序猿6 小时前
ArcGIS JS 基础教程(18):SceneLayer 场景图层
javascript
leoZ2317 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
七牛开发者7 小时前
拆解 dsh:Session 的事件溯源与状态重建
javascript·github·agent