使用PDF.js进行缩放

Question

我有一个移动应用程序，用PDF.js渲染pdf。我的框架是Ionic和Angular。 我可以渲染pdf，但是我有缩放问题。当我使用离子变焦时，pdf模糊。 PDF.js提供缩放，但只提供级别。 有没有办法结合捏合手势和不模糊的缩放？

我已经尝试过hammer.js，但是我找不到工作代码......

Answer 1

我找到了解决方案：

我使用因子2.3渲染pdf，因此页面太高了。然后我用Ionic缩小并计算出这样的值：

$ionicScrollDelegate.$getByHandle("pdfScroller")
    .zoomBy(window.innerWidth / (document.getElementById("pageContainer1").clientWidth);

因子2.3必须分别在viewer.js中设置pdf.js. 在4900 - 5000行应该是这样的：

case 'page-width':
    scale = pageWidthScale;
    break;

将其更改为：

case 'page-width':
    scale = pageWidthScale * 2.3;
    break;

现在应该可以放大并且文本是可读的。

修改

HTML：

<ion-scroll id="pdfScrollerID" zooming="{{!sidebarOpen}}" min-zoom="{{minZoomObject.minZoom}}" overflow-scroll="false" direction="xy" has-bouncing="false" style="width: 100%; height: 100%;" delegate-handle="pdfScroller" class="pdfScrollerStyle" on-swipe-left="nextPage()" on-swipe-right="previousPage()" scrollbar-x="false" scrollbar-y="false" ng-click="closeSidebar()">
    <div id="viewerContainer" style="padding-bottom: 100%; padding-top: 20px;" on-double-tap="resetZoom()">
        <div id="viewer" class="viewer-styles">
        </div>
    </div>
</ion-scroll>   

Controller（init）：

pdf = news.getPdf($scope.section, $scope.pdfNumber);

PDFJS.workerSrc = 'lib/pdfviewerx/pdf.worker.js';
PDFJS.getDocument($scope.getPageLink(pdf)).then($scope.getDocAndPdf);

$scope.pdfScroller = $ionicScrollDelegate.$getByHandle("pdfScroller");
$scope.littlePdfScroller = $ionicScrollDelegate.$getByHandle("littlePdfScroller");


container = document.getElementById('viewerContainer');
viewer = document.getElementById('viewer');

//var pdfLinkService = new PDFLinkService();


pdfViewer = new PDFViewer({
  container: container,
  viewer: viewer,
  showPage: $scope.activePageIndex + 1,
  scaleFactor : 2.3
});

$scope.pdfFindController = new PDFFindController({
  pdfViewer: pdfViewer
});

pdfViewer.setFindController($scope.pdfFindController);

container.addEventListener('pagesinit', function () {
    pdfViewer.currentScaleValue = 'page-width';                            
});

// Loading document.
PDFJS.getDocument($scope.getPageLink(pdf)).then(function (pdfDocument) {

    documentPdf = pdfDocument;
    pdfViewer.setDocument(pdfDocument, pageRendered);
    $ionicLoading.show({
        template: '<ion-spinner icon="ios" id="loadingSpinner"></ion-spinner>'
    });
    //pdfLinkService.setDocument(pdfDocument, null);
});

zoomToFitPage();

zoomToFitPage（）：

function zoomToFitPage(){       
$timeout(function() {
    if(document.getElementById("pageContainer1") != undefined){
        zoomToFullSize();
        $timeout(function(){ 
            $scope.minZoomObject.minZoom = $scope.pdfScroller.getScrollPosition().zoom;
            $scope.$apply();                
            setPdfToCenter();
        , 500);     
    } else{
        zoomToFitPage();
    }
}, 500);
}

setPdfToCenter和ZoomToFullSize：

function setPdfToCenter(){
     var scroll = document.getElementsByClassName("scroll");
     for(var i=0; i < scroll.length; i++){
          if(scroll[i].parentElement.id == "pdfScrollerID"){
               scroll[i].style.width = (window.innerWidth / MINZOOM_DEAULT) + "px";
          }
     }
     $scope.resetZoom(); 
}

function zoomToFullSize(){
    $scope.pdfScroller.zoomBy(window.innerWidth / (document.getElementById("pageContainer1").clientWidth));
}