基于cornerstone3D的dicom影像浏览器第十七章同步滚动-CSDN博客

本文链接：https://blog.csdn.net/weixin_44138414/article/details/147977683

系列文章目录

第一章下载源码运行cornerstone3D example
第二章修改示例crosshairs的图像源
 第三章 vite+vue3+cornerstonejs项目创建
 第四章加载本地文件夹中的dicom文件并归档
 第五章 dicom文件生成png，显示检查栏，序列栏
 第六章 stack viewport 显示dicom序列
 第七章在Displayer四个角落显示文字
 第八章在Displayer中显示图像方位
 第九章自动加载、清空显示、修改布局
 第十章显示标尺
 第十一章测量工具
 第十二章镜像、负像、旋转、伪彩、复位
 第十三章自定义垂直滚动条
 第十四章参考线、同步调窗、同步缩放、同步移动
 第十五章预设窗值
 第十六章工具栏svg按钮

前言

同步滚动与第十四章的同步操作区别较大，所以单独作一章。
同步滚动利用cornerstoneTools的synchronizers实现，准确的说应该是同步位置
效果如下，请观察第二窗口和第四窗口中的图像位置
在这里插入图片描述

一、工具栏

工具栏(Toolbar)添加元素及响应事件不再赘述，请参考第十四章

二、修改initTool.js

导入cornerstoneTools中的synchronizers，SynchronizerManager，createImageSliceSynchronizer

import * as cornerstoneTools from "@cornerstonejs/tools";
const {
	...
	StackScrollTool,
	WindowLevelTool,
	...
	synchronizers,
	SynchronizerManager
} = cornerstoneTools;

const { createImageSliceSynchronizer } = synchronizers;

创建同步器

const imageSliceSync = "IMAGE_SLICE_SYNCHRONIZER_ID";
function initTools() {
	...
	toolGroup.addTool(WindowLevelTool.toolName);
	toolGroup.addTool(PanTool.toolName);
	...
	toolGroup.addTool(LengthTool.toolName);
	toolGroup.addTool(AngleTool.toolName);
	toolGroup.addTool(RectangleROITool.toolName);
	...

	toolGroup.setToolActive(WindowLevelTool.toolName, {
		bindings: [
			{
				mouseButton: MouseBindings.Primary // Left Click
			}
		]
	});
	...

	// 创建同步器
	createImageSliceSynchronizer(imageSliceSync);
}

增加两个导出函数
addImageSliceSync 添加要同步滚动的viewport
removeImageSliceSync 移除同步滚动的viewport

function addImageSliceSync(viewportId) {
	const synchronizer = SynchronizerManager.getSynchronizer(imageSliceSync);
	if (synchronizer) {
		synchronizer.add({ renderingEngineId, viewportId });
	}
}

function removeImageSliceSync(viewportId) {
	const synchronizer = SynchronizerManager.getSynchronizer(imageSliceSync);
	if (synchronizer) {
		synchronizer.remove({ renderingEngineId, viewportId });
	}
}

export {
	initTools,
	...
	addImageSliceSync,
	removeImageSliceSync
};

三、修改DispalyerArea

在DisplayerArea中增加监控appStore.syncOperation.syncRoll，当在工具栏中勾选“同步滚动”时，
appStore.syncOperation.syncRoll为true，把所有Displayer都添加到同步器。
或者取消勾选，则把所有Displayer都从同步器中移除。

import { setReferenceSource, addImageSliceSync, removeImageSliceSync } from "../cornerstone3D/initTools";

watch(()=>appStore.syncOperation.syncRoll, (val) => {
    if (val) {
        for (let i = 0; i < dispRefs.length; i++) {
            const disp = dispRefs[i];
            addImageSliceSync(disp.getViewportId());
        }
    } else {
        for (let i = 0; i < dispRefs.length; i++) {
            const disp = dispRefs[i];
            removeImageSliceSync(disp.getViewportId());
        }
    }
});

四、修改Displayer

当Displayer加载新序列时，如果有勾选“同步滚动”，则把Displayer添加到同步器中

import { toolGroup, addImageSliceSync } from "../cornerstone3D/initTools";

const load = (series, idx, isSeries) => {
    ...
    init();
    toolGroup.addViewport(viewportId, renderingEngineId);
	// 添加到同步滚动器
    if (appStore.syncOperation.syncRoll) {
        addImageSliceSync(viewportId);
    }
    state.viewport.setStack(state.imageIds);
    state.viewport.render();

}