用PDF.js捏变焦

Question

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

我已经试过hammer.js了，但是我没有找到工作代码.

Answer 1

我找到了一个解决办法：

我呈现的pdf因子为2.3，所以页面太高了。然后我用离子放大，计算出这样的值：

$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>   

控制器(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));
}