iOS webkit 上 GestureEvent.rotation 的奇怪行为

Question

我正在使用javascript手势事件来检测应用于HTML文档中元素的多点触控平移/缩放/旋转。

使用 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。不是很直观，但它有效。

固定页面在这里：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>