2013年7月31日水曜日

【javascript】androidのブラウザでgestureイベントを使いたくて困った時の解決法

gestureとは2本以上の指でタッチパネル操作です。
gesturestart/gesturechange/gestureendはandroid端末では使用できません。

gestureイベントそのものではありませんが、android端末でも各種gestureイベントと同じタイミングで、任意の関数を起動するにはtouchイベントでtouches.lengthを調べれば可能です。


要素.addEventListener('touchstart',function(e){
    if(e.touches.length > 1){
        任意の関数();
    }
},false);


こんな感じ。

gestureイベントオブジェクト特有のscaleプロパティを使用したいときは
自力で2つのtouch座標から計算する。

タッチされている2本の指の距離はこのような関数で計算できる。引数はtouchstartなどのイベントオブジェクト

pitchTouches : function(e){
            return Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
 },
これではscaleではなく、ただの指の距離です。
scaleを得るにはtouchstartで2本指の距離を変数に格納し、
touchmoveでまた2本指の距離を計算、touchstart時との差がscaleとなります。

いろいろ面倒だけど、こうすることでiOSでもandroidでも共通のコードでやりたいことができるかも

0 件のコメント:

コメントを投稿