feat: stackViewport渲染
This commit is contained in:
parent
2897d02c22
commit
6c6d2178a0
|
@ -19,6 +19,7 @@ import {
|
||||||
viewportId3,
|
viewportId3,
|
||||||
ViewportId,
|
ViewportId,
|
||||||
} from "./Crosshair.config";
|
} from "./Crosshair.config";
|
||||||
|
import { IStackViewport } from "@cornerstonejs/core/dist/types/types";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
ToolGroupManager,
|
ToolGroupManager,
|
||||||
|
@ -63,6 +64,7 @@ interface CrosshairMprProps {
|
||||||
|
|
||||||
export const CrosshairMpr = (props: CrosshairMprProps) => {
|
export const CrosshairMpr = (props: CrosshairMprProps) => {
|
||||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const viewportStack = useRef<HTMLDivElement | null>(null);
|
||||||
const viewportRef_AXIAL = useRef<HTMLDivElement | null>(null);
|
const viewportRef_AXIAL = useRef<HTMLDivElement | null>(null);
|
||||||
const viewportRef_SAGITTAL = useRef<HTMLDivElement | null>(null);
|
const viewportRef_SAGITTAL = useRef<HTMLDivElement | null>(null);
|
||||||
const viewportRef_CORONAL = useRef<HTMLDivElement | null>(null);
|
const viewportRef_CORONAL = useRef<HTMLDivElement | null>(null);
|
||||||
|
@ -116,6 +118,17 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
|
||||||
const defaultWindowWidth = 850;
|
const defaultWindowWidth = 850;
|
||||||
console.log("采用默认窗宽/位: ", windowCenter, windowWidth);
|
console.log("采用默认窗宽/位: ", windowCenter, windowWidth);
|
||||||
|
|
||||||
|
// 定义 Stack 视口
|
||||||
|
const stackViewport = "stack" + props.SeriesInstanceUID + ts;
|
||||||
|
const viewportInput: PublicViewportInput = {
|
||||||
|
viewportId: stackViewport,
|
||||||
|
type: CoreEnums.ViewportType.STACK, // 用于 Stack 视图
|
||||||
|
element: viewportStack.current!,
|
||||||
|
defaultOptions: {
|
||||||
|
background: [0, 0, 0],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
// Create the viewports
|
// Create the viewports
|
||||||
const viewportInputArray: PublicViewportInput[] = [
|
const viewportInputArray: PublicViewportInput[] = [
|
||||||
{
|
{
|
||||||
|
@ -124,7 +137,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
|
||||||
element: viewportRef_AXIAL.current,
|
element: viewportRef_AXIAL.current,
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
orientation: CoreEnums.OrientationAxis.AXIAL,
|
orientation: CoreEnums.OrientationAxis.AXIAL,
|
||||||
background: [0, 0, 0],
|
background: [0, 0, 0],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -147,7 +160,16 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
renderingEngine.current.setViewports(viewportInputArray);
|
renderingEngine.current.setViewports([
|
||||||
|
...viewportInputArray,
|
||||||
|
viewportInput,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const viewport = renderingEngine.current.getViewport(
|
||||||
|
stackViewport
|
||||||
|
) as IStackViewport;
|
||||||
|
|
||||||
|
viewport.setStack(imageIds.current, 80);
|
||||||
|
|
||||||
// Set the volume to load
|
// Set the volume to load
|
||||||
volume.load();
|
volume.load();
|
||||||
|
@ -280,9 +302,10 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={containerRef} className="w-full h-full flex flex-col">
|
<div ref={containerRef} className="w-full h-full flex flex-col">
|
||||||
<div className="w-full h-1/3" ref={viewportRef_AXIAL} />
|
<div className="w-full h-1/4" ref={viewportRef_AXIAL} />
|
||||||
<div className="w-full h-1/3" ref={viewportRef_SAGITTAL} />
|
<div className="w-full h-1/4" ref={viewportRef_SAGITTAL} />
|
||||||
<div className="w-full h-1/3" ref={viewportRef_CORONAL} />
|
<div className="w-full h-1/4" ref={viewportRef_CORONAL} />
|
||||||
|
<div className="w-full h-1/4" ref={viewportStack} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,13 +1,14 @@
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import { initCornerstone } from "./MprViewer/CornerstoneDicomLoader/init";
|
import { initCornerstone } from "./MprViewer/CornerstoneDicomLoader/init";
|
||||||
import { CrosshairMpr } from "./MprViewer/Crosshair";
|
import { CrosshairMpr } from "./MprViewer/Crosshair";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import {
|
import {
|
||||||
ResizableHandle,
|
ResizableHandle,
|
||||||
ResizablePanel,
|
ResizablePanel,
|
||||||
ResizablePanelGroup,
|
ResizablePanelGroup,
|
||||||
} from "@/components/ui/resizable";
|
} from "@/components/ui/resizable";
|
||||||
import { ToolBarMenu } from "./MprViewer/ToolBarMenu";
|
import { ToolBarMenu } from "./MprViewer/ToolBarMenu";
|
||||||
|
import { RenderingEngine } from "@cornerstonejs/core";
|
||||||
|
|
||||||
export interface CurrentDicom {
|
export interface CurrentDicom {
|
||||||
SeriesInstanceUID: string | null;
|
SeriesInstanceUID: string | null;
|
||||||
|
@ -36,7 +37,7 @@ export const Viewer = () => {
|
||||||
initCornerstone(() => {
|
initCornerstone(() => {
|
||||||
setCornerstoneLoaded(true);
|
setCornerstoneLoaded(true);
|
||||||
});
|
});
|
||||||
}, []);
|
}, [queryParams]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(cornerstoneLoaded);
|
console.log(cornerstoneLoaded);
|
||||||
|
@ -49,14 +50,14 @@ export const Viewer = () => {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow">
|
<div className="flex-grow">
|
||||||
<ResizablePanelGroup direction="horizontal" className="w-full h-full">
|
<ResizablePanelGroup direction="horizontal" className="w-full h-full">
|
||||||
<ResizablePanel defaultSize={61.8}>
|
<ResizablePanel defaultSize={50}>
|
||||||
<div className="h-full">
|
<div className="h-full">
|
||||||
<ResizablePanelGroup
|
<ResizablePanelGroup
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
className="w-full h-full"
|
className="w-full h-full"
|
||||||
>
|
>
|
||||||
<ResizablePanel defaultSize={50}>
|
<ResizablePanel defaultSize={50}>
|
||||||
<div>top</div>
|
<div id="stackElement" className="w-full h-full"></div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle />
|
||||||
<ResizablePanel defaultSize={50}>
|
<ResizablePanel defaultSize={50}>
|
||||||
|
@ -66,7 +67,7 @@ export const Viewer = () => {
|
||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle />
|
||||||
<ResizablePanel defaultSize={38.2}>
|
<ResizablePanel defaultSize={50}>
|
||||||
{cornerstoneLoaded &&
|
{cornerstoneLoaded &&
|
||||||
currentDicom.StudyInstanceUID &&
|
currentDicom.StudyInstanceUID &&
|
||||||
currentDicom.SeriesInstanceUID && (
|
currentDicom.SeriesInstanceUID && (
|
||||||
|
|
Loading…
Reference in New Issue
Block a user