Openseadragon несколько холстов с Paperjs - PullRequest
Новая
       21

Openseadragon несколько холстов с Paperjs

0 голосов
/ 04 мая 2019

Проблема: в аннотациях paperjs с несколькими холстами

1.Openseadragon: 

   var compareViewer = OpenSeadragon({
            id: "comparedImage",
            prefixUrl: "/js/openseadragon/images/",
            preserveViewport: true,
            minZoomLevel: 0.3,
            defaultZoomLevel: 0.3,
            maxZoomLevelCustom: zoomLevel,
            maxZoomPixelRatio: 1,
            visibilityRatio: 1,
            constrainDuringPan: true,
            loadWithAjax: true,
            tileSources: compareImage ? compareImage.panoramaUrl : null,
            showNavigator: true,
            navigatorPosition: "BOTTOM_LEFT",
            navigatorAutoFade:  false,
            zoomInButton: "zoom-in",
            zoomOutButton: "zoom-out",
            crossOriginPolicy: "Anonymous",
            preserveImageSizeOnResize: true
        });
$scope.compareViewerOverlay = $scope.compareViewer.paperjsOverlay();

        $scope.compareViewerMouseTracker = new 
 OpenSeadragon.MouseTracker({
            element: $scope.compareViewer.canvas,
            pressHandler: pressHandler,
            dragHandler: dragHandler,
            dragEndHandler: dragEndHandler
        }).setTracking(false);

$scope.compareViewer.addHandler('zoom', zoomEventOSD);
$scope.compareViewer.addHandler('zoom', comapreViewerZoomEventOSD);
$scope.compareViewer.addHandler('zoom', compareViewerZoomPanEventOSD);
$scope.compareViewer.addHandler('pan', compareViewerZoomPanEventOSD);
$("#comparedImage").css("cursor", "move");

  1. Draw Аннотация: 

           if (annType == 'FREEHAND') { //draw freehand annotation
        $scope.myPath.strokeColor = '#' + 
            annotation.annotation_color;
         _.each(points, function(point) {
              var x = point.x;
              var y = point.y;
              var p = new paper.Point(parseInt(x), parseInt(y));
                        $scope.myPath.add(p);
               });
              paper.view.update();

        } else if (annType == 'RECTANGLE') { 
             var start = points[0];
             var end = points[1];
             var startX = parseInt(start.x);
             var startY = parseInt(start.y);
             var endX = parseInt(end.x);
             var endY = parseInt(end.y);
             var startP = new paper.Point(startX, startY);
             var endP = new paper.Point(endX, endY);
             $scope.myPath = new paper.Path.Rectangle(startP, endP);
             $scope.myPath.strokeWidth = $scope.strokeWidth;
$scope.myPath.strokeColor = '#'+annotation.annotation_color;
              $scope.myPath.fillColor = 'rgba(0,0,0,0.0)';
              $scope.myPath.visible = true;
               paper.view.update();

        }

Проблема: это работает нормально, когда я использую один холст. Если я пытаюсь использовать несколько аннотаций проблема canvas paperjs. Если я увеличу масштаб второго холста, размер аннотации первого холста изменится.

Как мне решить эту проблему.

...