« 経路の作図 -2- | トップページ | 経路の作図 -4- »

2012年3月 6日 (火)

経路の作図 -3-

「経路の作図 -1-」の時点では矢印球の向きは常に一定でしたが、これを線と同じ方向を向くように修正しました。

その解説に先立ち、FlatTable に関わる3種類の座標系について説明します。

1つ目はビューポート座標系です。これはブラウザの表示領域固有の座標系で、原点は左上になります。

2つ目は SVG 座標系です。これは SVG が管理している座標系で、原点は SVG 表示領域の左上です。また、座標スケールがビューポート座標系のものとは異なります。FlatTable は表示領域の寸法に応じて拡大・縮小されて表示されます。その時、SVG 内での px 値は、画像が拡大・縮小されても同じ画像に対しては同じ値を保っています。したがって、ビューポート座標系と SVG 座標系では、1px の実寸は異なることになります。

3つ目は FlatTable 座標系です。この座標系の原点は台のセンタースポットの位置になっています。座標スケールは SVG 座標系と同じです。ball.x, ball.yballFlatTable 座標になっています。これは、プログラムで管理しなければなりません。

これら3種類の座標系には次の関係が成り立っています。

    X = (vX + 原点補正)*mag
    X = x + cX
   (y についても同様)
ここに、X:SVG 座標、vX:ビューポート座標、mag:ビューポート座標系対 SVG 座標系のスケール比、xFlatTable 座標、cX:センタースポット(SVG 座標系)。

ところで、SVG の仕様書によると rotate() のパラメータに関して次のような説明が有ります。

rotate(<rotate-angle> [<cx> <cy>]) は与えられた点を中心とする角度 <rotate-angle> による 回転 を指定する。 <cx>, <cy> が与えられていない場合、回転は現在の利用座標系の原点を中心とする。 もし <cx>, <cy> が与えられているならば、回転は点 (cx, cy) を中心とする。 この変換は次の変換と同値になる:
translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>)
さて、矢印球の座標は (arrow.x + centerX, arrow.y + centerY) で与えられます(centerX, centerY は台のセンタースポットの座標)。それで、回転は、SVG の仕様書を参考に、次の式
    var x = arrow.x + centerX;
    var y = arrow.y + centerY;
    arrow.setAttribute( "transform",
        "rotate(" + angle + "," + x + "," + y + ")" // angle は回転角度
    );

で実行できると考えたのですが、それでは上手く行きませんでした。矢印球が初期位置に有ればこの式で良いのですが、実際は任意の位置に移動しているので、それを考慮する必要が有ります。

結局、回転は次の手順による変換で実現できます。

  1. 原点(SVG 座標系)を矢印球の位置に移動する
  2. 回転する(中心は原点)
  3. 原点(SVG 座標系)を移動しておいた量のうち、FlatTable 座標の分を除いた残りの分だけ元に戻す
3番目の変換が解りにくいですが、これで上手く行ったので良しとします。これをコードにすると次のようになります。
        球の回転
function drawPath(baseBall){
    var arrow = baseBall.arrow;
    var dx = arrow.x - arrow.prev.x;
    var dy = arrow.y - arrow.prev.y;
    var x = arrow.x + centerX;
    var y = arrow.y + centerY;
    var mx = -centerX;
    var my = -centerY;
    arrow.setAttribute( "transform",
        "translate(" + x + "," + y + ") " +
        "rotate(" + Math.atan2(dy, dx)*180/Math.PI + ") " +
        "translate(" + mx + "," + my + ")"
    );
    ~
}

-4- に続く

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

« 経路の作図 -2- | トップページ | 経路の作図 -4- »

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

コメント

コメントを書く

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

トラックバック

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

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

« 経路の作図 -2- | トップページ | 経路の作図 -4- »