cornerstone Tools 测量工具配置篇

搭建具有实际使用价值的 Pacs 影像阅片系统，测量工具是必不可少的，在医生实际使用过程中，会对于有病灶的影像进行一些 2D 绘图操作，例如对于病灶的标记和测量。

目前 cornerstoneTools 中有多种测量工具，测量工具均是通过继承 BaseAnnotationTool 类实现，具体在 cornerstone Tools 基础概念 中已介绍，本篇将详细介绍 cronerstoneTools 中所有的测量工具的配置项。

测量工具 props 配置项

测量工具的通用配置

有一部分配置项是部分测量工具共有的，先提炼出来统一介绍，后面具体的测量工具介绍时将不再介绍。

* 目前支持的工具： * AngleTool、ArrowAnnotateTool、BidirectionalTool、CircleRoiTool、CobbAngleTool、 * EllipticalRoiTool、LengthTool、ProbeTool、RectangleRoiTool const props = { configuration : { // 在鼠标悬浮状态下是否显示控制柄，开启后鼠标未悬浮时则不显示控制柄，鼠标悬浮后显示控制柄 drawHandlesOnHover : false , // 在移动时是否隐藏控制柄 hideHandlesIfMoving : false , // 控制柄半径，默认为6 handleRadius : 6 * 目前支持的工具： * AngleTool、ArrowAnnotateTool、BidirectionalTool、CircleRoiTool、CobbAngleTool、 * FreehandRoiTool、EllipticalRoiTool、LengthTool、ProbeTool、RectangleRoiTool const props = { configuration : { // 测量线是否显示为虚线 renderDashed : false * 目前支持的工具： * AngleTool、ArrowAnnotateTool、BidirectionalTool、CobbAngleTool、FreehandRoiTool、 * LengthTool、ProbeTool、RectangleRoiTool const props = { configuration : { // 是否显示控制柄 drawHandles : true * shadow 阴影相关的配置项，这些配置项与 css 中的 text-shadow 类似，只不过配置时不需要添加单位 * 目前支持的工具： * AngleTool、ArrowAnnotateTool、BidirectionalTool、CircleRoiTool、CobbAngleTool、 * EllipticalRoiTool、LengthTool、RectangleRoiTool、TextMarkerTool const props = { configuration : { // 是否开启阴影 shadow : false , // 阴影颜色 shadowColor : "#000000" , // 阴影模糊程度 shadowBlur : 0 , // 阴影偏移量横坐标 shadowOffsetX : 1 , // 阴影偏移量纵坐标 shadowOffsetY : 1

AngleTool 角度测量

AngleTool 目前仅支持通用的配置项，无其它配置项。

ArrowAnnotateTool 箭头注释

const getTextCallback = function (doneChangingTextCallback) {
  const text = "要显示的注释";
  // 需要将填写的注释在回调函数中传参
  doneChangingTextCallback(text);
const changeTextCallback = function (
  data,
  eventData,
  doneChangingTextCallback
  const text = "修改后的注释";
  // 需要将修改后的注释在回调函数中传参
  doneChangingTextCallback(text);
const props = {
  configuration: {
    // 测量时是否以箭头开始，关闭时则以箭头结束
    arrowFirst: true,
    // 注释是否可以为空，开启时未填写注释时工具不会消失
    allowEmptyLabel: false,
    // 填写注释后的回调函数，通过该函数调整填写注释的页面展示和填写后的注释
    getTextCallback,
    // 修改注释后的回调函数，通过该函数调整修改注释的页面展示和修改后的注释
    changeTextCallback
BidirectionalTool 双向测量
BidirectionalTool 目前仅支持通用的配置项，无其它配置项。
CircleRoiTool 圆形测量
const props = {
  configuration: {
    // 中心操作点的半径
    centerPointRadius: 0
CobbAngleTool cobb 角度测量
CobbAngleTool 目前仅支持通用的配置项，无其它配置项。
EllipticalRoiTool 椭圆测量
const props = {
  configuration: {
    // 是否显示椭圆区域内最大与最小的 CT 值
    showMinMax: false,
    // 是否在 modality 为 CT 时，显示 CT 值的单位
    showHounsfieldUnits: false
FreehandRoiTool 多边形测量
const props = {
  configuration: {
    // 控制柄的间隔
    spacing: 1,
    // 控制柄的半径
    activeHandleRadius: 3,
    // 闭环时的控制柄半径，指的是首尾相接的控制柄半径
    completeHandleRadius: 6,
    // 是否一直显示控制柄
    alwaysShowHandles: false,
    // 无效标注时展示的颜色
    invalidColor: "crimson"
LengthTool 长度测量
const props = {
  configuration: {
    // 测量值保留小数位数
    digits: 2
ProbeTool 探针测量
ProbeTool 目前仅支持通用的配置项，无其它配置项。
RectangleRoiTool 矩形测量
const props = {
  configuration: {
    // 是否显示矩形区域内最大与最小的 CT 值
    showMinMax: false,
    // 是否在 modality 为 CT 时，显示 CT 值的单位
    showHounsfieldUnits: false
TextMarkerTool 文本标注
const doneChangingTextCallback = function (
  data,
  eventData,
  doneChangingTextCallback
  const text = "更新后的文本标注";
  // 需要将 data 与修改后的文本标注在回调函数中传参
  doneChangingTextCallback(data, text);
const props = {
  configuration: {
    // 文本标注集合，标注的文本需要放入数组中
    markers: [],
    // 当前的标注
    current: "",
    // 是否正序切换 markers 中的标注
    ascending: true,
    // 是否循环 markers 中的标注
    loop: false,
    // 修改文本标注后的回调函数，通过该函数调整修改文本标注的页面展示和修改后的注释
    doneChangingTextCallback
测量工具 props 配置项的使用
在项目初始化时，需要将测量工具全部添加，当需要使用时某一种测量工具时，需要激活该工具：
// 所有要用的测量工具均需要进行添加
const LengthTool = cornerstoneTools.LengthTool;
const lengthProps = {
  configuration: {
    drawHandlesOnHover: true,
    hideHandlesIfMoving: true,
    digits: 1
cornerstoneTools.addTool(LengthTool, lengthProps);
// 当用户选择要使用的测量工具后，激活改工具即可使用，每个鼠标按键只允许激活一种工具
cornerstoneTools.setToolActive("Length", { mouseButtonMask: 1 });
当需要清除图像上显示的测量标注时，需要先清空工具的 state 记录：
const element = document.getElementById("enabledElement");
cornerstoneTools.clearToolState(element, "Length");
// 刷新图像
cornerstone.updateImage(element);
当需要切换图像上的测量标注进行隐藏或者显示时：
const element = document.getElementById("enabledElement");
// 给指定的启用元素隐藏标注
cornerstoneTools.setToolDisabledForElement(element, "Length");
// 或者，直接将全部的启用元素隐藏标注
cornerstoneTools.setToolDisabled("Length");
// 刷新图像
cornerstone.updateImage(element);
// 给指定的启用元素显示标注
cornerstoneTools.setToolActiveForElement(element, "Length");
// 或者，直接将全部的启用元素显示标注
cornerstoneTools.setToolActive("Length");
// 刷新图像
cornerstone.updateImage(element);
测量工具 options 配置
options 配置项主要为标注数据操作与显示的区域的控制，该配置项不是在添加工具时配置，而需要单独调用 Api 进行配置。
const element = document.getElementById("enabledElement");
const options = {
  deleteIfHandleOutsideImage: true,
  preventHandleOutsideImage: false
// 给指定的启用元素添加工具配置
cornerstoneTools.setToolOptionsForElement(element, "Length", options);
// 或者，直接给全部的启用元素添加工具配置
cornerstoneTools.setToolOptions("Length", options);
最简单的例子
通过上述测量工具的配置项，我们就可以搭建个性化、工具配置化的 Pacs 系统测量功能：