feat: stackViewport渲染
This commit is contained in:
parent
2897d02c22
commit
6c6d2178a0
|
@ -19,6 +19,7 @@ import {
|
|||
viewportId3,
|
||||
ViewportId,
|
||||
} from "./Crosshair.config";
|
||||
import { IStackViewport } from "@cornerstonejs/core/dist/types/types";
|
||||
|
||||
const {
|
||||
ToolGroupManager,
|
||||
|
@ -63,6 +64,7 @@ interface CrosshairMprProps {
|
|||
|
||||
export const CrosshairMpr = (props: CrosshairMprProps) => {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const viewportStack = useRef<HTMLDivElement | null>(null);
|
||||
const viewportRef_AXIAL = useRef<HTMLDivElement | null>(null);
|
||||
const viewportRef_SAGITTAL = useRef<HTMLDivElement | null>(null);
|
||||
const viewportRef_CORONAL = useRef<HTMLDivElement | null>(null);
|
||||
|
@ -116,6 +118,17 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
|
|||
const defaultWindowWidth = 850;
|
||||
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
|
||||
const viewportInputArray: PublicViewportInput[] = [
|
||||
{
|
||||
|
@ -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
|
||||
volume.load();
|
||||
|
@ -280,9 +302,10 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
|
|||
|
||||
return (
|
||||
<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/3" ref={viewportRef_SAGITTAL} />
|
||||
<div className="w-full h-1/3" ref={viewportRef_CORONAL} />
|
||||
<div className="w-full h-1/4" ref={viewportRef_AXIAL} />
|
||||
<div className="w-full h-1/4" ref={viewportRef_SAGITTAL} />
|
||||
<div className="w-full h-1/4" ref={viewportRef_CORONAL} />
|
||||
<div className="w-full h-1/4" ref={viewportStack} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,13 +1,14 @@
|
|||
import { useLocation } from "react-router-dom";
|
||||
import { initCornerstone } from "./MprViewer/CornerstoneDicomLoader/init";
|
||||
import { CrosshairMpr } from "./MprViewer/Crosshair";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { ToolBarMenu } from "./MprViewer/ToolBarMenu";
|
||||
import { RenderingEngine } from "@cornerstonejs/core";
|
||||
|
||||
export interface CurrentDicom {
|
||||
SeriesInstanceUID: string | null;
|
||||
|
@ -36,7 +37,7 @@ export const Viewer = () => {
|
|||
initCornerstone(() => {
|
||||
setCornerstoneLoaded(true);
|
||||
});
|
||||
}, []);
|
||||
}, [queryParams]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(cornerstoneLoaded);
|
||||
|
@ -49,14 +50,14 @@ export const Viewer = () => {
|
|||
</div>
|
||||
<div className="flex-grow">
|
||||
<ResizablePanelGroup direction="horizontal" className="w-full h-full">
|
||||
<ResizablePanel defaultSize={61.8}>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="h-full">
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
className="w-full h-full"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div>top</div>
|
||||
<div id="stackElement" className="w-full h-full"></div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel defaultSize={50}>
|
||||
|
@ -66,7 +67,7 @@ export const Viewer = () => {
|
|||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel defaultSize={38.2}>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
{cornerstoneLoaded &&
|
||||
currentDicom.StudyInstanceUID &&
|
||||
currentDicom.SeriesInstanceUID && (
|
||||
|
|
Loading…
Reference in New Issue
Block a user