CoffeeScriptとJSフレームワークによるHTML5 Canvasアプリ（２）

アイテム（○、△、□、コネクタ（不完全）、直線、曲線）の追加ができるようにしてみました。

フレームワーク使わずに野良MVC(MVVM?)でやってますが、今のところ楽しいです。Canvasはともかく、上のツールボックスはKnockout.jsとかを使うとうまく扱える…のかな。

Tips: fillTextを使わずにCanvasの上に文字を表示（not 描画）させる

fillTextだとフォントが大きくなった時に粗が目立ちますが、DOM要素を作って位置を動かしてCanvasの上に表示させる、という技もアリなんですね（この場合、マウスイベントの都合で要素はcanvasの子要素でないとならないですが）。この方法だと拡大しても問題ないし、テキストだから選択も可能。

MVCやStateパターンの考え方は以下の雑誌が参考になりました。単なる写経じゃなくてCoffeeScriptに移植しながら動かしてみると、頭も使うし、身になる気がしました。「モデル＝テーブルのレコード」みたいに深く考えなくても作り始められてしまうWebアプリと違い、CanvasみたいなGUIアプリは作る前にモデルの洗い出しや状態遷移図を決めておくのが大事ですね。

JavaScript徹底攻略 (WEB+DB PRESS plus)