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 事件处理程序不会干扰您的手势 事件处理程序。
只需将其添加到 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 */
});

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

Answer 2

也许 jquery 不是最适合这项任务的。您可能会考虑使用 sencha touch。它已经很好地完成了您想要的事情。查看演示。根据您想要执行的操作，jQuery Mobile 也是一个不错的选择。