« 配置コード機能の実装 -3- | トップページ | 配置コード機能の実装 -4- »

2012年6月11日 (月)

グリッドの表示

配置図 FlatTable にグリッドの表示機能を追加しました。ボタン[ Table ]のメニューで Grid on/off を選択すると、台に格子状の線が表示されます。この実装は、グリッドの画像を SVG データとして前もって記述しておいて、その表示/非表示を切り替えるだけなので簡単に出来ました・・・と言いたいところですが、ちょっと失敗をして、そのお蔭で SVG について理解を深めることが出来ました。

FlatTable の SVG データは次のような構成になっています。

FlatTable の SVG データ
<svg id="flattable">
    <g id="table">
        ・・・
        (1)
    </g>
    (2)
    <g id="balls">
        ・・・
    </g>
    ボタン類
</svg>
タグ <g> は図形を1つのグループにまとめるものです。上記 table グループにはクッションやラシャ等の台の図形が入っています。

初めは、グリッドの SVG データを上記の (2) の位置に置いていました。グリッドは、球よりも前に記述しているので球よりも後面に表示されると思っていました。しかしこの時点では何故か、グリッドが球よりも前面に表示されるのです。

実は、上記データ中に記述されている balls は台の左下に並べておく球で、台上に配置される球は、後からダイナミックに生成したものなのです。そして、それら後から生成した球は上記の tableappendChild() しているのです。そのため、table より後の位置である (2) にグリッドが有ると、それは球よりも前面に表示されることになる訳です。

球の表面にグリッドの線が有るのは美しくないので、現在はグリッドの SVG データを (1) に変更しています。球もグリッドも同じ table の child なので、後から生成された球の方が前面に来ることになります。

ところで、仮想的マウスパッドは最前面に表示したいのだが、Z軸順序の指定が出来ないので、仮想的マウスパッドが必要になる度に appendChild() を実行し、不要になったら removeChild() を実行するようにしています。しかし、上記 (2) の位置に仮想的マウスパッドを置けば、どの球よりも前面に表示されることになります。そして、不必要な時は、非表示にすれば良いのです。

しかし、以前の記事に書いたように、経路の作図中は、ゴーストや矢印球は仮想的マウスパッドよりも前面に有った方が便利なので、現在の方式のままで行くことにします。

« 配置コード機能の実装 -3- | トップページ | 配置コード機能の実装 -4- »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: グリッドの表示:

« 配置コード機能の実装 -3- | トップページ | 配置コード機能の実装 -4- »