pinchzoom icon indicating copy to clipboard operation
pinchzoom copied to clipboard

Working great with a few tweaks on Android Chrome - not an issue just leaving here for others.

Open rocket-pig opened this issue 2 years ago • 0 comments

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

rocket-pig avatar Feb 16 '23 18:02 rocket-pig