Is there any possible way to implement pinch & zoom function in the container canvas?

[nessgor]

For example using hammer.js?

http://hammerjs.github.io/

[nsuhanshetty]

Looking forward to this feature, as I am applying this to a mobile app.

[liangwenzhong]

+1

[michaeljcoyne]

Any news on this? I can't use this without pinch zoom.

[jjacobs33589]

I also am looking for this

[SaeedSyedAli96]

Anyone Implemented this? Help needed!

[tabirkeland]

I implemented this in Ionic 3.9.2 in a modal. Here is a Gist to show how to implement.

[jtcrowson]

@tabirkeland That's with buttons though. What about the pinch gesture?

[tabirkeland]

@jtcrowson I have not had the chance to try it which pinch.

You could try using the "pinch" gesture outlined here and calling the zoomIn() and zoomOut() functions depending on user input.

[jtcrowson]

Biggest issue with using a gesture framework (like hammer.js) on the ng2-pdf-viewer is that it disables touch scrolling.

[sattip]

Any luck?

[woutervddn]

waiting for this as well, tried to get it to work myself but no luck... :(

[jtcrowson]

I got it to work with pinch (although it's not very smooth), but couldn't get scroll to work with it.

[wnabil]

using hammerjs it is something like that

const container: HTMLElement = document.getElementById('pdf-file-container');

const hammer = new Hammer(container, {
  domEvents: true
});

hammer.get('pinch').set({
  enable: true
});

hammer.on('pinchend', (event: any) => {
  // get the current zoom value
  let zoom = this.currentZoom;
  // get the scaled amount
  const scale = zoom * event.scale / 10;
  // if the user is zooming in
  if (event.additionalEvent === 'pinchout') {
    zoom += scale;
  } else {
    // if zooming out
    zoom -= scale * 10;
  }

  // if zoom is too small or too big set them to max values
  if (zoom < 1) {
    zoom = 1;
  } else if (zoom > 2) {
    zoom = 2;
  }

  // set the current zoom
  this.currentZoom = zoom;
});

i am not sure if there is a better way but this works fine currently

[hitmacreed]

for ionic 3 users here i found an work arround

[cxw13424219787]

using ngx-pinch-zoom, specific query google

[cxw13424219787]

  <pinch-zoom>
    <div class="oat-pdf-container">
      <pdf-viewer [src]="pdfSrc"
        [autoresize]="true" 
        [original-size]="false"
        [show-all]="true"
        [zoom]="currentZoom"
        style="display: block;"
      ></pdf-viewer>
    </div>
  </pinch-zoom>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dipankarmondal]

any one able to do this?

[cxw13424219787]

您的邮件已收到，我会尽快回复O(∩_∩)O

[vikaskandari]

Thanks to @cxw13424219787 the solution works perfectly for angular now here are some additional information and resources :-

Angular 18+ support of ngx-pinch-zoom its fork as orignal one is outdated
https://www.npmjs.com/package/@meddv/ngx-pinch-zoom

npm i @meddv/ngx-pinch-zoom

Html Code

<pinch-zoom>
      <div  [style.height.px]="500" [style.width.%]="100">
        <pdf-viewer 
             [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'" 
             [render-text]="true" 
             [original-size]="false" 
            [style.height.px]="500">
         </pdf-viewer>
      </div>
    </pinch-zoom>

Make sure to give a height on pdf-viewer and its parent element otherwise it won't show.

i have tested it and works perfectly without any issues with angular 18.

[cxw13424219787]

您的邮件已收到，我会尽快回复O(∩_∩)O