javascript - 加载新图像时如何重置基石视口(viewport)

Question

我正在尝试使用 Cornerstone.js 库制作一个 Dicom 查看器应用程序以使用react。我的 React 应用程序中有两个组件。一个是 ImagePreview，另一个是 CornerStoneElement。 CornerStoneElement 是我初始化基石库的地方，它加载当前图像的状态。当一个新图像被推送到 CornerStoneElement 的状态时，它会以一种奇怪的方式加载新图像，因为所有的纵横比都消失了并且视口(viewport)被放大了。通过 ImagePreview 多次切换图像后，视口(viewport)越来越大。我需要的是在 CornerStoneElement 组件中加载新图像时重置视口(viewport)。这是两个组件的代码。

ImagePreview.js

import React,{useState,useEffect,useRef} from 'react'

const ImagePreview = ({ image,parentStateSetter,imageListIndex }) => {

let setParentState = (e) => {    
parentStateSetter(e.target.getAttribute('image-list-index'));
    
 }


return (
  <div className="py-5 px-10">
    <img src={image.previewURL} className="w-full" onClick={setParentState} image-list-index= {imageListIndex}/>
    
  </div>
   );
}

export default ImagePreview

CornerStoneElement.js

import React,{useState, setState, useRef, useEffect} from "react";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";

import Hammer from "hammerjs";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";

cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;

cornerstoneTools.init();

const CornerStoneElement = (props) => {

    console.log('props is called', props);
    const stack = (Object.keys(props.stack).length > 0 )? props.stack : '';
    const [viewport, setViewport] = useState(cornerstone.getDefaultViewport(null, undefined));
    const imageId  = (Object.keys(props.stack).length > 0 )? props.stack.imageIds[0] : '';;
    const viewPortRef = useRef(null);

    const onWindowResize = () => {
        console.log("onWindowResize :", viewPortRef.current);
        cornerstone.resize(viewPortRef.current);
    }
    
    const onImageRendered = () => {
        const viewport = cornerstone.getViewport(viewPortRef.current);
        console.log('onImageRendered :',viewport);
        setViewport(viewport);       
        
    }
    
    const onNewImage = () => {
        const enabledElement = cornerstone.getEnabledElement(viewPortRef.current);
        
       
    }

    const addZoomTool = (e) => {
      e.preventDefault();
      const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;

      cornerstoneTools.addTool(ZoomMouseWheelTool)
      cornerstoneTools.setToolActive('ZoomMouseWheel', { mouseButtonMask: 1 })
    }

    const addLengthTool = (e) => {
      e.preventDefault();
      const LengthTool = cornerstoneTools.LengthTool;

      cornerstoneTools.addTool(LengthTool)
      cornerstoneTools.setToolActive('Length', { mouseButtonMask: 1 });
    }

    const addElipticalTool = (e) => {
      e.preventDefault();
      const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;

      cornerstoneTools.addTool(EllipticalRoiTool)
      cornerstoneTools.setToolActive('EllipticalRoi', { mouseButtonMask: 1 })
    }

    useEffect(() => {

        console.log('use effect is called ');
        
        const element = viewPortRef.current;        
        // Enable the DOM Element for use with Cornerstone
        
        cornerstone.enable(element);
    
        // Load the first image in the stack
        if(imageId){

          cornerstone.loadImage(imageId).then(image => {
            // Display the first image    

            
            cornerstone.displayImage(element, image);
            // Add the stack tool state to the enabled element
            /* cornerstoneTools.addStackStateManager(element, ["stack"]);
            cornerstoneTools.addToolState(element, "stack", stack);    */ 
               
            element.addEventListener( "cornerstoneimagerendered", onImageRendered );
            element.addEventListener("cornerstonenewimage", onNewImage);
            window.addEventListener("resize",onWindowResize); 
          });
          console.log('inside comp will mount :', element);
        }
        
      
    }, [imageId])

    return (
        <div className= "py-5 px-10 ">
          <div className="inline-flex">
            <button className = "text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2 rounded m-2" onClick = {addZoomTool}> Zoom Tool</button>
            <button className = "text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2  rounded m-2" onClick = {addLengthTool}> Length Tool </button>
            <button className = "text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2 rounded m-2" onClick = {addElipticalTool}> Eliptical Tool </button>
          </div>
          
          <div
            className="viewportElement my-3"           
            ref={viewPortRef}
          >
            <canvas className="cornerstone-canvas" />
            <div>Zoom: {viewport.scale}</div>
            <div>
              WW/WC: {viewport.voi.windowWidth} /{" "}
              {viewport.voi.windowCenter}
            </div>
          </div>
        </div>
      );
}

export default CornerStoneElement;

Answer 1

所以问题不在基石中。我所要做的就是将高度分配给渲染它的基石元素的父元素，它解决了这个问题。