在React功能组件中使用Cornerstone.js中的堆栈滚动工具时，如何访问“Cornerstone.js”？

Question

目前，我正在React组件中成功地显示一堆图像，但不确定在滚动时将事件侦听器放在何处以访问currentImageIdIndex。

import React, { useEffect, useRef, useCallback } from "react";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import cornerstoneFileImageLoader from "cornerstone-file-image-loader";
import Hammer from "hammerjs";

function StackImageViewport(props) {
  const viewerRef = useRef(null);

  const base64StringToArrayBuffer = useCallback((base64) => {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }, []);

  const initializeCornerstone = () => {
    // Initialise cornerstone and link to DOM element
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneFileImageLoader.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.init();
    cornerstone.enable(viewerRef.current);
  };

  const setCornerstoneTools = () => {
    // define Cornerstone Tools
    const StackScrollTool = cornerstoneTools.StackScrollTool;
    const StackScrollMouseWheelTool =
      cornerstoneTools.StackScrollMouseWheelTool;
    const WindowingTool = cornerstoneTools.WwwcTool;

    // Add tools

    cornerstoneTools.addTool(StackScrollTool);
    cornerstoneTools.addTool(StackScrollMouseWheelTool);
    cornerstoneTools.addTool(WindowingTool);

    // set tools to Active state
    cornerstoneTools.setToolActive("StackScroll", { mouseButtonMask: 1 });
    cornerstoneTools.setToolActive("StackScrollMouseWheel", {});
    cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
  };

  const displayStack = (stackMediaArray) => {
    let mediaArray = [];


    // 'stackMediaArray' is an array of images, each containing a buffer of the image
    Promise.all(
      stackMediaArray.map((mediaObject) => {
        return new Promise((resolve, reject) => {
          let imageBuffer = base64StringToArrayBuffer(mediaObject.buffer);
          const imageId =
            cornerstoneFileImageLoader.fileManager.addBuffer(imageBuffer);
          mediaArray.push(imageId);

          resolve(mediaObject);
        }).catch(console.error);
      })
    );

    //define the stack
    const stack = {
      currentImageIdIndex: 0,
      imageIds: mediaArray,
    };

    // load images and set the stack
    cornerstone.loadAndCacheImage(mediaArray[0]).then((image) => {
      cornerstone.displayImage(viewerRef.current, image);
      cornerstoneTools.addStackStateManager(viewerRef.current, ["stack"]);
      cornerstoneTools.addToolState(viewerRef.current, "stack", stack);
    });

    setCornerstoneTools();
  };

  useEffect(() => {
    if (!viewerRef.current) {
      return;
    }
    initializeCornerstone();
    displayStack(props.stackMediaArray);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [viewerRef]);

  return (
    <>
      <div ref={viewerRef} id="viewer" className="flex h-1/2-screen"></div>
    </>
  );
}

export default StackImageViewport;

这试图回答以下问题：

https://github.com/cornerstonejs/cornerstoneTools/issues/1121

但是，我不想访问DOM元素来添加事件侦听器。

同样清楚的是，事件在Cornertsone.js中是可以访问的：

https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/events.js

..。但我还是不知道把事件侦听器放在哪里？

任何帮助都将不胜感激。

谢谢。

Answer 1

当使用一个新工具(如CornerstoneJS 3，4用于医学影像 1，2 )时，聆听医学影像中的事件可能会让新用户感到困惑。然而，您可以使用window.addEventListener方法创建事件侦听器，就像在香草JavaScript 5中一样。请注意，这可能会从浏览器更改为移动环境4、5。此外，您的cornerstoneFileImageLoader也可以是是一种挑战。

为此，您可以遵循以下结构：

window.addEventListener('keydown', (event) => {
    ...
});

但是现在，我们需要理解“在哪里”来放置它。假设您的所有页面都是组件，因为ReactJS是组件式系统。这意味着事件侦听器需要在组件中发生。

例如，您可以这样做：

import React from 'react';

const App = (props) => {
  window.addEventListener('keydown', (event) => {
      ...
  });
  return (
    <div className='container'>
      <h1>Welcome to the Keydown Listening Component</h1>
    </div>
  );
};

参考文献

1 Francisco Maria Calisto、Carlos Santiago、Nuno Nunes和Jacinto C. Nascimento。2022年乳房筛选-AI:评估人-AI相互作用的医学智能代理。医学人工智能127,102285。https://doi.org/10.1016/j.artmed.2022.102285

2 Francisco Maria Calisto，Carlos Santiago，Nuno Nunes和Jacinto C. Nascimento。2021年。介绍以人类为中心的人工智能助手，帮助放射科医生进行多模态乳腺图像分类。国际人机学杂志150,102607。https://doi.org/10.1016/j.ijhcs.2021.102607

3 Francisco Maria Calisto，Nuno Nunes和Jacinto C. Nascimento。2020年。BreastScreening。高级视觉接口国际会议记录。https://doi.org/10.1145/3399715.3399744

4 Francisco M. Calisto、Alfredo Ferreira、Jacinto C. Nascimento和Daniel Gon alves。2017年。基于触觉的医学图像诊断注释。2017年ACM互动曲面与空间国际会议纪要。https://doi.org/10.1145/3132272.3134111

弗朗西斯科·玛丽亚·卡里斯托。2017年。医学影像多模乳腺癌诊断用户界面。硕士论文。https://doi.org/10.13140/RG.2.2.15187.02084