系列文章目錄

---

---

前言

vr = volume rendering 體繪制，體渲染
本章實現三個功能：

1. mpr窗口中顯示方位文字
2. vr窗口右下角顯示坐標系
3. vr窗口顯示輪廓線
   效果如下：
   

---

一、工具欄修改

• 在工具欄上添加“VR坐標系”、“VR輪廓”、“方位文字” 三個checkbox，用來控制各自的顯示與隱藏。添加select選擇器用來切換VR坐標系的顯示外觀(CUBE, AXES, CUSTOM)。 其中CUSTOM的vtp文件點此處下載

<template><div class="toolbar">...<div class="toolbar-row"><el-checkbox v-model="showAxes" label="VR坐標系" size="large" style="margin: 0 10px" /><el-select v-model="currentAxes" placeholder="Select Axes Type" style="width: 200px"><el-option v-for="item in axes" :key="item.name" :label="item.name" :value="item.value" /></el-select></div><div class="toolbar-row"><el-checkbox v-model="showOutline" label="VR輪廓" size="large" style="margin-left: 10px" /><el-checkbox v-model="showOrientText" label="方位文字" size="large" style="margin-left: 10px" /></div></div>
</template>

• 監聽以上各元素綁定的變量，發送事件到view3d

const currentAxes = ref(1);
const showOutline = ref(true);
const showAxes = ref(true);
const showOrientText = ref(true);watch(showAxes, (newValue) => {emit("action", { name: "showAxes", value: newValue });
});watch(showOutline, (newValue) => {emit("action", { name: "showOutline", value: newValue });
});watch(showOrientText, (newValue) => {emit("action", { name: "toggleOrientText" });
});watch(currentAxes, (newValue) => {emit("action", { name: "changeAxesType", value: newValue });
});

二、切片窗口顯示方位文字

計算切片方位文字的算法參考第八章 在Displayer中顯示圖像方位

1. 修改mprvr.js，添加函數getOrientationMarkers

export default class MPR {constructor(params) {this.toolGroup = null;this.vrToolGroup = null;this.renderingEngine = null;this.registered = false;...this.init(params);}init(config = {}) {...}...getOrientationMarkers({ camera, rotation }) {let flipVertical = camera.flipVertical || false;let flipHorizontal = camera.flipHorizontal || false;let newRotation = rotation || 0;let rowCosines, columnCosines;const { viewUp, viewPlaneNormal } = camera;const viewRight = vec3.create();vec3.cross(viewRight, viewUp, viewPlaneNormal);columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]];rowCosines = viewRight;const rowString = getOrientationStringLPS(rowCosines);const columnString = getOrientationStringLPS(columnCosines);const oppositeRowString = invertOrientationStringLPS(rowString);const oppositeColumnString = invertOrientationStringLPS(columnString);const markers = {top: oppositeColumnString,left: oppositeRowString,right: rowString,bottom: columnString};// If any vertical or horizontal flips are applied, change the orientation strings ahead of// the rotation applicationsif (flipVertical) {markers.top = invertOrientationStringLPS(markers.top);markers.bottom = invertOrientationStringLPS(markers.bottom);}if (flipHorizontal) {markers.left = invertOrientationStringLPS(markers.left);markers.right = invertOrientationStringLPS(markers.right);}// Swap the labels accordingly if the viewport has been rotated// This could be done in a more complex way for intermediate rotation values (e.g. 45 degrees)if (newRotation === 90 || newRotation === -270) {return {top: markers.left,left: invertOrientationStringLPS(markers.top),right: invertOrientationStringLPS(markers.bottom),bottom: markers.right // left};} else if (newRotation === -90 || newRotation === 270) {return {top: invertOrientationStringLPS(markers.left),left: markers.top,bottom: markers.left,right: markers.bottom};} else if (newRotation === 180 || newRotation === -180) {return {top: invertOrientationStringLPS(markers.top),left: invertOrientationStringLPS(markers.left),bottom: invertOrientationStringLPS(markers.bottom),right: invertOrientationStringLPS(markers.right)};}return markers;}
}

2. 修改DisplayerArea3D.vue

• 在mpr 三個div上中、下中、左中、右中添加用于顯示方位文字的元素。都與變量showOrientText綁定，用來控制顯示/隱藏

<template><divclass="container3d"ref="elContainer"v-loading="loading"element-loading-text="正在處理..."element-loading-background="rgba(0, 0, 0, 0.8)"@mousedown.prevent="OnSelectView"><div class="axialparent" :style="axialStyle" v-show="showAxial" @dblclick="OnDbClick"><div ref="elAxial" class="sliceview" @contextmenu.prevent>...<!--顯示方位文字--><span class="orient_top" v-show="showOrientText">{{ axialText.orient.top }}</span><span class="orient_bottom" v-show="showOrientText">{{ axialText.orient.bottom }}</span><span class="orient_left" v-show="showOrientText">{{ axialText.orient.left }}</span><span class="orient_right" v-show="showOrientText">{{ axialText.orient.right }}</span></div></div><div class="vrcprparent" v-show="showVR" @dblclick="OnDbClick">...</div><div class="sagittalparent" v-show="showSagittal" @dblclick="OnDbClick"><div ref="elSagittal" class="sliceview" @contextmenu.prevent>...<!--顯示方位文字--><span class="orient_top" v-show="showOrientText">{{ sagittalText.orient.top }}</span><span class="orient_bottom" v-show="showOrientText">{{ sagittalText.orient.bottom }}</span><span class="orient_left" v-show="showOrientText">{{ sagittalText.orient.left }}</span><span class="orient_right" v-show="showOrientText">{{ sagittalText.orient.right }}</span></div></div><div class="coronalparent" v-show="showCoronal" @dblclick="OnDbClick"><div ref="elCoronal" class="sliceview" @contextmenu.prevent>...<!--顯示方位文字--><span class="orient_top" v-show="showOrientText">{{ coronalText.orient.top }}</span><span class="orient_bottom" v-show="showOrientText">{{ coronalText.orient.bottom }}</span><span class="orient_left" v-show="showOrientText">{{ coronalText.orient.left }}</span><span class="orient_right" v-show="showOrientText">{{ coronalText.orient.right }}</span></div></div></div>
</template>

• 定義三個切片方位文字的保存變量axialText，sagittalText， coronalText
• 在onMounted中調用MPR bindCameraEvent綁定CAMERA_MODIFIED事件，調用UdpateOrientation函數
• 添加cameraHandler，UdpateOrientation函數更新方位文字

import { ViewportId, getDicomInfo } from "../cornerstone3D/mprvr.js";const cornerText = reactive({[ViewportId.AXIAL]: {wwwc: "",slice: "",orient: {top: "",bottom: "",left: "",right: ""}},[ViewportId.SAGITTAL]: {wwwc: "",slice: "",orient: {top: "",bottom: "",left: "",right: ""}},[ViewportId.CORONAL]: {wwwc: "",slice: "",orient: {top: "",bottom: "",left: "",right: ""}}
});const cameraHandler = e => {UdpateOrientation(e);
};const UdpateOrientation = e => {const { viewportId, camera, rotation} = e.detail;const markers = theMPR.getOrientationMarkers({ camera, rotation });if (markers && showOrientText.value) {cornerText[viewportId].orient = markers;}
};onMounted(() => {theMPR = new MPR({elAxial: elAxial.value,elSagittal: elSagittal.value,elCoronal: elCoronal.value,elVR: elVR.value});load();theMPR.bindRenderEvent(renderHandler);theMPR.bindCameraEvent(cameraHandler);});

三、vr窗口顯示坐標系

1. 修改mprvr.js 添加OrientationMarkerTool

• 添加axesConfig 為OrientationMarkerTool定義三種類型外觀配置項
• 添加工具 this.vrToolGroup.addTool(OrientationMarkerTool.toolName, axesConfig)
• 添加showAxes函數，顯示/隱藏坐標系
• 添加setAxesType函數，切換坐標系外觀
• loadImages中調用this.showAxes(true)，顯示默認坐標系-CUBE

const {ToolGroupManager,Enums: csToolsEnums,...OrientationMarkerTool
} = cornerstoneTools;const axesConfig = {orientationWidget: {viewportSize: 0.08,minPixelSize: 70,maxPixelSize: 200},overlayMarkerType: OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE,overlayConfiguration: {[OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE]: {faceProperties: {xPlus: {text: "L",faceColor: viewportColors[idSagittal], //"#ffff00",faceRotation: 90},xMinus: {text: "R",faceColor: viewportColors[idSagittal], //"#ffff00",faceRotation: 270},yPlus: {text: "P",faceColor: viewportColors[idCoronal], //"#00ffff",fontColor: "black",faceRotation: 180},yMinus: {text: "A",faceColor: viewportColors[idCoronal], //"#00ffff",fontColor: "black"},zPlus: {text: "S",faceColor: viewportColors[idAxial] //"#00ffff",// fontColor: "white",},zMinus: {text: "I",faceColor: viewportColors[idAxial] //"#00ffff",// fontColor: "white",}},defaultStyle: {fontStyle: "bold",fontFamily: "Arial",fontColor: "black",fontSizeScale: res => res / 2,faceColor: "#0000ff",edgeThickness: 0.05,edgeColor: "black",resolution: 400}},[OrientationMarkerTool.OVERLAY_MARKER_TYPES.AXES]: {},[OrientationMarkerTool.OVERLAY_MARKER_TYPES.CUSTOM]: {polyDataURL: "/src/assets/Human.vtp"}}
};export default class MPR {constructor(params) {this.toolGroup = null;this.vrToolGroup = null;this.renderingEngine = null;this.registered = false;this.viewportInputArray = null;this.crosshairsToolActive = true;this.loaded = false;this.selecteToolName = "";this.params = params;this.volume = null;this.init(params);}init(config = {}) {const { elAxial, elSagittal, elCoronal, elVR } = config;cornerstoneTools.addTool(CrosshairsTool);...cornerstoneTools.addTool(OrientationMarkerTool);this.vrToolGroup = ToolGroupManager.getToolGroup(vrToolGroupId);if (!this.vrToolGroup) {this.vrToolGroup = ToolGroupManager.createToolGroup(vrToolGroupId);this.vrToolGroup.addTool(TrackballRotateTool.toolName);this.vrToolGroup.addTool(ZoomTool.toolName, {zoomToCenter: true,invert: true,minZoomScale: 0.15,maxZoomScale: 20});...// 添加坐標系工具this.vrToolGroup.addTool(OrientationMarkerTool.toolName, axesConfig);}}async loadImages(imageIds) {let newImageIds = [...new Set(imageIds)];for (let i = 0; i < newImageIds.length; i++) {await cornerstoneDICOMImageLoader.wadouri.loadImage(newImageIds[i]).promise;}// Define a volume in memorythis.volume = await volumeLoader.createAndCacheVolume(volumeId, {imageIds: newImageIds});...// 顯示坐標系this.showAxes(true);this.loaded = true;}...setAxesType(type) {  // 坐標系外觀axesConfig.overlayMarkerType = type;const options = this.vrToolGroup.getToolOptions(OrientationMarkerTool.toolName);if (options.mode === "Enabled") {this.vrToolGroup.setToolDisabled(OrientationMarkerTool.toolName);this.vrToolGroup.setToolConfiguration(OrientationMarkerTool.toolName, {overlayMarkerType: type});this.vrToolGroup.setToolEnabled(OrientationMarkerTool.toolName);}}showAxes(show) {  // 顯示/隱藏坐標系if (show) {this.vrToolGroup.setToolConfiguration(OrientationMarkerTool.toolName, {overlayMarkerType: axesConfig.overlayMarkerType});this.vrToolGroup.setToolEnabled(OrientationMarkerTool.toolName);} else {this.vrToolGroup.setToolDisabled(OrientationMarkerTool.toolName);}}
}

2. view3d.vue中響應工具欄事件

async function OnToolbarAction(action) {switch (action.name) {...case "showOutline":  // 顯示/隱藏 輪廓線displayArea.value.showOutline(action.value);break;case "showAxes":  // 顯示/隱藏 坐標系displayArea.value.showAxes(action.value);break;case "toggleOrientText":  // 顯示/隱藏 切片窗口方位文字displayArea.value.toggleOrientText();break;case "changeAxesType":  // 切換坐標系外觀displayArea.value.changeAxesType(action.value);break;default:break;}
}

3. 修改DisplayerArea3D.vue

添加并導出工具欄操作響應函數：showAxes，changeAxesType

const showAxes = show => {theMPR.showAxes(show);
};const changeAxesType = type => {theMPR.setAxesType(type);
};defineExpose({...showAxes,changeAxesType,
});

四、vr窗口顯示輪廓線

1. 修改mprvr.js 添加addOutline，showOutline函數

• 導入vtk.js中的vtkOutlineFilter，vtkMapper，vtkActor
• 添加addOutline函數，vtkOutlineFilter輸入連接this.volume.imageData
• 添加showOutline函數，顯示/隱藏輪廓線
• loadImages中調用this.showOutline(true)，默認顯示輪廓線

import vtkOutlineFilter from "@kitware/vtk.js/Filters/General/OutlineFilter";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";let outlineActor = null;export default class MPR {constructor(params) {this.toolGroup = null;this.vrToolGroup = null;...this.init(params);}init(config = {}) {...}...addOutline() {// Create image outline in 3D viewconst outline = vtkOutlineFilter.newInstance();const mapper = vtkMapper.newInstance();outlineActor = vtkActor.newInstance();outlineActor.setMapper(mapper);outline.setInputData(this.volume.imageData);mapper.setInputData(outline.getOutputData());const viewport = this.renderingEngine.getViewport(idVolume);viewport.addActor({ uid: "VOLUME_OUTLINE", actor: outlineActor });outlineActor.setVisibility(true);viewport.render();}showOutline(show) {if (!outlineActor) return;outlineActor.setVisibility(show);const viewport = this.renderingEngine.getViewport(idVolume);viewport.render();}
}

2. view3d.vue中響應工具欄操作

參考第三節

3. 修改DisplayerArea3D.vue

添加并導出工具欄操作響應函數：showOutline

const showOutline = show => {theMPR.showOutline(show);
};defineExpose({...showOutline
});

---

總結

mpr切片窗口顯示/隱藏 方位文字。
vr窗口顯示/隱藏坐標系，切換坐標系外觀
vr窗口顯示/隱藏輪廓線。