我试图在使用适用于iOS和Android的Cordova开发的Web应用程序中创建一个缩放缩放操作。
我已经使用Hammerjs 1.1.3尝试了this脚本，并且在第一时间我认为这是Hammerjs创建此问题的版本，所以我已经＆＃34;翻译了＆ ＃34;使用Hammerjs 2.0.2的脚本，但无论如何都有相同的结果。
在iOS中（目前我在Mac上使用Xcode模拟器）我能够缩放图像，但在第一次拖动事件后图像被剪切，在此之后我可以＆＃39 ;拖动图像。
我认为这个问题是由css transform3d动画引起的，你在iOS上遇到过同样的问题或类似问题吗？
HTML结构：
<div id="pinchzoom">
<img id="rect" src="..." width="2835" height="4289" alt="" />
</div>
这是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;
});