-
-
Save larsneo/bb75616e9426ae589f50e8c8411020f6 to your computer and use it in GitHub Desktop.
Pinch zoom implementation for PDF.js viewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Goes into viewer.html just before ending </body> --> | |
<script> | |
let pinchZoomEnabled = false; | |
function enablePinchZoom(pdfViewer) { | |
let startX = 0, startY = 0; | |
let initialPinchDistance = 0; | |
let pinchScale = 1; | |
const viewer = document.getElementById("viewer"); | |
const container = document.getElementById("viewerContainer"); | |
const reset = () => { startX = startY = initialPinchDistance = 0; pinchScale = 1; }; | |
// Prevent native iOS page zoom | |
//document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false }); | |
document.addEventListener("touchstart", (e) => { | |
if (e.touches.length > 1) { | |
startX = (e.touches[0].pageX + e.touches[1].pageX) / 2; | |
startY = (e.touches[0].pageY + e.touches[1].pageY) / 2; | |
initialPinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY)); | |
} else { | |
initialPinchDistance = 0; | |
} | |
}); | |
document.addEventListener("touchmove", (e) => { | |
if (initialPinchDistance <= 0 || e.touches.length < 2) { return; } | |
if (e.scale !== 1) { e.preventDefault(); } | |
const pinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY)); | |
const originX = startX + container.scrollLeft; | |
const originY = startY + container.scrollTop; | |
pinchScale = pinchDistance / initialPinchDistance; | |
viewer.style.transform = `scale(${pinchScale})`; | |
viewer.style.transformOrigin = `${originX}px ${originY}px`; | |
}, { passive: false }); | |
document.addEventListener("touchend", (e) => { | |
if (initialPinchDistance <= 0) { return; } | |
viewer.style.transform = `none`; | |
viewer.style.transformOrigin = `unset`; | |
PDFViewerApplication.pdfViewer.currentScale *= pinchScale; | |
const rect = container.getBoundingClientRect(); | |
const dx = startX - rect.left; | |
const dy = startY - rect.top; | |
container.scrollLeft += dx * (pinchScale - 1); | |
container.scrollTop += dy * (pinchScale - 1); | |
reset(); | |
}); | |
} | |
document.addEventListener('webviewerloaded', () => { | |
if (!pinchZoomEnabled) { | |
pinchZoomEnabled = true; | |
enablePinchZoom(); | |
} | |
}); | |
</script> |
Is this just suitable for
viewer.html
? Can I utilize it within my customed viewer? Like a viewer in adiv
using canvas backend?
I think it should work but you would have to make appropriate changes as required by the back end that you make.
hello guys , when i implement and test it on my application ,it doesn't work
Thank you @meghrathod - It's working for BlazorWebView in MAUI Blazor
hi guys, if you use modern browser, please upgrade pdfjs to latest version or the supported version(version >=3.3.122, for more info see this PR), pdfjs now support pinch-to-zoom feature
.
if unfortunately, not use modern browser(for example, you have to use pdfjs version v2.x), this code work perfectly!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Unfortunately pinch-to-zoom doesn't work if I put the viewer in an iframe :( Is there any kind of solution?