使用 javascript 在木瓜 dicom 查看器切片中进行分页

Question

我正在使用 github

的木瓜 API

在这个 papaya dicom 查看器中，我想整合一些东西。

一个是分页。如果我尝试编辑此 API，我会收到错误消息

我想要的:-

在木瓜查看器 NEXT 中，PREV 工作正常，但我想单击第一个和最后一个切片移动。
而且分页将是 1,2,3,4...如果单击第一个切片应该出现。

提前致谢

Answer 1

下载Papaya medical research image viewer后，选择工作test文件夹中的文件，以便您了解papaya Dicom viewer的工作原理。

第一步：-

在js文件夹中打开constants.js文件并创建常量

var MOVE_TO_FIRST_SLICE = "move-to-first-slice",
    MOVE_TO_LAST_SLICE = "move-to-last-slice";
    PAGINATION_LIST = "pagination-list";

第二步：-

现在打开 viewer.js，点击函数 FIRST、LAST 和 1,2,3.. . 切片(data-value).

    $(this.container.containerHtml.find("#" + MOVE_TO_FIRST_SLICE + this.container.containerIndex)).click(function () {
        viewer.firstLastSlice(false);
    });

    $(this.container.containerHtml.find("#" + MOVE_TO_LAST_SLICE + this.container.containerIndex)).click(function () {
        viewer.firstLastSlice(true)
    });

    $(this.container.containerHtml.find("." + PAGINATION_LIST + this.container.containerIndex)).click(function () {
        var id = $(this).data('value');
        viewer.pagination(id);
    });

第 3 步：- 并打开 main.js 并创建元素

papaya.Container.fillContainerHTML = function (containerHTML, isDefault, params, replaceIndex) {

containerHTML.append("<button type='button' id='"+ (MOVE_TO_FIRST_SLICE + index) + "' class='" + MOVE_TO_FIRST_SLICE + "'>First</button> ");
containerHTML.append("<button type='button' id='"+ (PAPAYA_CONTROL_MAIN_INCREMENT_BUTTON_CSS + index) + "' class='" + PAPAYA_CONTROL_MAIN_INCREMENT_BUTTON_CSS + "'><</button> ");

                var max = 23;
                var slice;
                for(slice=1; slice<=max; slice++){
containerHTML.append("<button id='"+ (PAGINATION_LIST + index) +"' class='"+ (PAGINATION_LIST + index) + "' data-value='" + slice + "'  OnClick(" + slice +") >" + slice + "</button>");
                    }

containerHTML.append("<button id='"+ (PAPAYA_CONTROL_MAIN_DECREMENT_BUTTON_CSS + index) + "' class='" + PAPAYA_CONTROL_MAIN_DECREMENT_BUTTON_CSS + "'>></button> ");              
                containerHTML.append("<button type='button' id='"+ (MOVE_TO_LAST_SLICE + index) + "' class='" + MOVE_TO_LAST_SLICE + "'>Last</button> ");
               containerHTML.append("<button type='button' id='"+ (GET_MAX_VALUE + index) + "' class='" + GET_MAX_VALUE + index + "'>TesT</button> ");
}

第四步：-

下面的函数对于移动切片很重要viewer.js

//pagination 1,2,3
papaya.viewer.Viewer.prototype.pagination = function (id, paginationList) {
    var max =  this.volume.header.imageDimensions.zDim;
    //console.log(id);
    this.currentCoord.z = id;
    this.gotoCoordinate(this.currentCoord);

   };

// firstLastSlice
papaya.viewer.Viewer.prototype.firstLastSlice = function (flSlice, degree) {
    var max = this.volume.header.imageDimensions.zDim;
    if (degree === undefined) {
        degree = 0; 
    }

    if (flSlice) {
        this.currentCoord.z = max;
    } else {
        this.currentCoord.z = 0;
    }

    this.gotoCoordinate(this.currentCoord);
};

说明

viewer.js 计算总片数 this.volume.header.imageDimensions.zDim; 并将总片数存储在 Max 中变量。如果 this.currentCoord.z = max; 它将转到最后一个切片，如果 this.currentCoord.z = 0; 它将移动到第一个切片。
在点击分页时将 data-value 传递给 viewer.js 分页函数，如果 this.currentCoord.z = id(id <=> data-value ) 它将移动到特定的切片。

使用此功能点击后this.gotoCoordinate(this.currentCoord);切片会移动。

使用 javascript 在木瓜 dicom 查看器切片中进行分页

make pagination in papaya dicom viewer slices using javascript

javascript

jquery

papaya