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

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

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐