手勢和觸摸事件 - 平穩調整方形

Question

我有一個藍色的#square在我的我的iOS設備上的視口垂直和水平居中......

<div id="square"></div> 
#square { 
    width:100px; 
    height:100px; 
    background:blue; 
    margin:0 auto; 
} 

我想最低和最高值時，內調整其大小在我的手機上做捏/縮放手勢。

現在，這是我用它的所有javascript。

$(document).ready(function() { 

    var dom = document.body, 
     _width = parseInt($('#square').css('width')), 
     vel = 3, 
     min = _width, 
     max = 300, 
     scale; 

    dom.addEventListener("gesturechange", gestureChange, false); 

    function gestureChange(e) { 

     e.preventDefault(); 

     scale = e.scale; 
     _width = Math.round(_width*(scale/vel)); 

     if (_width <= max && _width >= min) 
      $('#square').css({ 
       'width' : _width + 'px', 
       'height' : _width + 'px' 
      }); 

     if (_width > max) _width = max; 
     if (_width < min) _width = min; 
    } 


}); 

但是，整個重新體驗感覺有點波濤洶涌，並沒有真正順利地響應我的手指。它確實有效，但並不像我想要的那樣順利。

首先。我並沒有真正瞭解javascript「touch」-event和javascript「gesture」-event之間的區別。我需要更多的eventListeners嗎？像gestureStart和gestureEnd這個工作？

我現在遇到的問題是，當我放大#square跳到它的最大值（300）非常快，但我不能完全用我的手指控制它的大小。而且，當調整大小時，我還會遇到縮小手勢時再次縮小大小的問題。

我把我當前的代碼放在jsfiddle上，所以你可能可以自己測試它。 http://jsfiddle.net/Ec3az/

也許有人可以幫助我，因爲我很樂意完成這件作品。在智能手機上放大和縮小時，總體結果應該只是真正平滑的體驗和實際控制廣場的大小。

謝謝你提前

編輯：btw。我喜歡只使用標準的觸摸事件，而不是使用額外的庫。

Answer 1

你遇到的問題是，當你得到一個新的手勢改變事件時，你正在縮放當前寬度的正方形，當你真正想縮放正方形的原始寬度和高度。按照自己的方式積累每個規模變化，並導致廣場面積的快速增加，這正是您所遇到的情況。

縮放完成後，我們還需要將原始寬度更新爲當前寬度，因此下次用戶縮放時，它將從正確的大小縮放。

因此，這將創建一個流暢的體驗，因爲它總是縮放原始寬度：

var dom = document.body, 
    _width = parseInt($('#square').css('width')), 
    vel = 5.0, 
    min = _width, 
    max = 300, 
    scale; 

dom.addEventListener("gesturechange", gestureChange, false); 
dom.addEventListener("gestureend", gestureEnd, false); 

function gestureChange(e) { 

    e.preventDefault(); 

    scale = e.scale; 
    var tempWidth = _width * scale; 

    if (tempWidth > max) tempWidth = max; 
    if (tempWidth < min) tempWidth = min; 

    $('#square').css({ 
     'width': tempWidth + 'px', 
     'height': tempWidth + 'px' 
    }); 
} 

function gestureEnd(e) { 

    e.preventDefault(); 
    _width = parseInt($('#square').css('width')); 
} 

這小提琴似乎是順利在iPad 1，iOS的5.1.something！ :)

http://jsfiddle.net/D9NC3/

此外，關於手勢和觸摸事件，我觸摸事件在多個瀏覽器（Android版，iOS版Safari和Firefox似乎http://caniuse.com/#search=touch）的支持，但手勢事件據我所知，這是專有的iOS Safari。他們基本上可以幫助你處理iOS類型的手勢（捏和縮放，旋轉等），所以你不必自己實現手勢檢查。

希望它有幫助！