Сделать пагинацию в кусочках папайи DICOM Viewer, используя JavaScript

Question

Я использую API папайи от GitHub

В этой программе просмотра папайи я хочу интегрировать несколько вещей.

Одним из них является нумерация страниц. если я пытаюсь редактировать этот API, я получаю сообщение об ошибке

Что я хочу:-

1. В программе просмотра папайи NEXT, PREV работает нормально, но я хочу, чтобы при нажатии на кнопку ПЕРВЫЙ и последний срез перемещался.
2. А также нумерация страниц будет 1,2,3,4... Если щелкнуть ОДИН, должен появиться первый срез.

Заранее спасибо

Answer 1

После того, как вы загрузите программу просмотра изображений Papaya Medical Research, выберите файл рабочей папки для тестирования, чтобы вы могли понять, как работает программа просмотра папайи Dicom.

Шаг 1:-

В папке js откройте файл constants.js и создайте константы

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

Шаг 2:-

Теперь откройте 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> ");
}

Шаг 4:-

Приведенные ниже функции важны для перемещения фрагментов 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);
};

объяснение

1. viewer.js подсчитал общее количество ломтиков this.volume.header.imageDimensions.zDim; и сохранил общее количество в переменной Max. Если this.currentCoord.z = max; Это будет идти до последнего куска, если this.currentCoord.z = 0; Это переместится к первому срезу.
2. При разбиении на страницы кликните, чтобы передать значение данных в функцию нумерации viewer.js и, если this.currentCoord.z = id(id <=> data-value). Он будет перемещен в определенный фрагмент.

После нажатия с помощью этой функции this.gotoCoordinate(this.currentCoord); ломтик переместится.