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

可参考前面章节

相关推荐
Mintopia1 小时前
Three.js 3D 图表与数据可视化:在数字宇宙中绘制数据星河
前端·javascript·three.js
JohnYan1 小时前
Bun技术评估 - 11 Websocket
javascript·后端·bun
全干engineer1 小时前
Web3-Web3.js核心操作:Metamask、合约调用、事件订阅全指南
开发语言·javascript·web3·区块链·智能合约
Leyla2 小时前
你不知道的 parseInt 方法
javascript·面试
困困的果果头2 小时前
【vue + element】el-table支持多层级合并列
前端·javascript·vue.js·elementui
EndingCoder2 小时前
React Native 与后端协同开发指南
javascript·react native·react.js
Hilaku2 小时前
😵‍💫 产品:你能不能让按钮 hover 有个动效?我直接做了个 UI 框架
前端·javascript·css
Hilaku2 小时前
🔥这 10 个 Vue3 性能优化技巧,藏太深了,建议保存!
前端·javascript·vue.js
FogLetter2 小时前
你不知道的Javascript(上卷) | 第一章:作用域是什么
前端·javascript·编程语言
nice-wyh2 小时前
三维重建之colmap+openmvs
人工智能·深度学习·3d