« アメリカンフットボールのプレイ図ソフトの作成指針 | トップページ | 選手の配置およびドラッグ »

2016年7月14日 (木)

LongDriver でフィールドのスクロール

LongDriver でフィールドのデータ作成およびスクロールの実装をしました。下図で動作確認出来ます。

フィールドのデータはエンドゾーンからエンドゾーンまで用意してあり、 clipPath で覗き見ることでフィールドの一部を表示しています。覗き窓を <defs> 内で clipPath として定義し、フィールドを <g clip-path="url(#frame)">・・・</g> で囲めば clipPah の領域だけが表示されます。


<defs>
・・・
    <clipPath id="frame">
        <rect x="54" y="50" width="720" height="480" />
    </clipPath>
</defs>

<g clip-path="url(#frame)">
<g id="field" >
    <rect x="-66" y="-790" width="960" height="2160" fill="#6c3" />
・・・

clipPath 内に表示されるフィールドをスクロールさせるには茶色のバーを使います。画像の左右および下側に茶色のバーが有りますが、この上をドラッグ(注意)することでフィールドがスクロールします。

コードの概略は次のようになっています。バーの上で mousedown すると startScroll() が実行され、そこで mousemove に対するイベントリスナー hScroll()vScroll() が登録されます。そして mouseup すると endScroll() に制御が移り hScroll()vScroll() が削除されてスクロールは終了します。


function startScroll(evt){
    ・・・
    if (evt.currentTarget.id == "hbar"){
        bar.addEventListener("mousemove", hScroll, false);
    } else {
        bar.addEventListener("mousemove", vScroll, false);
    }
        bar.addEventListener("mouseup", endScroll, false);
    ・・・
}
・・・

function endScroll(evt){
    if (evt.currentTarget.id == "hbar"){
        hBar.removeEventListener("mousemove", hScroll, false);
    } else {
        vBar.removeEventListener("mousemove", vScroll, false);
    }
}

水平スクロールは hScroll() 、垂直スクロールは vScroll() で実行しています。この2つはほぼ同じコードになっているので、1つにまとめたいのですが、良い方法が判らず、別々の関数になっています。

現時点では、コードに問題が有ります。バーの上で mousedown し、そのままバーの外に出てから mouseup してバーの上に戻ると、まだスクロールは有効のままになっています。また、バーの外で mousedown してからバーの上に乗り、 mouseup すると、スクロールモードでもないのに endScroll() が実行されてしまいます。これらは意図しない動作なのですが、良い解決策が判らないので、そのままにしています。

(注意):ここでは、 mousedown した状態でマウスを動かすことをドラッグと呼んでいます。実は ondrag を使おうとしたのですが、うまく行きませんでした。それはそうでしょう。ドラッグは物を移動することですから。バーの上で ondrag すると、それはバーを移動する意味になります。

« アメリカンフットボールのプレイ図ソフトの作成指針 | トップページ | 選手の配置およびドラッグ »

フットボールのプレイ図ソフト」カテゴリの記事

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: LongDriver でフィールドのスクロール:

« アメリカンフットボールのプレイ図ソフトの作成指針 | トップページ | 選手の配置およびドラッグ »