feat: 完善了ts

This commit is contained in:
mozzie 2023-12-27 14:09:40 +08:00
parent b291ce1216
commit 6b188b5354

View File

@ -1,19 +1,29 @@
import { readImageDicomFileSeries } from "@itk-wasm/dicom";
import {
readImageDicomFileSeries,
structuredReportToHtml,
} from "@itk-wasm/dicom";
import vtkITKHelper from "@kitware/vtk.js/Common/DataModel/ITKHelper";
import vtkVolume from "@kitware/vtk.js/Rendering/Core/Volume";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";
import "@kitware/vtk.js/Rendering/Profiles/Volume";
import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import { useEffect, useRef, useState } from "react";
import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
import vtkVolumeMapper from "@kitware/vtk.js/Rendering/Core/VolumeMapper";
import vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow";
function App() {
const [files, setFiles] = useState<File[]>([]);
const inputRef = useRef<HTMLInputElement>(null);
const rendererRef = useRef<vtkRenderer>();
const mapperRef = useRef();
const actorRef = useRef();
const renderWindowRef = useRef();
const mapperRef = useRef<vtkVolumeMapper>();
const actorRef = useRef<vtkVolume>();
const renderWindowRef = useRef<vtkRenderWindow>();
useEffect(() => {
if (inputRef.current) {
inputRef.current.webkitdirectory = true;
}
}, []);
useEffect(() => {
if (files.length > 0) {
@ -21,24 +31,31 @@ function App() {
rendererRef.current = fullScreenRenderer.getRenderer();
renderWindowRef.current = fullScreenRenderer.getRenderWindow();
actorRef.current = vtkVolume.newInstance();
mapperRef.current = vtkVolumeMapper.newInstance({ sampleDistance: 1.1});
mapperRef.current = vtkVolumeMapper.newInstance({ sampleDistance: 1.1 });
readImageDicomFileSeries(null, {
inputImages: files,
}).then((image) => {
const vtkImage = vtkITKHelper.convertItkToVtkImage(image.outputImage);
mapperRef.current.setInputData(vtkImage);
actorRef.current.setMapper(mapperRef.current);
rendererRef.current?.addVolume(actorRef.current)
rendererRef.current.resetCamera();
renderWindowRef.current.render();
mapperRef.current?.setInputData(vtkImage);
mapperRef.current && actorRef.current?.setMapper(mapperRef.current);
actorRef.current && rendererRef.current?.addVolume(actorRef.current);
rendererRef.current?.resetCamera();
renderWindowRef.current?.render();
});
return () => {
actorRef.current = undefined;
mapperRef.current = undefined;
rendererRef.current = undefined;
renderWindowRef.current = undefined;
};
}
}, [files]);
const handleFolderUpload = async (event: Event) => {
const handleFolderUpload = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
const target = event.target as HTMLInputElement;
if (!target.files) return;
const files = [...target.files].filter((file) =>
@ -52,7 +69,7 @@ function App() {
<input
type="file"
onChange={handleFolderUpload}
webkitdirectory="true"
ref={inputRef}
style={{ position: "fixed", zIndex: 100 }}
/>
</>