启用在ionic/angularJS上放大ng.pdf

Question

我正在尝试缩放用这个插件打开的pdf：

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>

Answer 1

您可以使用ion-scroll组件。这使得离子滚动和缩放成为可能。然而，它只绘制了一次内容，所以当你缩放时，一切都会变得模糊。我修复了这个问题，用200%的大小绘制内容，然后将默认缩放设置为0.5。我在下面提供了一些示例代码：

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

请注意，必须将overflow-scroll设置为false，否则将使用默认的离子滚动和缩放，这将导致缩放无法工作