Javascript масштабировать и вращать с помощью жестов и жестов - PullRequest
Новая
       27

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

19 голосов
/ 23 июня 2011

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

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

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

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

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

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

Вот код 

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

Ответы [ 2 ]

10 голосов
/ 17 сентября 2011

Ваше решение работает, но оно не самое элегантное: вы все равно можете использовать свой первый кусок кода и полагаться на события 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 */
});

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

0 голосов
/ 22 сентября 2011

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

...