2013-02-09 5 views
6

Jak mogę wykryć skalę (lub odległość zaciśniętą) szczypania, aby powiększyć, gdymeta name = "viewport" jest ustawione na użytkownik -scalable = yes?JavaScript: wykryj szczyptę, aby powiększyć, gdy "skalowalna przez użytkownika" jest ustawiona na tak

Przetestowałem na Androida ale pinch to zoom nie można wykryć czy meta name = „rzutni” jest ustawiony na użytkownika skalowalnej = yes. Jeśli nazwa meta = "viewport"jest ustawiona na skalowalną przez użytkownika = nie, to można wykryć szczyptę do powiększenia, ale nie można powiększyć dokumentu.

Oto moje testy na jsFiddle:

Hammer.js: http://jsfiddle.net/pE42S/

var pziW = "test"; 
var viewport_width = $(window).innerWidth(); 
var zoom = 0; 

var hammer = new Hammer(document.getElementById("touchme")); 

hammer.ontransformstart = function(ev) { 
    console.log("ontransformstart"); 
    console.log(ev); 
    //pziW = $(window).innerWidth()/2 * ev.scale; 
    zoom = ev.scale; 
    var msg = "ontransformstart " + pziW + " scale " + zoom; 
    log(msg); 
}; 
hammer.ontransform = function(ev) { 
    console.log("ontransform"); 
    console.log(ev); 
    zoom -= ev.scale; 
    viewport_width+=viewport_width*zoom; 
    zoom = ev.scale; 
    pziW=viewport_width; 
    //pziW = $(window).innerWidth()/2 * ev.scale; 
    jqUpdateSize(); 
    var msg = "ontransform " + pziW + " scale " + zoom; 
    log(msg); 
}; 
hammer.ontransformend = function(ev) { 
    console.log("ontransformend"); 
    console.log(ev); 
    var msg = "ontransformend " + pziW + " scale " + zoom; 
    log(msg); 
}; 

TouchSwipe: http://jsfiddle.net/pE42S/1/

$(function() {  
    $("#touchme").swipe({ 
     pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) { 
      console.log("pinchStatus"); 
      console.log(event); 
      pziW=viewport_width - distance; 
      $("#log").text(pziW); 
      jqUpdateSize(); 
     }, 
     fingers:2, 
     pinchThreshold:0 
    }); 
}); 

ktoś ma odpowiedzi?

+0

Czy obejrzałeś wtyczkę jQuery Touchy? [touchyjs.org] (http://touchyjs.org/) – Cholesterol

+0

obrazy nie działają w jsfiddle. Nie mogę teraz sprawdzić, jak to działa. Chodzi o to, że zoom natywny nie działa lub "przybliża" zoom? – fearis

+2

Chciałbym odnieść się do odpowiedzi na to pytanie StackOverflow: http://stackoverflow.com/questions/11183174/simplest-way-to-detect-a-pinch. –

Odpowiedz

0

Jednym sposobem osiągnięcia tego byłoby z ogólnej obsługi touchstart:

  • poczekać, aż użytkownik uruchamia dotyka co najmniej dwa punkty (event.touches.length> 1)
  • Uwaga x & Y rozpocznij współrzędne dla obu dotknięć, podłącz słuchaczy touchend
  • Poczekaj, aż dotknięcia się zakończą.
  • Usuń słuchaczy touchend & zmierz odległość.

Jeszcze łatwiej byłoby używać gestów i właściwości event.scale, zobacz wspaniałe odpowiedzi na Simplest way to detect a pinch po więcej szczegółów.

Powiązane problemy