« Inkscape はバカ | トップページ | 球の移動 -2- »

2012年2月23日 (木)

球の移動 -1-

Inkscape に悩まされながらも、やっとビリヤード台と球の画像が出来たので、いよいよ JavaScript のコーディングです。JavaScript も SVG も初めてなので、やりたいことを1つ1つ確認しながら進んで行きます。まず、最初にやったのは、球を移動することです。

SVG の基本的な図形―四角形や円など―は、代表的座標を表す属性が有るので、その図形 figure を座標(Px,Py)に移動するのは、

    figure.setAttribute("x", Px);
    figure.setAttribute("y", Py);        (1)
四角形の移動の説明図

で出来ます。しかし、複合図形のビリヤード球 ball には代表的座標を表す属性が無く (1)式のような記述が出来ません。そのような場合は、

    ball.setAttribute("transform", "translate(δx, δy)");        (2)
ビリヤード球の移動の説明図

というふうに、図形をtransform(変換)することになるのですが、このδx, δy が曲者です。 (2)式で δx, δy は差分を意味するのですが、どこに対する差分なのかが、すぐには分かりませんでした。初めは、直前の座標との差分かと思ってコードを書いたのですが、何やらケッタイな動きをします。実は、δx, δy は図形の初期座標に対する差分だったのです。

そこで、FlatTable では、球の初期座標を台のセンタースポットに一致させることにしました。こうすると、(2)式のδx, δy はセンタースポットを原点とする座標系に関する座標という意味になり、後で便利なのです。

-2-に続く・・・

« Inkscape はバカ | トップページ | 球の移動 -2- »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 球の移動 -1-:

« Inkscape はバカ | トップページ | 球の移動 -2- »