« ページの生成・削除、ページ移動 | トップページ | 台の回転 »

2012年4月10日 (火)

ページの複製&・・・

FlatTable にコマンド「Dup & GtE(複製 & 終点への移動)」を実装しました。FlatTable は複数の配置を扱うことが出来、それぞれの配置はページと呼んでいます。「Dup & GtE」は、このページを複製し、且つ、基礎球を経路の終点へ移動するコマンドです。このコマンドはボタン[ Tot ]から実行できます。

当初は「Dup」だけを考えていたのですが、「GtE(Go to the End)」を付け加えて1つのコマンドにまとめることにしました。「Dup」だけだと実装が面倒だというのがその理由です。「Dup」は球の配置だけでなく、経路に関する情報も複製しなけらばならず、それが面倒なのです。「GtE」だと経路は考えずに済むので楽です。

もう1つの理由として「Dup & GtE」の方が FlatTable 使用時の自然な流れに沿っているということが有ります。ページを複製する状況を Flash 版 FlatTable を使って説明します。(ページの移動は FlatTable 右上の「▲」をクリックします)

SAMPLE のように連続したショットを配置図にするには、まず、最初のページを作図します(1ページ目)。次に、そのページを複製し(2ページ目になる)、基礎球を経路の終点へ移動させます。そして、そのページで2番目のショットを作図します。その次のショットは、2ページ目を複製し(3ページ目になる)、後は2ページ目と同じ処理をしてそのショットを作図します。それ以降も同様に進めて行って連続したショットを完成させます。この例のように、ページを複製してもすぐ経路を御破算にして基礎球を終点へ移動するのが「Dup」の主な使い方です。

このような理由から、新たな FlatTable では「Dup」ではなく、「Dup & GtE」を採用することにしました。

なお、「Dup」はコマンドとしては実装しない訳ですが、後に出て来る配置コードを利用することで「Dup」と同じ効果を得ることが可能となります。

「Dup & GtE」のルーチンは次の通りです。

// Dup & Go to the End
function dupGtE(){
    ・・・
    var oldPage = curPage;
    var oldBall = null;
    genPage(curPage, false);

    for (var i = 0; i <= 15; i++){
        ball = curPage.childNodes[i*2 + 1];
        oldBall = oldPage.childNodes[i*2 + 1];
        src = oldBall.arrow ? oldBall.arrow : oldBall;
        ball.x = src.x;
        ball.y = src.y;
        ball.setAttribute("transform",
            "translate(" + ball.x + "," + ball.y + ")"
        );
        addEvent(ball, "click", ballClick);
    }
}
現行ページを旧ページとして記憶しておき、新たにページを作成(genPage())します。この genPage() により新たに作成されたページが現行ページになります。その後で、各基礎球を経路の終点へ移動し、イベントハンドラーを設定します。ずいぶん簡単な実装になりました。

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

« ページの生成・削除、ページ移動 | トップページ | 台の回転 »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: ページの複製&・・・:

« ページの生成・削除、ページ移動 | トップページ | 台の回転 »