Javascript使用gesturechange和gestureend进行缩放和旋转

Question

我正在处理一些触摸事件和手势，我希望能够缩放和旋转对象，我已成功使其可拖动，但手势给我带来了麻烦。手势可以工作，但不稳定，每当你捏住它来放大或缩小或尝试旋转它时，它就会从一个手指跳到另一个手指。

这是我的代码供引用。

var width = 300; var height = 300; var rotation = 0;
$('.dynamic').live("gesturechange gestureend", function(e){
var orig = e.originalEvent;

if(e.type == 'gesturechange'){
    e.preventDefault();
    $(this).css("width", parseFloat(width) * orig.scale);
    $(this).css("height", parseFloat(height) * orig.scale);
    $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)");
}else if(e.type == 'gestureend'){
    a.w[ids] = parseFloat(width) * orig.scale;
    a.h[ids] = parseFloat(height) * orig.scale;
    a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360;
}
});

有没有办法让它顺利，并防止它从手指上跳下来，或者我采取的方法是错误的。需要一些提示、技巧和帮助

找到解决办法

似乎我的拖动触摸事件干扰了手势，这就是它不断从一个手指跳到另一个手指的原因，解决这个问题的方法是不使用手势，而是计算对象上的触摸次数，并使用触摸开始、结束和更改.

这是代码

var touches = 0; var width = 300; var height = 300; var rotation = 0;
$('.dynamic').live("touchstart touchmove touchend", function(e){
var orig = e.originalEvent;   

if(e.type == 'touchstart'){
 if(orig.touches.length == 1){
    touches = 1; 
 }else if(orig.touches.length == 2){
    touches = 2;
 }
}else if(e.type == 'touchmove'){
 e.preventDefault();
 if(touches == 2){
        $(this).css("width", parseFloat(width) * orig.scale);
        $(this).css("height", parseFloat(height) * orig.scale);
        $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)");
 }
}else if(e.type == 'touchend'){
    if(touches == 2){
        a.w[ids] = parseFloat(width) * orig.scale;
        a.h[ids] = parseFloat(height) * orig.scale;
        a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360;
    }
}
});

Answer 1

您的解决方案有效，但它不是最优雅的:您仍然可以使用第一段代码并依赖gesture事件。
您所要做的就是确保 touch 事件处理程序不会干扰您的gesture 事件处理程序。
只需将其添加到 touch 事件处理程序中即可:

$('.dynamic').live("touchstart touchmove touchend", function(e){
    if(e.originalEvent.touches.length > 1)
        return;
    /* your touch code here */
});

然后使用您现有的手势代码:

$('.dynamic').live("gesturechange gestureend", function(e){
     /* your gesture code here */
});

这应该可行，因为只有两个或更多手指触摸屏幕时才会触发手势事件，并且发生这种情况时不会执行其他代码，因为触摸事件处理程序仅响应单次触摸。