在HTML5医学影像浏览器中计算矩形和椭圆标注的面积

发布时间:2017/04/06 00:04 发布者:Richard.Ma

返回博客中心

LEADTOLS Html5 Web viewer 提供了各种样式以及自定义的影像标注功能,有些时候,需要对一些矩形或者椭圆计算面积以用于医学影像分析,该教程将讲述如何实现面积的计算

源码位置:LEADTOOLS 19\Examples\DotNet\PACSFramework\MedicalWebViewer\JS\MedicalWebViewerDemo

如果想在HTML5 Medical Web Viewer演示中执行此计算,你可以在绘制或编辑AnnAutomation的事件中添加计算方法。 当绘制注释时,绘制事件将触发。并且编辑事件将在编辑注释的任何时间触发,因此计算的结果将与注释的当前大小保持一致。

操作步骤:

  1. 在 VS中打开如上位置的JSMedicalWebViewerDemo源码
  2. 在JSMedicalWebViewerDemo中,找到MedicalWebViewerController.ts,你可以在NewCellsAdded事件下中添加此功能。 如下所示(深蓝色部分为新添加的代码):

eventService.subscribe(EventNames.NewCellsAdded, function (event, data) {
    var cells: Array<lt.Controls.Medical.Cell> = data.args.cells;
    var length = cells.length; 
    var tabIndex: number = tabService.activeTab;
    var tab: Models.Tab = tabIndex != -1 ? tabService.get_allTabs()[tabIndex] : null;            

    for (var index: number = 0; index < length; index++) {
        var cell: lt.Controls.Medical.Cell = cells[index];
        if (cell == null)
            continue;
        var automation = cell.get_automation();
        if (automation == null)
            continue;
        var viewer: lt.Controls.Medical.AutomationImageViewer = cell.get_imageViewer();
        //在一个图形被绘制完成后计算其面积
        automation.add_draw(function (sender, e) {
            if (e.get_operationStatus() == lt.Annotations.Core.AnnDesignerOperationStatus.end) {
                var annRect = e.object.bounds;
                var annPixels = automation.container.mapper.rectFromContainerCoordinates(annRect, lt.Annotations.Core.AnnFixedStateOperations.none);
                if (e.object.id == lt.Annotations.Core.AnnObject.rectangleObjectId) {
                    var annArea = annPixels.width * annPixels.height;
                    console.log('Aara of Rectangle Annotation=' + annArea);
                }
                if (e.object.id == lt.Annotations.Core.AnnObject.ellipseObjectId) {
                    var ellipseArea = Math.PI * (annPixels.width / 2) * (annPixels.height / 2);
                    console.log('Aara of Ellipse Annotation=' + ellipseArea);
                }

            }
        });
        //在一个图形被修改完成后计算其面积
        automation.add_edit(function (sender, e) {
            if (e.get_operationStatus() == lt.Annotations.Core.AnnDesignerOperationStatus.end) {
                var annRect = e.object.bounds;
                var annPixels = automation.container.mapper.rectFromContainerCoordinates(annRect, lt.Annotations.Core.AnnFixedStateOperations.none);
                if (e.object.id == lt.Annotations.Core.AnnObject.rectangleObjectId) {
                    var annArea = annPixels.width * annPixels.height;
                    console.log('Aara of Rectangle Annotation=' + annArea);
                }
                if (e.object.id == lt.Annotations.Core.AnnObject.ellipseObjectId) {
                    var ellipseArea = Math.PI * (annPixels.width / 2) * (annPixels.height / 2);
                    console.log('Aara of Ellipse Annotation=' + ellipseArea);
                }

            }
        });

 

拷贝深蓝色的部分添加至如上所示的位置即可,添加的代码将在绘制或修改Rectangle或Ellipse注释时计算该区域,并将该区域打印到浏览器的控制台,修改代码即可用其他的方式展示计算的面积。

 

产品支持论坛:

您在使用产品过程中有任何疑问,可以登录葡萄城开发者社区进行交流:了解更多

了解LEADTOOLS 产品更多特性:

http://leadtools.grapecity.com.cn/

下载产品体验产品功能:

http://leadtools.grapecity.com.cn/downloads/


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网