问题

cornerstoneTools工具里并没有可直接引用的撤销工具。而里面的EraserTool工具虽然可以实现擦除选中的数据（包括最后一条），但如果需求是点击按钮就撤销返回上一步呢？

EraserTool 橡皮擦

我们先了解一下EraserTool橡皮擦工具的用法。EraserTool可直接引用。

const EraserTool = cornerstoneTools.EraserTool
cornerstoneTools.addToolForElement(element, EraserTool)
//激活工具
cornerstoneTools.setToolActiveForElement(element, "Eraser", { mouseButtonMask: 1 })

撤销-返回上一步

实现思路

大概思路是记录每一条数据，在点击撤销后，找到记录里最后一条对应cornerstoneTool.getToolState里的数据进行删除。

如何记录数据呢？

1. 在项目utils文件夹里新建LengthTool.js，在github源码里找到LengthTool.js文件ctrl cv，下面做一些修改，存储数据。

（需要撤销的工具测量数据都需要存储！！！就是说需要创建多个对应工具文件进行修改）

2. store/index.js

const measures = ref([])
const updateMeasures = (measures) => {
   measures.value.push(measures)
}

3. 在cornerstoneTool上注册工具时，要引入我们修改的LengthTool文件

import LengthTool from '../utils/LengthTool.js'
cornerstoneTools.LengthTool = LengthTool

4. 撤销操作

   //measures：记录的数据
if (measures.value.length) {
   const lastMeasure = measures.value[measures.value.length - 1]
   //这里是判断最后一条数据的类型（长度，角度，注释等其他的测量数据）
   if (lastMeasure.length) {
      let toolData = cornerstoneTools.getToolState(dicomRef.value, 'Length')
      toolData?.data.pop() 
   } else if (lastMeasure.rAngle) {
      const toolData = cornerstoneTools.getToolState(dicomRef.value, 'Angle')
      toolData?.data.pop()   
   } else {
      const toolData = cornerstoneTools.getToolState(dicomRef.value, 'ArrowAnnotate')
      toolData?.data.pop()
   }
   measures.value.pop()
}
//更新视图
cornerstone.updateImage(dicomRef.value)

cornerstoneTools-如何实现撤销返回上一步

问题