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(){});

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

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

vue全家桶搭建后台系统（小菜鸟篇一）
一.前言一直在vue的门边徘徊的小菜鸟终于下定决心来继续深入学习啦(
服务器中搭建OA系统,云服务器搭建oa系统
云服务器搭建oa系统内容精选换一换云服务器创建后区域固定,不能将云服务器转移到另一个区域,也不能将云服务器转移到另一个帐号.您可以通过镜像迁移方式实现云服务器的跨帐号跨区域迁移.服务器迁移的常见 ...
服务器如何搭建oa系统,云服务器搭建oa系统
云服务器搭建oa系统内容精选换一换本节操作介绍购买云耀云服务器的操作步骤.购买时,为减少您配置参数的时间,部分参数由系统自动分配,以下参数配置供你了解系统的默认配置.购买云耀云服务器仅支持&qu ...
Flask + Vue 搭建简易系统步骤总结
之前一段时间一直在学习 python,后来在项目中用 weex 时接触到了 vue.js,本来 python 是自己想学的一门脚本技术,weex 是项目需要,必须了解些 vue.js 方面的语法,所以 ...
【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——③项目开发中引入vue-router，并进行配置
1.引入vue - router :搜索vue-router,打开vue-router官方文档 2.由于本项目基于vue2开发,因此将官网切换到v3.x版本,在导航-安装目录下选择npm安装方式安 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码221604
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
基于Go语言GoFrame+Vue+ElementUI的OA办公系统
项目介绍一款 Go 语言基于GoFrame.Vue.ElementUI.MySQL等框架精心打造的一款模块化.插件化.高性能的前后端分离架构敏捷开发框架,可快速搭建前后端分离后台管理系统,本着简化开 ...

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

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