Странное поведение GestureEvent.rotation на iOS webkit

Question

Я использую javascript Gesture events для обнаружения мультитач панорамирования/масштабирования/вращения, применяемых к элементу в HTML-документе.

Посетите этот URL с IPad: http://www.merkwelt.com/people/stan/rotate_test/

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

Вот часть моего кода, я действительно только принимает значение непосредственно из объекта события:

...bind("gesturechange",function(e){   
     e.preventDefault();  
     curX = e.originalEvent.pageX - startX; 
     curY = e.originalEvent.pageY - startY; 
     node.style.webkitTransform = "rotate(" + (e.originalEvent.rotation) + "deg)" + 
        " scale(" + e.originalEvent.scale + ") translate3D(" + curX + "px, " + curY + "px, 0px)";    
}... 

Что происходит, что значение приобретает либо на 360 градусов складывать или вычитать, так что я мог следить за и реагировать на внезапные большие изменения, но это выглядит как последнее средство.

Я пропустил что-то очевидное?

Answer 1

Я нашел решение.

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

Fixed страница находится здесь: http://www.merkwelt.com/people/stan/rotate_test/index2.html

Вот код

<script type="text/javascript"> 
     var node; 
     var node_rotation=0; 
     var node_last_rotation=0; 

     $('.frame').bind("gesturestart",function(e){  
      e.preventDefault(); 
      node=e.currentTarget;  
      startX=e.originalEvent.pageX; 
      startY=e.originalEvent.pageY; 
      node_rotation=e.originalEvent.rotation; 
      node_last_rotation=node_rotation; 

     }).bind("gesturechange",function(e){ 
      e.preventDefault(); 
      //whats the difference to the last given rotation? 
      var diff=(e.originalEvent.rotation-node_last_rotation)%360; 
      //test for the outliers and correct if needed 
      if(diff<-300) 
      { 
       diff+=360; 
      } 
      else if(diff>300) 
      { 
       diff-=360; 
      } 
      node_rotation+=diff; 
      node_last_rotation=e.originalEvent.rotation;  

      node.style.webkitTransform = "rotate(" + (node_rotation) + "deg)" + 
       " scale(" + (e.originalEvent.scale) + 
       ") translate3D(" + (e.originalEvent.pageX - startX) + "px, " + (e.originalEvent.pageY - startY) + "px, 0px)"; 

     }).bind("gestureend",function(e){ 
      e.preventDefault();     
     }); 
    </script>