cornerstone使用工具API

cornerstone的相关依赖库cornerstoneTools提供了非常多有用的功能，包含标注，测量，计算，和基本的图形处理工具，使用cornerstoneTools必须先在项目当中安装cornerstone-tools，cornerstone-math，hammerjs三个工具

yarn add cornerstone-tools
yarn add cornerstone-math
yarn add hammerjs

注意：这里node版本在16.10以上

按照官方文档demo的写法，引入方式是这样的：

import * as cornerstoneTools from "cornerstone-tools"
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstone from "cornerstone-core"
import Hammer from "hammerjs";

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

引入工具的格式为：

const XXX = cornerstoneTools.ToolsName

ToolsName是工具的名称，可以在cornerstoneTools的工具API文档中查找

页面左侧部分就是对应的工具名称，以一个简单的工具LengthTool为例，这个工具的作用是标注直线并测距。

如果希望在dicom上使用这个工具，那么就需要在loadImage的Promise对象内添加并激活这个工具。

• 使用addTool函数添加工具，函数有两个参数，第一个是要添加的工具，这个是必需要传入的，第二个是传入工具的自定义配置，这个是可选的，如果传入了第二个参数，那么会覆盖原来的自定义配置，例：

cornerstoneTools.addTool(cornerstoneTools.LengthTool);

• 使用setToolActive函数激活工具，函数有两个必需要传入的参数，第一个是工具名（String），第二个是交互方式（Object），工具名通常是工具的函数名去除Tool，如LengthTool的工具名就是Length。交互方式的对象通常用来指定鼠标事件，将值赋给mouseButtonMask属性。

{ mouseButtonMask: 1 }  //鼠标左键点击触发
{ mouseButtonMask: 2 }  //鼠标右键点击触发
{ mouseButtonMask: 4 }  //鼠标滚轮键点击触发

一个完整的demo代码：

App.js:

import Viewer from "./Viewer";

const baseUrl = 'https://localhost/wado?requestType=WADO&studyUID=1.2.194.0.108707908.20200408091149.1350.12100.20947723&seriesUID=1.2.840.113619.2.334.3.481051920.863.1585889971.875.4&objectUID='

const Series = [
  '1.2.840.113619.2.334.3.481051920.863.1585889971.944.1',
]

const Stack = {
  currentImageIdIndex: 0,
  imageIds: Series
    .map(seriesImage => `${baseUrl}${seriesImage}`),
};

function App() {
  return (
    <Viewer stack={Stack}></Viewer>
  );
}

export default App;

Viewer.js:

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";
import { useEffect } from "react";

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

const LengthTool = cornerstoneTools.LengthTool;

const Viewer =(props) => {
    var ImageIds = props.stack.imageIds
    useEffect(() => {
        var element = document.getElementById("test")
        cornerstoneTools.init();
        cornerstone.enable(element)
        cornerstone.loadImage(ImageIds[0]).then((image) => {
            cornerstone.displayImage(element, image);
            cornerstoneTools.addTool(LengthTool);
            cornerstoneTools.setToolActive("Length", { mouseButtonMask: 1 })
        });
    }, [])

    return (
        <div id="test" style={{width:"800px",height:"800px"}}>
            <canvas className="cornerstone-canvas" />
        </div>
    );
}

export default Viewer

此外，专栏里还会写一篇常用的工具函数名，工具名，及工具说明的查询文档