0

HTML ドキュメント内の要素に適用されたマルチタッチ パン/スケール/回転を検出するために JavaScript ジェスチャー イベントを使用しています。

iPad で次の URL にアクセスしてください: http://www.merkwelt.com/people/stan/rotate_test/

2 本の指で要素に触れて回転させることはできますが、回転プロパティがおかしくなり、要素が何度も完全に回転してしまうことがあります。

これが私のコードの一部です。実際には、イベント オブジェクトから直接値を取得しているだけです。

...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 度加算または減算されるので、値を監視して突然の大きな変化に対応できますが、これは最後の手段のように感じます。

明らかな何かが欠けていますか？

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 に答える