pinchzoom
pinchzoom copied to clipboard
Working great with a few tweaks on Android Chrome - not an issue just leaving here for others.
First, using the min.js version from UNPKG results in PinchZoom is not defined
and I couldnt get any further than that. But using the UMD version works perfectly! So grab/link to this https://unpkg.com/[email protected]/dist/pinch-zoom.umd.js instead.
Second, as soon as the example initialization in the README is run, the div I've passed shrinks to 0px in height. I changed a million CSS configurations and still same result. Finally after some digging around I discovered that pinch-zoom is injecting a div with class 'pinch-zoom-container' and inspecting that showed that yep, its height is set to 0px. Its as simple as putting
document.querySelector(".pinch-zoom-container").style.height=window.innerHeight/2
document.querySelector(".pinch-zoom-container").style.width=window.innerWidth
after the initialization routine from the README and it works perfectly!
Included is the html and CSS Im using. Using pinch-zoom.js in android/chrome is working fine to zoom in and out (on a html5 canvas element in my case) once these two things are done.
<div id='scroll'>
<div id='pinch'>
<canvas id="viewport"></canvas>
</div>
</div>
<script>
var myElement = document.getElementById("pinch");
var pz = new PinchZoom.default(myElement, {
draggableUnzoomed: true,
minZoom: 1,
onZoomStart: function(object, event){
// Do something on zoom start
// You can use any Pinchzoom method by calling object.method()
console.log('zoom: start')
},
onZoomEnd: function(object, event){
// Do something on zoom end
console.log('zoom: end')
}
})
document.querySelector(".pinch-zoom-container").style.height=window.innerHeight/2
document.querySelector(".pinch-zoom-container").style.width=window.innerWidth
</script>
CSS
body {
/* touch-action: none; */
font-color: #abadab;
background-color: "#282C34";
font-size:9pt;
letter-spacing: -1px;
font-family: Monospace;
margin: 0;
overflow: hidden;
}
#scroll {
padding:0;
max-height: 100%;
max-width: 100%;
overflow: scroll;
overflow-x: scroll;
overflow-y: scroll;
}
Maybe that helps somebody along the way. Thank you