最速インターフェース研究会

JavaScriptでペイント、開発版

少し留守になるかもしれないのでとりあえずアップ。保存ルーチンをまだつけていない。
http://la.ma.la/misc/plot/draw2.html

-zで一手戻す、+/- or q/a でブラシサイズを変更。
というキーバインドをとりあえず実装。作りこめば色変更とか、直線描画とかも色々できるだろうな。
ただ、この手書き機能を組み込んだチャットと、そのチャットを組み込んだWikiを作るというのが目的なので単体であまり作りこむつもりはない。

IEの場合、VMLを使った描画にしてみた。MSNメッセンジャーの手書きモードと、書き心地はそう変わらないが、やっぱり線が増えてくると重くなるのでそれほど書き込むことはできない。

DIV要素を足していく方式の描画エンジンをまず作ってIEの場合のみVMLを使った関数で上書き、という方向性で。
VMLはもう終わっている技術なので。SVGが使えれば一番いいんだけれど。

firefoxでの動作が、どうすれば負荷が少なくなるのか手探り状態。実際に描いたり、CPUの使用率を見てあれこれ実験中。こうすれば速くなるだろう、と想像で実装しているのだが、いまいち効果が見えない。

垂直もしくは水平に動いた場合はwidth、heightをいじるようにしたりとか、次の描画に使うための要素を予め作成しておいて、getElementByIdを使わないで済むように変数にキャッシュしておいたりとか。

最適化をしているつもりなのだが、一番最初のドットを大量に足していく方式のほうがなぜか描画が早い気がする。既存オブジェクトのスタイル操作よりも新規に作ったほうが速いのかも。しかしドットを大量に作るとやっぱり死ぬほど重くなるので不可。

今更ながらJavaScriptでのオブジェクト指向な書き方を覚えようかと思って大幅に書き直している。個別の関数の中にブラウザ判別が入るのは美しくない。丸ごとオーバーライドしてしまおう。イベント処理なんかもHTMLから綺麗に分離できるので、今まで書いたコード全部直したくなったり。

タブレットPCが欲しい。

A quick preview will be rendered here when you click "Preview" button.