dealfonso / pdfjs-viewer

A viewer based on PDFjs, which can be embedded in any web page (not using iframes)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How use pinch to zoom in/out pdf doc

baxing opened this issue · comments

commented

Hello,

I test your pdfjs-viewer, It's great for me. But on mobile device, I can't not use pinch gusture for 2 fingers to zoom in or out the pdf document(now can use only topbar button to zoom).

Please guide to use this feature.

Thank you

Hi,

at this moment my examples do not support pinch zoom, but it seems to be easy using the TouchEvent API

A quick-and-dirty implementation maybe the next:

let distance = null;
let el = document.getElementById('TA');
el.addEventListener('touchmove', function(e) {
    if (e.touches.length > 1) {
        var touch0 = e.touches[0];
        var touch1 = e.touches[1];
        var newdist = Math.sqrt((touch1.pageX - touch0.pageX) * (touch1.pageX - touch0.pageX) + (touch1.pageY - touch0.pageY) * (touch1.pageY - touch0.pageY));
        if (distance === null) {
            distance = newdist;
        }
        let zoom = newdist/distance;
        console.log(zoom);
    } else {
        distance = null;
    }
});
el.addEventListener('touchend', function(e) {
    distance = null;
});
el.addEventListener('touchcancel', function(e) {
    distance = null;
});

Do not forget to add the CSS property touch-action: none; to the element that is supporting the pinch event.