2016-03-23 15 views
1

にNG-PDFのズームを有効にするには、このプラグインで開かれた:は、私は私のPDFファイルをズームしようとしているイオン/ angularJS

https://github.com/sayanee/angularjs-pdf

どのようにすることができます私はアクティブズーム?

<script id="pdf-viewer.html" type="text/ng-template"> 
     <ion-modal-view> 
      <ion-header-bar> 
       <h1 class="title">Report</h1> 
       <button ng-click="vm.modal.hide()" class="button button-icon icon ion-android-close comp"></button> 
      </ion-header-bar> 
      <ion-content> 
       <ng-pdf ng-if="pdfUrl" template-url="partials/viewer.html" canvasid="pdf" scale="page-fit"></ng-pdf> 
      </ion-content> 
     </ion-modal-view> 
    </script> 

ビューア:

{{loading}} 
<canvas id="pdf" class="rotate0"></canvas> 

答えて

4

あなたはion-scrollコンポーネントを使用することができます。これにより、イオンスクロールとズームが可能になります。しかし、コンテンツを1回だけ描​​画するので、すべてをズームするとぼやけてしまいます。私はこれを、想定されていたサイズの200%で描画し、デフォルトのズームを0.5に設定することでこれを修正しました。それが動作しないズーム原因ズームデフォルトイオンスクロールとを、使用する他ので、あなたがoverflow-scrollfalseに設定する必要が

<ion-scroll max-zoom="5" overflow-scroll="false" zooming="true" direction="xy" style="width: 100%; height:100%;" scrollbar-x=false; scrollbar-y = false;> 
    <img src="img/floorplan.jpg" width="200%"> 
</ion-scroll> 

注:私は以下のいくつかのサンプルコードを提供してきました!