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

news2025/7/24 3:58:59

文章目录

前言
一、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;