cornerstoneTools--ReferenceLinesTool 参考线使用记录（Vue3）

ReferenceLinesTool参考线工具

功能：实现两个及多个序列图像，鼠标滚轮翻页时参考定位线位置同步更新。
研究了一整天终于搞出效果来了，记录一下，能帮到友友们更好！

示例图

话不多说，直接上代码

import { ref, onMounted } from 'vue'
import cornerstone from 'cornerstone-core'
import cornerstoneTools from 'cornerstone-tools'
import cornerstoneMath from 'cornerstone-math'
import dicomParser from 'dicom-parser'
import Hammer from 'hammerjs'
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'

cornerstoneTools.external.cornerstone = cornerstone
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
cornerstoneTools.external.Hammer = Hammer
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
cornerstoneWADOImageLoader.external.dicomParser = dicomParser

//初始化
cornerstoneTools.init({
  showSVGCursors: true
})
//
const firstElement = ref<HTMLElement>()
const secondElement = ref<HTMLElement>()

//这里是两组模拟的dicom序列图像
//要保证这两组图像是相关的序列图，不然显示不出来参考线！！！
const firstSeries = [
  'wadouri:http://192.168.120.11:5012/test-data/1.dcm', //格式要正确 wadouri:路径
  'wadouri:http://192.168.120.11:5012/test-data/2.dcm',
  'wadouri:http://192.168.120.11:5012/test-data/3.dcm',
  'wadouri:http://192.168.120.11:5012/test-data/4.dcm',
]
const secondSeries = [
  'wadouri:http://192.168.120.11:5012/upload-data/1.dcm',
  'wadouri:http://192.168.120.11:5012/upload-data/2.dcm',
  'wadouri:http://192.168.120.11:5012/upload-data/3.dcm',
  'wadouri:http://192.168.120.11:5012/upload-data/4.dcm',
]

//注册同步器
const synchronizer = new cornerstoneTools.Synchronizer(
  'cornerstonenewimage',
  cornerstoneTools.updateImageSynchronizer
)

//加载dicom图像
const loadDicom = async (element: HTMLElement, imageIds: string[]) => {
  cornerstone.enable(element)
  const image: Object = await cornerstone.loadAndCacheImage(imageIds[0])
  loadImage(element, imageIds, image)
  preloadDicoms(imageIds)
}
//预加载
const preloadDicoms = (imageIds: string[]) => {
  return new Promise(() => {
    imageIds.forEach(async (id) => {
      await cornerstone.loadAndCacheImage(id)
    })
  })
}
//
const loadImage = (element: HTMLElement, imageIds: string[], image: Object) => {
  const defaultViewport = cornerstone.getDefaultViewportForImage(element, image)
  cornerstone.displayImage(element, image, defaultViewport)
  cornerstoneTools.addStackStateManager(element, ['stack'])
  const stack = {
    currentImageIdIndex:  0,
    imageIds
  }
  cornerstoneTools.addToolState(element, 'stack', stack)
  
  //同步器中添加需要同步的元素
  synchronizer.add(element)
  
  //添加工具
  cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollTool)
  cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)
  cornerstoneTools.addToolForElement(element, cornerstoneTools.ReferenceLinesTool)

  //激活工具
  cornerstoneTools.setToolActiveForElement(element, 'StackScroll', {
    mouseButtonMask: 1
  })
  cornerstoneTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {
    mouseButtonMask: 4
  })
  cornerstoneTools.setToolEnabledForElement(element, 'ReferenceLines', {
    synchronizationContext: synchronizer
  })
}

onMounted(() => {
  if (firstElement.value) {
    loadDicom(firstElement.value, firstSeries)
  }
  if (secondElement.value) {
    loadDicom(secondElement.value, secondSeries)
  }
})

目前只试用了MR的图像，是可以正常显示的，CT的还未试用

完整代码

参考示例及文章

cornerstoneTool官网也有提供定位线工具示例：
tools.cornerstonejs.org/examples/to…
掘金上一位大佬的文章:
juejin.cn/post/721114…