基石工具不起作用（遵循文档后）答案

【问题标题】：Cornerstone Tools do not work (after following doc)基石工具不起作用（遵循文档后）
【发布时间】：2020-05-15 09:59:47
【问题描述】：

首先，请耐心等待这篇文章，因为这是我在平台上的第一个问题。目前我正在尝试使用 Cornerstone 显示一些 .dcm 图像。这已经奏效并且看起来不错。

但几天以来，我遇到了一个问题，即我无法从 Cornerstone 工具中获得一个简单的工具来使用它。我的目标是从 wwwc-tool 开始，然后是堆栈滚动。

我严格按照documentation 工作，但我根本不可能包含任何工具。我只是没有看到错误，也没有得到任何错误输出。

你能帮我解决这个问题吗？

import React, { useState, useEffect, useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import Hammer from "hammerjs";

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

cornerstoneTools.init();

export default function Dummy() {
  const dicomRef = useRef();

  const imageIds = [
    "wadouri:http://127.0.0.1:8080/api/challenges/1/series/1/images/1",
    "wadouri:http://127.0.0.1:8080/api/challenges/1/series/2/images/1",
    "wadouri:http://127.0.0.1:8080/api/challenges/1/series/3/images/1",
  ];

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

  // Add our tool, and set it's mode
  const { LengthTool } = cornerstoneTools;

  useEffect(() => {
    // Enable the DOM Element for use with Cornerstone
    const element = document.getElementById("navbar");
    cornerstone.enable(element);

    cornerstone.loadImage(`${imageIds[0]}`).then((image) => {
      cornerstone.displayImage(element, image);
      cornerstoneTools.addTool(LengthTool);
      cornerstoneTools.addToolForElement(element, LengthTool);
      cornerstoneTools.setToolActive(LengthTool.name, { mouseButtonMask: 1 });
    });
  }, []);

  return <div ref={dicomRef}>aaa</div>;
}

我的依赖如下：

"dependencies": {
"@material-ui/core": "^4.9.14",
"@material-ui/icons": "^4.9.1",
"bootstrap": "^4.5.0",
"cornerstone-core": "^2.2.4",
"cornerstone-math": "^0.1.6",
"cornerstone-tools": "^3.19.3",
"cornerstone-wado-image-loader": "^3.1.1",
"daikon": "^1.2.42",
"dicom-parser": "^1.8.5",
"hammerjs": "^2.0.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lottie-light": "^1.2.5",
"react-scripts": "3.4.1"},

我只想在返回 div 时显示带有工具的查看器。

【问题讨论】：

标签： javascript reactjs documentation cornerstone

【解决方案1】：

您可以尝试将useEffect() 更改为：

useEffect(() => {
    // Enable the DOM Element for use with Cornerstone
    const element = document.getElementById("navbar");
    cornerstone.enable(element);

    cornerstone.loadImage(`${imageIds[0]}`).then((image) => {
      const viewport = cornerstone.getDefaultViewportForImage(element, image);
      cornerstone.displayImage(element, image, viewport);
      const LengthTool = cornerstoneTools.LengthTool;
      cornerstoneTools.addTool(LengthTool)
      cornerstoneTools.setToolActive('Length', { mouseButtonMask: 1 })
    });
  }, []);

【讨论】：