0

I am using javascript Gesture events to detect multitouch pan/scale/rotation applied to an element in a HTML document.

Visit this URL with an iPad: http://www.merkwelt.com/people/stan/rotate_test/

You can touch the element with two finger and rotate it, but sometimes the rotation property goes go astray and my element flips around many full rotations.

Here is part of my code, I am really only taking the value directly from the event object:

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

What happens is that the value gets either 360 degrees added or subtracted, so I could monitor the value and react to sudden large changes, but this feels like a last resort.

Am I missing something obvious?

4

1 回答 1

0

我找到了解决方案。

为了避免不反映真实手指移动的旋转突然变化，您需要对此进行测试。如果旋转在任一方向上变化超过 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>
于 2012-05-05T03:21:33.063 回答