I'm trying to create a pinch to zoom action in a Web app developed with Cordova for iOS and Android.
I've tried this script with Hammerjs 1.1.3, and in a first moment i think that was the version of Hammerjs to create this problem, so i'have "translated" the script to working with Hammerjs 2.0.2 but i have the same result either way.
In iOS (at the moment i'm using the Xcode emulator on my Mac) i'm able to zoom the image but after the first drag event the image is cut, and after this i can't drag the image.
I think this issue is caused by the css transform3d animation, have you ever had the same problem or something similar in iOS?
The HTML structure:
<div id="pinchzoom">
<img id="rect" src="..." width="2835" height="4289" alt="" />
</div>
This is the script in Hammerjs 2.0.2.
var elem = document.getElementById('pinchzoom');
var mc = Hammer(elem,{touchAction: 'manipulation'});
mc.get('pinch').set({enable: true});
var rect = document.getElementById('img_hover');
var posX=0, posY=0,
scale=1, last_scale,
last_posX=0, last_posY=0,
max_pos_x=0, max_pos_y=0;
mc.on('pan pinchout pinchin panend', function(ev){
switch(ev.type)
{
case 'pan':
if(scale != 1){
posX = last_posX + ev.deltaX;
posY = last_posY + ev.deltaY;
if(posX > max_pos_x){
posX = max_pos_x;
}
if(posX < -max_pos_x){
posX = -max_pos_x;
}
if(posY > max_pos_y){
posY = max_pos_y;
}
if(posY < -max_pos_y){
posY = -max_pos_y;
}
}else{
posX = 0;
posY = 0;
saved_posX = 0;
saved_posY = 0;
}
break;
case 'pinchin':
case 'pinchout':
last_scale = scale;
scale = Math.max(1, Math.min(last_scale * ev.scale, 10));
max_pos_x = Math.ceil((scale - 1) * rect.clientWidth / 2);
max_pos_y = Math.ceil((scale - 1) * rect.clientHeight / 2);
if(posX > max_pos_x){
posX = max_pos_x;
}
if(posX < -max_pos_x){
posX = -max_pos_x;
}
if(posY > max_pos_y){
posY = max_pos_y;
}
if(posY < -max_pos_y){
posY = -max_pos_y;
}
break;
case 'panend':
last_posX = posX < max_pos_x ? posX: max_pos_x;
last_posY = posY < max_pos_y ? posY: max_pos_y;
break;
}
// transform!
var transform =
"translate3d(0, 0, 0) " +
"scale3d(1, 1, 0) ";
if(scale != 1){
transform =
"translate3d("+posX+"px,"+posY+"px, 0) " +
"scale3d("+scale+","+scale+", 0) ";
}
rect.style.transform = transform;
rect.style.oTransform = transform;
rect.style.msTransform = transform;
rect.style.mozTransform = transform;
rect.style.webkitTransform = transform;
});
