Javascript масштабирование и поворот с помощью жестов и жестов

Я работаю над некоторыми событиями и жестов касания, я хочу, чтобы иметь возможность масштабирования и поворота объекта, я успешно сделал его перетаскиваемым, но жесты дают мне проблемы. Жесты работают, но они нестабильны, всякий раз, когда вы зажимаете его, чтобы увеличить или уменьшить масштаб или попытаться повернуть его, он прыгает с пальца на палец.

Вот мой код для справки.

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

В любом случае, чтобы сделать это гладко, и не позволяйте ему прыгать с пальцев, или это подход, который я сделал неправильно. При необходимости некоторые советы и рекомендации и помощь

нашел решение

Похоже, что мое касательное событие для перетаскивания мешало жестом, поэтому он продолжал прыгать от пальца к пальцу, так как вокруг этого было не использовать жесты, а вместо этого подсчитывать штрихи на объекте и использовать touch start, end и change вместо.

Вот код

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

Ответ 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 */
});

Это должно работать, потому что события жестов запускаются только при касании экрана двумя или несколькими пальцами, и при этом никакой другой код не выполняется, когда это происходит, потому что обработчики событий касания реагируют только на одно касание.

Ответ 2

Возможно, jquery не подходит для этой задачи. Вы можете подумать об использовании sencha touch. Он уже делает то, что вы хотели очень красиво. Посмотрите demos. В зависимости от того, что вы хотите сделать jQuery Mobile также будет хорошим выбором.