【cornerstoneTools】【vue】使用cornerstoneTools搭建标注系统相关代码

即使是Google上搜到的博客也是GitHub的issues，相关资料较少，文档也近似没有。
文档（太写意了，形散神也散）

---

cornerstoneTools引入

import * as cornerstone from 'cornerstone-core'
// import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader'

import * as cornerstoneTools from 'cornerstone-tools';
import Hammer from 'hammerjs';
import * as cornerstoneMath from 'cornerstone-math';

cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;

cornerstoneTools.init(
    {
      showSVGCursors: true,
    }
);

注册cornerstoneTools工具

放在vue的mounted中

	const element = document.getElementById('dicomimage');
	
    cornerstone.enable(element);
    cornerstone.registerImageLoader('example', this.getExampleImage);

    this.img_show_element = element;
    this.img_show_element.tabIndex = 0;
    this.img_show_element.focus();
	
	// 多边形标注
	const FreehandRoiTool = cornerstoneTools.FreehandRoiTool;
    cornerstoneTools.addTool(FreehandRoiTool)
    // cornerstoneTools.setToolActive('FreehandRoi', { mouseButtonMask: 1 })
    // 滑轮放大
    const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
    cornerstoneTools.addTool(ZoomMouseWheelTool)
    cornerstoneTools.setToolActive('ZoomMouseWheel', { mouseButtonMask: 1 })
    
    // 平移工具
    // const PanTool = cornerstoneTools.PanTool;
    // cornerstoneTools.addTool(PanTool)
    // cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 })
    
    // 橡皮擦工具
    const EraserTool = cornerstoneTools.EraserTool;
    cornerstoneTools.addTool(EraserTool)

cornerstone 右键平移

放在vue的mounted中

element.addEventListener('mousedown', function (e) {
      let lastX = e.pageX;
      let lastY = e.pageY;
      const mouseButton = e.which;

      function mouseMoveHandler(e) {
        const deltaX = e.pageX - lastX;
        const deltaY = e.pageY - lastY;
        lastX = e.pageX;
        lastY = e.pageY;
        if (mouseButton === 3) {
          // 鼠标右键
          let viewport = cornerstone.getViewport(element);
          viewport.translation.x += (deltaX / viewport.scale);
          viewport.translation.y += (deltaY / viewport.scale);
          cornerstone.setViewport(element, viewport);
        }
      }
      function mouseUpHandler() {
        document.removeEventListener('mouseup', mouseUpHandler);
        document.removeEventListener('mousemove', mouseMoveHandler);
      }

      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    });

标注工具的切换

由对应button的click调用

	FreehandRoi_activate(){
      cornerstoneTools.setToolDisabled('Eraser');
      cornerstoneTools.setToolActive('FreehandRoi', { mouseButtonMask: 1 });
    },
    Eraser_activate(){
      cornerstoneTools.setToolDisabled('FreehandRoi');
      cornerstoneTools.setToolActive('Eraser', { mouseButtonMask: 1 });
    },

初始化标注

以FreehandRoi为例：

firstLoadData为列表，可通过console.log复制ToolState来模拟：

const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
ToolStateManager.restoreImageIdToolState(imageId, {
  FreehandRoi: { data: firstLoadData }
});
cornerstoneTools.addTool(cornerstoneTools.FreehandRoiTool);
cornerstoneTools.setToolPassive("FreehandRoi");

获取标注数据toolState

let markings = cornerstoneTools.getToolState(this.img_show_element, 'FreehandRoi');

注意获取的markings是内存中的浅拷贝，也就是说直接修改就会影响对应的标注

使用橡皮擦Eraser后其他标注会暂时消失(remove事件)

监测MEASUREMENT_REMOVED事件，执行setToolEnabled

放在vue的mounted中:

element.addEventListener(cornerstoneTools.EVENTS.MEASUREMENT_REMOVED, function(evt){
      cornerstoneTools.setToolEnabled('FreehandRoi', { mouseButtonMask: 1 });
    });

cornerstone支持的所有events事件可参考cornerstoneTools/src/events.js

检测创建标注结束事件、修改标注事件

注意：每次创建标注完成会调用MEASUREMENT_COMPLETED其中每次点击也会调用MEASUREMENT_MODIFIED,而每次修改时两者都会被调用。（本人通过判断ToolState中data的length是否发生变动来判断）。

放在vue的mounted中:

	element.addEventListener(cornerstoneTools.EVENTS.MEASUREMENT_COMPLETED, function(evt){
      const eventData = evt.detail;
      // measurementData 即为刚刚完成的标注
      const measurementData = eventData.measurementData;
    });
    element.addEventListener(cornerstoneTools.EVENTS.MEASUREMENT_MODIFIED, function(){
      
    });

---

本人才疏学浅，若有错误请见谅