Javascript yakınlaştırma ve gesturechange ve jestend kullanarak döndürme

Question

Bazı dokunma olayları ve hareketleri üzerinde çalışıyorum, yakınlaştırma ve döndürme nesnesini yakınlaştırmak istiyorum, sürüklemeyi başarılı bir şekilde yaptım ama jestler bana sorun veriyor. Hareketler çalışıyor, ancak onlar, yakınlaştırma veya uzaklaştırma ya da döndürmeye çalıştığınızda, parmaktan parmağınıza atlarsa, çırpıyorlar.

Referans için benim kodum.

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

neyse orada bu pürüzsüz yapmak ve parmaklarından atlayarak engellemek ya da yanlış aldı yaklaşımdır İlke İmza Attı. Bazı ipuçları ve püf noktaları ve muhtaç yılında parmağa parmak atlayarak tuttu neden

şu hareketlerle bir

sürükle benim dokunma olayı gibi görünüyor çözüm müdahale bulundu yardımcı bu çevrede yolu kullanmaz oldu Bunun yerine, hareketler nesnenin üzerindeki dokunuşları saymaktadır ve dokunma başlangıcı, sonu ve değişimini kullanmaktadır.

İşte çözüm çalışır kod

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

, ama en zarif değil: Hala kodun ilk parçası kullanın ve gesture olaylar güvenebilirsiniz.
Yapmanız gereken tek şey, touch olay işleyicilerinizin gesture ürününüze müdahale etmediğinden emin olmaktır.

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

Bu jest olaylar tetiklenir çünkü yalnızca iki ya da daha fazla parmak var dokunuyor çalışması gerekir: Mevcut jest kodu kullanın sonra

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

ve:
Sadece touch olay işleyicileri içine bu eklemek Ekranı ve bu gerçekleştiğinde başka bir kod yürütmez, çünkü dokunma olay işleyicileri yalnızca tek bir dokunuşla yanıt verir.

Answer 2

Belki jQuery bu görev için iyi değil. sencha touch'u kullanmayı düşünebilirsiniz. İstediğin şeyi zaten çok güzel yapıyor. demos'a bir göz atın. Ne yapmak istediğinize bağlı olarak jQuery Mobile da iyi bir seçim olacaktır. cevabınızı yazabilmek için