« タッチパネルはよく解らん -4- | トップページ | 配置コード機能の実装 -2- »

2012年6月 2日 (土)

タッチパネルはよく解らん -5-

タブレットで FlatTable の動作確認をしたら、ドラッグの応答の鈍いことが判った訳ですが、その対策として図のように、画面の両側に新たにボタンを設けて、これを押すことで球を移動させるようにしました。

配置図

まず、旨く行かなかったコードを示します。

// ボタン操作で球を移動させる
function moveByBtn(evt, delt, dir){
    var target = evt.target ? evt.target : event.srcElement;
    target.ontouchend = function (){    // (1)
        target.ontouchend = null;       //
    }                                   //
    switch (dir){
        case "x": curBall.x += delt; break;
        case "y": curBall.y += delt; break;
        default: break;
    }
    ballMove(curBall, tableAngle);

    if (target.ontouchend != null){    // (2)
        btnDelt = delt;
        willStop(target, setInterval("willGo('" + dir + "')", 200));
    }
}

function willGo(dir){
    移動ルーチン
}

function willStop(){
    ・・・
    target.ontouchend = function (){
        clearInterval(id);
        target.ontouchend = null;
    };
    ・・・
}
moveByBtn() はボタンのイベント mousedowntouchstart で起動されます。

PCはこれで正常に動作するのですが、タブレットでは旨く行きません。タブレットの場合、ボタンにタッチしたままでは球が動かず、タップならば動くのですが、今度は止まりません。

初めは (2) の条件判定と (1) は有りませんでした。しかし、タップの時に球が止まらないので、イベント touchend の発生は setInterval() の実行より前なのだろうと予想しました。それだと、willStop() を実行してもイベントtouchend を捕まえることが出来ず、球は動き続けることになります。

そこで、(1) および (2) を追加して上記のコードになりました。これならば、setInterval() より前にイベント touchend が発生しても球は停止するはずです。しかし、症状は改善されませんでした(微妙に動作が変わったような気はするのですが、よく判りません)。

そもそも、タッチしたままだと球が動かないというところから異常ですが、タブレットはそういうアホな仕様なのだろうと諦めて、とにかく動くコードに修正しなければなりません。そこで、タブレットでは、イベント touchend で移動を終了するのではなく、移動の開始も終了も touchstart で制御することにしました。すなわち、タブレットでは、ボタンをタップして移動を開始し、再度ボタンをタップして移動を終了するわけです。結局、イベントハンドラーは次のようになりました。上記コードに有った willStop() はこのハンドラーに取り込んだので削除しました。

// これで OK
function moveByBtn(evt, delt, dir){
    var target = evt.target ? evt.target : event.srcElement;
    switch (dir){
        case "x": curBall.x += delt; break;
        case "y": curBall.y += delt; break;
        default: break;
    }
    ballMove(curBall, tableAngle);

    btnDelt = delt;
    if (fTouchPnl){
        if (tpStop = !tpStop){
            clearInterval(tpId);
        } else {
            tpId = setInterval("willGo('" + dir + "')", 300);
        }
    } else {
        var id = setInterval("willGo('" + dir + "')", 200);
        target.onmouseup = function (){
            clearInterval(id);
            target.onmouseup = null;
        };
    }
}

タブレットとPCでは移動のインターバルが異なっています。タブレットでは移動のオーバーシュートが無視できないのでインターバルを長めにしました。

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

« タッチパネルはよく解らん -4- | トップページ | 配置コード機能の実装 -2- »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54859706

この記事へのトラックバック一覧です: タッチパネルはよく解らん -5-:

« タッチパネルはよく解らん -4- | トップページ | 配置コード機能の実装 -2- »