Ng2-pdf-viewer: 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[bot]]

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.