javascript - 使用 PDF.js 捏合缩放

Question

我有一个使用 PDF.js 呈现 pdf 的移动应用程序。我的框架是 Ionic 和 Angular。我可以渲染 pdf，但缩放有问题。当我使用 Ionic 缩放时，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 (初始化):

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));
}