文章目录
- 前言
- 一、mpr窗口预设窗值
- [二、vr preset](#二、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();
}
三、调用流程
基本流程:
-
- Toolbar3d.vue中添加操作按钮或其他元素
-
- View3d.vue中响应操作
-
- DisplayerArea3d.vue调用MPR类中的函数
可参考前面章节