« 経路の作図 -1- | トップページ | 経路の作図 -3- »

2012年3月 4日 (日)

経路の作図 -2-

― 色の指定 ―

例えば、四角形に座標を設定する時、パラメータの型は数値にします(JavaScript の変数に型が有るのかどうか知りませんが、とにかく、そのようなもの)。下記コードの 72 がそれに当たります。

    rect.setAttribute("x", 72);

それで、polyline の色を指定するのに同じようにRGBを16進表示した数値を指定したのですが、それではダメでした(1)。これを (2) のように文字列 "#??????" にすることで正しい表示が得られました。

    path.setAttribute("stroke", 0xffcc33);    // NG (1)
    path.setAttribute("stroke", "#ffcc33");    // OK (2)

― exPad のZ軸順序 ―

球の移動モードになると exPad(仮想マウスパッド)が現れるようにしているわけですが、これは、ドラッグ中にマウスが球の上を通過しても、その間ドラッグが中断するのを防ぐのが目的です。したがって、exPad は最前面に位置しなければなりません。しかし、現時点では、Z軸順序の処理方法が分からないため、exPad が必ずしも最前面になるとは限りません。exPad が出現した時点では最前面になっているのですが、その後で矢印球やゴースト等が生成されると、それら後から生成された物の方が前面に位置することになります。

しかし、これは反って都合が良いことのように思います。経路作図中は途中でゴーストの位置を微調整するケースが少なくないため、そのゴーストは exPad より前面に有る方が良いのです。

なお、Z軸順序の設定は *.style.zIndex を使うらしいので試してみたのですが、上手く行きませんでした。もう少し調べることにします。

― クリックとドラッグ ―

経路作図中は、マウスボタンを押して動かすと指定しておいた球が移動し、マウスボタンを離すと球の移動が止まります。また、マウスボタンを押した後、マウスを動かさずにマウスボタンを離すと、指定した球の位置にゴーストが生成されます。FlatTable では、この操作を onclick を使わずに実装しました。試していませんが、たぶん、onclick を使うと、ドラッグの時に、同時にクリックと判定されゴーストが生成されるでしょう。

この実装は簡単で、次のようになっています。


function drag(evt){
    fMoved = true;
    ~
}

function dragStop(){
    if (fDraw && !fMoved){
        makeGhost(currentBall);
    }
    ~
}

関数 drag() はマウスボタンが押された時にイベント mousemove に対して設定されるハンドラーです。この drag() 内で、マウスが動いたというフラッグ fMovedtrue にすることで、ドラッグとクリックを区別します。この fMoved は、マウスボタンが離された時に実行される dragStop() 内で検査され、false(マウスは動いていない)ならばゴーストが生成されます。

― 長クッション木枠のクリック ―

長クッション木枠をクリックすると経路作図モードに入り、再度クリックすると経路作図モードを抜けるわけですが、この実装は次のようになっています。


var longRail = document.getElementById("long_rail");
longRail.onclick = makePath;

function makePath(){
    ~
    longRail.onclick = nonDraw;
    ~
}

function nonDraw(){
    fDraw = false;
    longRail.onclick = makePath;
}

makePath() が経路作成の入り口で、nonDraw() が出口です。longRail の click ハンドラーは、初めに makePath に設定され、makePath() 内でそのハンドラーは nonDraw に切り替えられます。そして、nonDraw() 内で makePath に戻されています。

イベント・ハンドラーの設定には addEventListener() を使う方法も有りますが、その場合、ハンドラーの切り替えに removeEventListener() の実行が1つ余計に必要なので、上記コードのように *.onclick にハンドラーを代入する方式を取りました。

-3- に続く

« 経路の作図 -1- | トップページ | 経路の作図 -3- »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 経路の作図 -2-:

« 経路の作図 -1- | トップページ | 経路の作図 -3- »