« ゴーストの再利用が出来ない | トップページ | 直線、ジャンプ、線幅変更ルーチン »

2012年3月25日 (日)

曲線の作図

FlatTable に曲線作図ルーチンを追加しました。メニュー・ボタン[ Ball ]をクリックすると[ Curve ]と[ Ctrl-Pnt on/off ]の追加されたメニューが表示されます。因みに FlatTable で扱う曲線は2次のベジェ曲線です。

メニューの[ Curve ]をクリックした時の処理の流れは

    curveLine() ⇒ curve() ⇒ makeCtrlP()
制御点の図 となっています。[ Curve ]をクリックすると、現行の球とその1つ前の球の間に「+」が出現します。この「+」は曲線の制御点で、これをドラッグして曲線の形状を調節します。制御点のドラッグは球のドラッグと同じルーチンを使用しています。

制御点「+」は生成時に一時的に台のセンタースポットに配置し、その直後に translate() で本来の位置に移動します。これは、生成時の位置が translate() の基準点(原点)になることへの対応です。

        制御点の配置

function makeCtrlP(){
    ・・・
    var ctrlP = document.createElementNS(svgns, "path");
    ctrlP.setAttribute("style",
        "fill:none;stroke:" + ballColor[i] + ";stroke-width:3");
    var startpX = centerX - 4;    // 4 は十字の長さ(の半分)
    var startpY = centerY;
    ctrlP.setAttribute("d",
        "m " + startpX + "," + startpY + " 8,0 m -4,-4 0,8");
    ctrlP.x = (ball.x + ball.prev.x)/2;
    ctrlP.y = (ball.y + ball.prev.y)/2;
    ctrlP.setAttribute("transform",
        "translate(" + ctrlP.x + "," + ctrlP.y + ")");
    ・・・
}

この制御点は必要に応じて表示/非表示の選択が出来ます。操作はメニューの[ Ctrl-Pnt on/off ]で行います。操作したい制御点「+」もしくは曲線が指定されている球をクリックして現行の球にした後でこのメニューをクリックすると「+」の表示/非表示が切り替わります。なお、現行の球が基礎球の時は、その球の経路全体に対して制御点の表示/非表示を切り替えます。

« ゴーストの再利用が出来ない | トップページ | 直線、ジャンプ、線幅変更ルーチン »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 曲線の作図:

« ゴーストの再利用が出来ない | トップページ | 直線、ジャンプ、線幅変更ルーチン »