19

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

这是我的代码供参考。

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;
    }
}
});
4

2 回答 2

10

您的解决方案有效，但不是最优雅的：您仍然可以使用您的第一段代码并依赖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 */
});

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

于 2011-09-17T18:16:54.267 回答
0

也许 jquery 不是这个任务的最佳选择。您可能会考虑使用sencha touch。它已经很好地完成了你想要的。看看演示。取决于你想要做什么，jQuery Mobile也是一个不错的选择。

于 2011-09-22T08:13:20.397 回答