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

可参考前面章节

相关推荐
趣多多代言人8 分钟前
20分钟学会TypeScript
前端·javascript·typescript
雲墨款哥32 分钟前
一个前端开发者的救赎之路——JS基础回顾(二)
前端·javascript
smile boy1 小时前
个人财务记录应用
前端·javascript·css·css3·html5
CAD老兵1 小时前
package.json 中 dependencies 的版本号:它真的是版本号吗?
前端·javascript
拾光拾趣录2 小时前
一个 ID 溢出引发的线上资损
前端·javascript
液态不合群2 小时前
JavaScript 编年史:探索前端界巨变的幕后推手
开发语言·前端·javascript
油丶酸萝卜别吃3 小时前
JS深度克隆对象(克隆时包含函数)
开发语言·javascript·ecmascript
江城开朗的豌豆3 小时前
Element UI 避坑指南:6年老前端的血泪总结
前端·javascript·vue.js
拾光拾趣录3 小时前
一个 4.7 GB 视频把浏览器拖进 OOM
前端·javascript
江城开朗的豌豆3 小时前
Vue的provide/inject:组件传值的秘密通道
前端·javascript·vue.js