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

Javascript zoom and rotate using gesturechange and gestureend

提问by ryuutatsuo

I am working on some touch events and gestures, I want to be able to zoom and rotate the object, I have successfully made it draggable but the gestures are giving me trouble. The gestures are working but they are choppy, whenever you pinch it to zoom in or zoom out or try to rotate it, it jumps from finger to finger.

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

Here is my code for reference.

这是我的代码供参考。

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

Are there anyways to make this smooth, and prevent it from jumping from fingers, or is the approach I took wrong. In need of some tips and tricks and help

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

found a solution

找到了解决办法

Seems like the my touch event for drag interfered with the gestures thats why it kept jumping from finger to finger, the way around this was to not use gestures instead count the touches on the object and use touch start,end and change instead.

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

Here is the code

这是代码

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

采纳答案by gion_13

Your solution works, but it's not the most elegant: you can still use your first piece of code and rely on the gestureevents.
All you have to do is make sure that the touchevent handlers do not interfere with your gestureones.
Just add this into the touchevent handlers:

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

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

and then use your existing gesture code :

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

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

This should work because the gesture events are triggered only there are two or more fingers touching the screen, and no other code executes when this happens, because the touch event handlers respond only to a single touch.

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

回答by PiTheNumber

Maybe jquery is not the best for this task. You might think about using sencha touch. It already does what you wanted very nicely. Have a look at the demos. Depending on what you want to do jQuery Mobilewould also be a good choice.

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