FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

碁盤に座標を描く実装でちょっと悩む

引き続き、囲碁定石トレーニングの修正をしている。

今日は碁盤に座標を描くことにした。
実装方式について少し考えた。

(1)座標を含めて碁盤を画像にする
画像さえ作ってしまえば実装は簡単。
ただし、
・碁盤の交点のCSS座標が取得できない。
・13路盤など、サイズが異なる碁盤は別の画像を用意する必要がある。
という問題がある。
拡大縮小で画像の交点とCSS座標がズレるようなことは無いと思うが、できれば位置情報を正確に取得したい。

(2)Canvasで座標を描画する
現在の碁盤は HTML5 Canvas で実装しているので、context.fillText() で座標を描いてしまえばいい。
碁盤の線を引くために計算した情報を使えば、fillText用のxy座標を求めるのは難しくない。
ただし、
・Canvasを再描画する際、座標も再描画する必要がある。
という問題がある。
マウスポインタの位置に半透明碁石を表示しているとき、12fpsで碁盤を再描画している。
12fpsで座標を描いても大した負荷にはならないと思うが、無駄な処理は減らしたい。

結局、次の実装方式にした。
(3)DOMを使って座標文字用divを作成する
碁盤を描いたときに計算した情報を取得し、divのCSS座標を計算する。
同じフォントとフォントサイズでもブラウザによって表示が微妙に異なるため、divは表示位置ごとに作成した。19路盤だと19×2=38個。
石と重なっても座標が下に来るように、z-indexを 碁盤の背景色 < 碁盤の座標 < 碁盤のCanvas となるようにした。

できた碁盤は以下のとおり。(これはキャプチャ画像です)
座標つき碁盤
IE(FlashCanvas), firefox, Google Chromeでちゃんと表示されることを確認した。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。