dealfonso / pdfjs-viewer

A viewer based on PDFjs, which can be embedded in any web page (not using iframes)
Apache License 2.0
48 stars 1 forks source link

How use pinch to zoom in/out pdf doc #5

Closed baxing closed 1 year ago

baxing commented 1 year ago

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

dealfonso commented 1 year ago

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.