基于cornerstone3D的dicom影像浏览器第二十八章 LabelTool文字标记，L标记，R标记及标记样式设置

文章目录

前言
一、L标记、R标记
二、修改工具样式
- 1. 样式的四种级别
- 2. 导入annotation
- 3. 示例1 - 修改toolGroup中的样式
- 4. 示例2 - 修改viewport中的样式
三、可配置样式

前言

cornerstone3D 中的文字标记工具LabelTool，在添加文字标记时会弹出对话框让用户输入文字，所以可以添加任意文字。
本章通过设置LabelTool的getTextCallback函数，使用户可以直接添加指定的文字，不再弹出输入文字的对话框，从而实现L标记，R标记。
另外介绍标记工具的样式设置方法，以改变工具的颜色、文字等。
效果如下：
在这里插入图片描述

一、L标记、R标记

toolGroup调用setToolConfiguration函数，设置LabelTool工具的getTextCallback为自定义函数。

activeLabelTool(type) {toolGroup.setToolActive(type, {[{ mouseButton: MouseBindings.Primary }]});if (type==="Label-L" || type==="Label-R") {const text = type.split("-")[1];toolGroup.setToolConfiguration(LabelTool.toolName,{getTextCallback: fn => {return fn(text);},});} else if (type==="Label") {// 恢复LabelTool默认回调函数toolGroup.setToolConfiguration(LabelTool.toolName,{getTextCallback: fn => {return fn(prompt("Enter your annotation:"));}});}
}

二、修改工具样式

1. 样式的四种级别

cornerstone3D 中提供四种级别的标注样式修改方法：

单个标注样式(需提供annotationUID)，优先级最高：set/getAnnotationToolStyle
viewport中所有标注样式，优先级次之：set/getViewportToolStyle
toolGroup中所有标注样式，优先级又次之：set/getToolGroupToolStyle
默认所有标注样式，优先级最低：set/getDefaultToolStyle

每种级别中又可指定设置单个Tool的样式或所有Tool的样式，如：

annotation.config.style.setToolGroupToolStyles(toolGroupId, { // 修改LabelTool字体[LabelTool.toolName]: { textBoxFontSize: "28px" } // 修改LengthTool字体[Length.toolName]: { textBoxFontSize: "20px" }// 修改toolGroup中所有Tool字体global: { textBoxFontSize: "12px" }}
);

2. 导入annotation

import * as cornerstoneTools from "@cornerstonejs/tools";const {annotation
} = cornerstoneTools;

3. 示例1 - 修改toolGroup中的样式

function initTools() {...// 操作cornerstoneTools.addTool(WindowLevelTool);cornerstoneTools.addTool(PanTool);cornerstoneTools.addTool(ZoomTool);cornerstoneTools.addTool(StackScrollTool);...// 修改toolGroup中的样式annotation.config.style.setToolGroupToolStyles(toolGroupId, { // 修改LabelTool字体[LabelTool.toolName]: { textBoxFontSize: "28px" },// 修改LengthTool字体[LengthTool.toolName]: { textBoxFontSize: "20px" },// 修改toolGroup中所有Tool字体global: { textBoxFontSize: "12px" }});
}

效果：
在这里插入图片描述

4. 示例2 - 修改viewport中的样式


function setVieportToolStyles(viewportId) {annotation.config.style.setViewportToolStyles(viewportId, {// 修改LabelTool字体[LabelTool.toolName]: { textBoxFontSize: "60px" },// 修改viewport中所有Tool字体global: { textBoxFontSize: "8px" }});
}

效果：
在这里插入图片描述

三、可配置样式

color;  
colorActive;  
colorHighlighted;  
colorHighlightedActive;  
colorHighlightedPassive;  
colorLocked;  
colorLockedActive;  
colorLockedPassive;  
colorPassive;  
colorSelected;  
colorSelectedActive;  
colorSelectedPassive;  
lineDash;  
lineDashActive;  
lineDashHighlighted;  
lineDashHighlightedActive;  
lineDashHighlightedPassive;  
lineDashLocked;  
lineDashLockedActive;  
lineDashLockedPassive;  
lineDashPassive;  
lineDashSelected;  
lineDashSelectedActive;  
lineDashSelectedPassive;  
lineWidth;  
lineWidthActive;  
lineWidthHighlighted;  
lineWidthHighlightedActive;  
lineWidthHighlightedPassive;  
lineWidthLocked;  
lineWidthLockedActive;  
lineWidthLockedPassive;  
lineWidthPassive;  
lineWidthSelected;  
lineWidthSelectedActive;  
lineWidthSelectedPassive;  
textBoxBackground;  
textBoxBackgroundActive;  
textBoxBackgroundHighlighted;  
textBoxBackgroundHighlightedActive;  
textBoxBackgroundHighlightedPassive;  
textBoxBackgroundLocked;  
textBoxBackgroundLockedActive;  
textBoxBackgroundLockedPassive;  
textBoxBackgroundPassive;  
textBoxBackgroundSelected;  
textBoxBackgroundSelectedActive;  
textBoxBackgroundSelectedPassive;  
textBoxColor;  
textBoxColorActive;  
textBoxColorHighlighted;  
textBoxColorHighlightedActive;  
textBoxColorHighlightedPassive;  
textBoxColorLocked;  
textBoxColorLockedActive;  
textBoxColorLockedPassive;  
textBoxColorPassive;  
textBoxColorSelected;  
textBoxColorSelectedActive;  
textBoxColorSelectedPassive;  
textBoxFontFamily;  
textBoxFontFamilyActive;  
textBoxFontFamilyHighlighted;  
textBoxFontFamilyHighlightedActive;  
textBoxFontFamilyHighlightedPassive;  
textBoxFontFamilyLocked;  
textBoxFontFamilyLockedActive;  
textBoxFontFamilyLockedPassive;  
textBoxFontFamilyPassive;  
textBoxFontFamilySelected;  
textBoxFontFamilySelectedActive;  
textBoxFontFamilySelectedPassive;  
textBoxFontSize;  
textBoxFontSizeActive;  
textBoxFontSizeHighlighted;  
textBoxFontSizeHighlightedActive;  
textBoxFontSizeHighlightedPassive;  
textBoxFontSizeLocked;  
textBoxFontSizeLockedActive;  
textBoxFontSizeLockedPassive;  
textBoxFontSizePassive;  
textBoxFontSizeSelected;  
textBoxFontSizeSelectedActive;  
textBoxFontSizeSelectedPassive;  
textBoxLinkLineDash;  
textBoxLinkLineDashActive;  
textBoxLinkLineDashHighlighted;  
textBoxLinkLineDashHighlightedActive;  
textBoxLinkLineDashHighlightedPassive;  
textBoxLinkLineDashLocked;  
textBoxLinkLineDashLockedActive;  
textBoxLinkLineDashLockedPassive;  
textBoxLinkLineDashPassive;  
textBoxLinkLineDashSelected;  
textBoxLinkLineDashSelectedActive;  
textBoxLinkLineDashSelectedPassive;  
textBoxLinkLineWidth;  
textBoxLinkLineWidthActive;  
textBoxLinkLineWidthHighlighted;  
textBoxLinkLineWidthHighlightedActive;  
textBoxLinkLineWidthHighlightedPassive;  
textBoxLinkLineWidthLocked;  
textBoxLinkLineWidthLockedActive;  
textBoxLinkLineWidthLockedPassive;  
textBoxLinkLineWidthPassive;  
textBoxLinkLineWidthSelected;  
textBoxLinkLineWidthSelectedActive;  
textBoxLinkLineWidthSelectedPassive;