« FlatTable 公開 | トップページ | アニメーション機能の実装、その前に »

2012年6月20日 (水)

経路線を背面に変更

FlatTable にグリッド表示機能を実装した時、どのグループに appendChild() するかによってZ軸順序に違いが生じることが分かったわけですが、このことを利用してある不具合を解消しました。

配置図例 右図は不具合解消前の FlatTable で作成した経路です。幅広の経路線が球を覆うように描かれています。つまり、経路線の方が球よりも前面に生成されている訳です。そのため、球をクリックしようとしても経路線に邪魔されて失敗に終わります。これは、経路線 baseBall.path がページ curPageappendChild() されていることに関係しています。

    curPage.appendChild(baseBall.path);
ここに、curPageballscloneNode() したものです。そして balls は的球および手球の SVG データの集まりです。
    <g id="balls">
        的球および手球
    </g>
経路線は球よりも後で appendChild() されているので、球よりも前面に表示されるのです。

そこで、この不具合を解消するために、経路線を balls 内の初めの方に appendChild() することにしました。即ち、balls を次のように変更し、

    <g id="balls">
        <g />
        的球および手球
    </g>
この <g /> の部分に経路線を appendChild() することにしました。
    curPage.childNodes[1].appendChild(baseBall.path);
childNodes[1] が <g /> に当たります。

上図の経路を、不具合解消済みの FlatTable で作成したものが下図です。経路線は15番の球に被さっていません。



この図は FlatTable を実際に表示しているものです。したがって、この図の中で配置を操作することが出来ます。(詳しい操作方法を知るには、図中のボタン[ Table ]をクリックして出るメニューの help をクリックしてください。別タブに操作説明が表示されます。)

- 追記 -

私のPCに入っているIEは Ver8 で SVG には対応していないので、上記 FlatTable がどのように表示されているか確認のため、このページをIEで表示してみました。ところが、いつの間にか Ver9 になっており、SVG が表示されます。ただし、普段 Chrome で表示しているのとはかなり違っています。上記 FlatTable は <iframe> を使って表示しているのですが、Chrome では <iframe> の枠いっぱいに表示しているのに対して、IE9では <iframe> 枠は同じなのに FlatTable の画像が小さくなっています。これは困ったことになりました。

- 追記 2 -

IE9で FlatTable が小さくなるという問題は改善しました。しかし、 Chrome 以外のブラウザは表示を確認していないので、IE9と同様の問題が出ているかも知れません。

« FlatTable 公開 | トップページ | アニメーション機能の実装、その前に »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 経路線を背面に変更:

« FlatTable 公開 | トップページ | アニメーション機能の実装、その前に »